Echarts餅圖樣式之添加內(nèi)圈陰影達到立體效果
更新時間：2024年02月01日 11:59:20 作者：Nichole_9978
餅圖主要是通過扇形的弧度表現(xiàn)不同類目的數(shù)據(jù)在總和中的占比,它的數(shù)據(jù)格式比柱狀圖更簡單,這篇文章主要給大家介紹了關(guān)于Echarts餅圖樣式之添加內(nèi)圈陰影達到立體效果的相關(guān)資料,文中還介紹了echarts餅圖外部陰影設置的方法,需要的朋友可以參考下
實現(xiàn)思想：
使用雙餅圖，將內(nèi)圈餅圖與外圈餅圖數(shù)據(jù)一致，并保持高亮
最終效果：
1.在series中添加內(nèi)圈餅圖
注意：data要與外圈餅圖一致，餅圖中心與外圈餅圖一致，餅圖外徑與外圈餅圖內(nèi)徑一致（+1效果更好）
{
type: 'pie',
radius: ['36%', '41%'],
center: ['35%', '55%'],
startAngle: 135,
minAngle: 12,
label: {
show: false
},
hoverAnimation: false,
legendHoverLink: false,
animation: false,
tooltip: {
show: false
},
data: data,
}
2.保持內(nèi)圈高亮，達到陰影效果
myChart.dispatchAction({
type: "highlight",
seriesIndex: 1, // series 數(shù)據(jù)數(shù)組第幾個
});
完整script代碼：
$(function () {
var main = document.getElementById('item1');
var msg=[
{name: '字段1', value: '16'},
{name: '字段2', value: '34'},
{name: '字段3', value: '52'},
{name: '字段4', value: '48'},
{name: '字段5', value: '88'}
]
nanding_bing_echart(msg, main);
})
function nanding_bing_echart(msg, main) {
var data = msg;
// 計算和
var num = 0;
for (var i = 0; i < data.length; i++) {
num += Number(data[i].value);
}
var myChart = echarts.init(main);
option = null;
myChart.setOption({
backgroundColor:'#1a3c81',
legend: {
//是否顯示圖例
show: true,
//plain普通(默認),scroll數(shù)量較多時可使用可滾動翻頁的圖例(水平\垂直)
type: 'plain',
//圖例列表的布局朝向：水平horizontal、垂直vertical
orient: 'vertical',
//圖例組件離容器上(left,top,right,bottom)側(cè)的距離
bottom: '30',
right: '30',
//圖例每項之間的間隔。橫向布局時為水平間隔，縱向布局時為縱向間隔。
itemGap: 6,
//圖例標記的圖形寬度
itemWidth: 10,
//圖例標記的圖形高度
itemHeight: 10,
//圖例的公用文本樣式(包括顏色\字體\字號\等等...)
textStyle: {
color: font_color,
fontSize: 14,
},
//控制是否可以通過點擊圖例改變系列的顯示狀態(tài):true\false\single\multiple
selectedMode: true,
//圖例關(guān)閉時的顏色
inactiveColor: '#ccc',
icon: 'circle',
formatter: function (name) {
var value;
for (var i = 0; i < data.length; i++) {
if (data[i].name == name) {
value = data[i].value;
}
}
return name + ' : ' + Math.round(value / num * 10000) / 100 + "%";
},
},
tooltip: {
confine: true,
//是否顯示提示框組件，包括提示框浮層和 axisPointer
show: true,
//觸發(fā)類型:'item':數(shù)據(jù)項圖形觸發(fā),主要在散點圖，餅圖等無類目軸的圖表中使用\'axis':坐標軸觸發(fā),主要在柱狀圖，折線圖等會使用類目軸的圖表中使用\'none':什么都不觸發(fā)
trigger: 'item',
//提示框浮層內(nèi)容格式器:{a}（系列名稱），（數(shù)據(jù)項名稱），{c}（數(shù)值）, 827pvoq（百分比）
formatter: ' :<br/> {c} 人 (v7w2xnz%)',
//是否顯示提示框浮層，默認顯示
showContent: true,
//是否永遠顯示提示框內(nèi)容，默認情況下在移出可觸發(fā)提示框區(qū)域后 一定時間 后隱藏，設置為 true 可以保證一直顯示提示框內(nèi)容
alwaysShowContent: false,
//提示框觸發(fā)的條件:mousemove,click,mousemove|click,none
triggerOn: 'mousemove|click',
//浮層隱藏的延遲，單位為 ms，在 alwaysShowContent 為 true 的時候無效
hideDelay: 100,
//鼠標是否可進入提示框浮層中，默認為false，如需詳情內(nèi)交互，如添加鏈接，按鈕，可設置為 true
enterable: false,
//是否將 tooltip 框限制在圖表的區(qū)域內(nèi),當圖表外層的 dom 被設置為 'overflow: hidden'，或者移動端窄屏，導致 tooltip 超出外界被截斷時，此配置比較有用
confine: true,
//提示框浮層的移動動畫過渡時間，單位是 s，設置為 0 的時候會緊跟著鼠標移動
transitionDuration: 0.4,
//提示框浮層的背景顏色
backgroundColor: 'rgba(50,50,50,0.7)',
//提示框浮層的邊框顏色
borderColor: '#333',
//提示框浮層的文本樣式(顏色\字體\字號\等等...)
textStyle: {
color: font_color,
fontSize: 12,
},
},
animationDuration: 2000,
animationDurationUpdate: 800,
series: [
{
color:['#17b367', '#02aafe', '#814ecc', '#cb8251', '#a3c84e', '#4c63d9'],
type: 'pie',
radius: ['40%', '70%'],
center: ['35%', '55%'],
startAngle: 135,
minAngle: 12,
data: data,
label:{
//是否顯示標簽(圓環(huán)false)
show: true,
// 標簽的位置outside:有視覺引導線連接,inside==inner,圓環(huán)中心center
position: 'outside',
//標簽內(nèi)容:{a}：系列名,：數(shù)據(jù)名,{c}：數(shù)據(jù)值,8s27p2v：百分比
formatter: '\n{c}人',
// 標簽文字顏色
color: font_color,
},
labelLine: {
//是否顯示視覺引導線
show: true,
//是否平滑視覺引導線，默認不平滑，可以設置成 true 平滑顯示，也可以設置為 0 到 1 的值，表示平滑程度
smooth: false,
},
},{
type: 'pie',
radius: ['36%', '41%'],
center: ['35%', '55%'],
startAngle: 135,
minAngle: 12,
label: {
show: false
},
hoverAnimation: false,
legendHoverLink: false,
animation: false,
tooltip: {
show: false
},
data: data,
},
]
}, true);
// 保持內(nèi)圈高亮，達到陰影效果
myChart.dispatchAction({
type: "highlight",
seriesIndex: 1, // series 數(shù)據(jù)數(shù)組第幾個
});
// 自適應大小
window.addEventListener("resize", function () {
myChart.resize();
});
};附echarts餅圖外部陰影設置方法：
var option = {
color: ['rgba(91, 143, 249, 0.85)', 'rgba(90, 216, 166, 0.85)', 'rgba(255, 82, 77, 0.85)'],
tooltip: {
trigger: 'item'
},
legend: {
type: 'plain',
orient: 'vertical',
right: '10%',
top: 'center',
align: 'left',
itemWidth: 8, // 設置寬度
itemHeight: 8, // 設置高度
itemGap: 16, // 設置間距，
symbolKeepAspect: false,
formatter: function (name) {
let data = option.series[1].data
console.log(data, 'data')
let total = 0
let tarValue
for (let i = 0; i < data.length; i++) {
total += data[i].value
if (data[i].name == name) {
tarValue = data[i].value
}
}
//計算出百分比
let p = Math.round((tarValue / total) * 100) + '%'
return `${name} ${tarValue} ${p}`
//name是名稱，tarValue是數(shù)值
},
},
series: [
// 設置外部陰影
{
name: '',
type: 'pie',
clockWise: false,
radius: '80%', //邊框大小
color: '#fff',
center: ['30%', '50%'],
data: [{
value: 10,
itemStyle: {
// borderColor: '#fff',
borderWidth: 1,
shadowBlur: 9, // 圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設置圖形的陰影效果
shadowOffsetX: 5, // 陰影水平方向上的偏移距離
shadowOffsetY: 4,
shadowColor: '#5B8FF9' // 陰影顏色
}
}]
},
//內(nèi)部餅圖
{
type: 'pie',
radius: '80%',
center: ['30%', '50%'], //調(diào)整echarts的位置，第一個值調(diào)整左右，第二個值調(diào)整上下，也可以設置具體數(shù)字像素值，center: [200, 300],
label: { //echarts內(nèi)部顯示數(shù)字
color: '#fff',
show: true,
formatter: '2s2qm7i',
position: 'inside',
},
data: [{
value: 85,
name: '正常',
},
{
value: 7,
name: '停運+'
},
{
value: 8,
name: '停運-'
},
],
itemStyle: {
borderColor: '#fff',
borderWidth: 2,
},
},
]
};總結(jié)
到此這篇關(guān)于Echarts餅圖樣式之添加內(nèi)圈陰影達到立體效果的文章就介紹到這了,更多相關(guān)Echarts餅圖添加內(nèi)圈陰影內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
細說webpack源碼之compile流程-入口函數(shù)run
Webpack 是一個前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應的靜態(tài)資源。這篇文章主要介紹了webpack源碼之compile流程-入口函數(shù)run,需要的朋友可以參考下2017-12-12
JavaScript判斷一個變量是否是數(shù)組的五種方式總結(jié)
在 JavaScript 編程中,我們經(jīng)常需要對不同類型的變量進行判斷和處理,其中,判斷一個變量是否是數(shù)組是一項基本且常見的任務,在本篇博客中,我們將介紹幾種常用的方式來判斷一個變量是否是數(shù)組,并探討它們的優(yōu)缺點以及適用場景,需要的朋友可以參考下2023-11-11
淺談js中用$(#ID)來作為選擇器的問題(id重復的時候)
下面小編就為大家?guī)硪黄獪\談js中用$(#ID)來作為選擇器的問題(id重復的時候)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
微信小程序-圖片、錄音、音頻播放、音樂播放、視頻、文件代碼實例
本篇文章主要介紹了微信小程序-圖片、錄音、音頻播放、音樂播放、視屏、文件代碼實例，有興趣的可以了解一下。2016-11-11
Javascript實現(xiàn)的類似Google的Div拖動效果代碼
Javascript實現(xiàn)的類似Google的Div拖動效果代碼，需要的朋友可以參考下。2011-08-08
使用onkeypress字符按鍵兼容所有瀏覽器，感興趣的朋友可以參考下，希望對你學習js事件有所幫助2013-04-04
這篇文章主要為大家詳細介紹了JavaScript對象類型，分析了JavaScript六種數(shù)據(jù)類型，感興趣的小伙伴們可以參考一下2016-06-06
JavaScript中字符串與Unicode編碼互相轉(zhuǎn)換的實現(xiàn)方法
這篇文章主要介紹了JavaScript中字符串與Unicode編碼互相轉(zhuǎn)換的實現(xiàn)方法涉及JavaScript編碼、數(shù)據(jù)類型等的轉(zhuǎn)換技巧,需要的朋友可以參考下2015-12-12
JavaScript數(shù)據(jù)類型判斷之Object.prototype.toString.call() 的詳解(示
`Object.prototype.toString.call()`是JavaScript中判斷數(shù)據(jù)類型的強大方法,可以精確區(qū)分所有內(nèi)置類型,包括原始類型和對象類型,適用于跨環(huán)境檢測和區(qū)分自定義類實例,感興趣的朋友跟隨小編一起看看吧2024-11-11
這篇文章主要介紹了Javascript 實現(xiàn)放大鏡效果實例詳解的相關(guān)資料,這里附有實現(xiàn)實例代碼，具有參考價值，需要的朋友可以參考下2016-12-12