Echarts餅圖樣式之添加內(nèi)圈陰影達(dá)到立體效果
更新時(shí)間：2024年02月01日 11:59:20 作者：Nichole_9978
餅圖主要是通過(guò)扇形的弧度表現(xiàn)不同類(lèi)目的數(shù)據(jù)在總和中的占比,它的數(shù)據(jù)格式比柱狀圖更簡(jiǎn)單,這篇文章主要給大家介紹了關(guān)于Echarts餅圖樣式之添加內(nèi)圈陰影達(dá)到立體效果的相關(guān)資料,文中還介紹了echarts餅圖外部陰影設(shè)置的方法,需要的朋友可以參考下
實(shí)現(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)圈高亮，達(dá)到陰影效果
myChart.dispatchAction({
type: "highlight",
seriesIndex: 1, // series 數(shù)據(jù)數(shù)組第幾個(gè)
});
完整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;
// 計(jì)算和
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普通(默認(rèn)),scroll數(shù)量較多時(shí)可使用可滾動(dòng)翻頁(yè)的圖例(水平\垂直)
type: 'plain',
//圖例列表的布局朝向：水平horizontal、垂直vertical
orient: 'vertical',
//圖例組件離容器上(left,top,right,bottom)側(cè)的距離
bottom: '30',
right: '30',
//圖例每項(xiàng)之間的間隔。橫向布局時(shí)為水平間隔，縱向布局時(shí)為縱向間隔。
itemGap: 6,
//圖例標(biāo)記的圖形寬度
itemWidth: 10,
//圖例標(biāo)記的圖形高度
itemHeight: 10,
//圖例的公用文本樣式(包括顏色\字體\字號(hào)\等等...)
textStyle: {
color: font_color,
fontSize: 14,
},
//控制是否可以通過(guò)點(diǎn)擊圖例改變系列的顯示狀態(tài):true\false\single\multiple
selectedMode: true,
//圖例關(guān)閉時(shí)的顏色
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ā)類(lèi)型:'item':數(shù)據(jù)項(xiàng)圖形觸發(fā),主要在散點(diǎn)圖，餅圖等無(wú)類(lèi)目軸的圖表中使用\'axis':坐標(biāo)軸觸發(fā),主要在柱狀圖，折線(xiàn)圖等會(huì)使用類(lèi)目軸的圖表中使用\'none':什么都不觸發(fā)
trigger: 'item',
//提示框浮層內(nèi)容格式器:{a}（系列名稱(chēng)），（數(shù)據(jù)項(xiàng)名稱(chēng)），{c}（數(shù)值）, wppm3vysvbp（百分比）
formatter: ' :<br/> {c} 人 (wppm3vysvbp%)',
//是否顯示提示框浮層，默認(rèn)顯示
showContent: true,
//是否永遠(yuǎn)顯示提示框內(nèi)容，默認(rèn)情況下在移出可觸發(fā)提示框區(qū)域后 一定時(shí)間 后隱藏，設(shè)置為 true 可以保證一直顯示提示框內(nèi)容
alwaysShowContent: false,
//提示框觸發(fā)的條件:mousemove,click,mousemove|click,none
triggerOn: 'mousemove|click',
//浮層隱藏的延遲，單位為 ms，在 alwaysShowContent 為 true 的時(shí)候無(wú)效
hideDelay: 100,
//鼠標(biāo)是否可進(jìn)入提示框浮層中，默認(rèn)為false，如需詳情內(nèi)交互，如添加鏈接，按鈕，可設(shè)置為 true
enterable: false,
//是否將 tooltip 框限制在圖表的區(qū)域內(nèi),當(dāng)圖表外層的 dom 被設(shè)置為 'overflow: hidden'，或者移動(dòng)端窄屏，導(dǎo)致 tooltip 超出外界被截?cái)鄷r(shí)，此配置比較有用
confine: true,
//提示框浮層的移動(dòng)動(dòng)畫(huà)過(guò)渡時(shí)間，單位是 s，設(shè)置為 0 的時(shí)候會(huì)緊跟著鼠標(biāo)移動(dòng)
transitionDuration: 0.4,
//提示框浮層的背景顏色
backgroundColor: 'rgba(50,50,50,0.7)',
//提示框浮層的邊框顏色
borderColor: '#333',
//提示框浮層的文本樣式(顏色\字體\字號(hào)\等等...)
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:{
//是否顯示標(biāo)簽(圓環(huán)false)
show: true,
// 標(biāo)簽的位置outside:有視覺(jué)引導(dǎo)線(xiàn)連接,inside==inner,圓環(huán)中心center
position: 'outside',
//標(biāo)簽內(nèi)容:{a}：系列名,：數(shù)據(jù)名,{c}：數(shù)據(jù)值,wppm3vysvbp：百分比
formatter: '\n{c}人',
// 標(biāo)簽文字顏色
color: font_color,
},
labelLine: {
//是否顯示視覺(jué)引導(dǎo)線(xiàn)
show: true,
//是否平滑視覺(jué)引導(dǎo)線(xiàn)，默認(rèn)不平滑，可以設(shè)置成 true 平滑顯示，也可以設(shè)置為 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)圈高亮，達(dá)到陰影效果
myChart.dispatchAction({
type: "highlight",
seriesIndex: 1, // series 數(shù)據(jù)數(shù)組第幾個(gè)
});
// 自適應(yīng)大小
window.addEventListener("resize", function () {
myChart.resize();
});
};附echarts餅圖外部陰影設(shè)置方法：
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, // 設(shè)置寬度
itemHeight: 8, // 設(shè)置高度
itemGap: 16, // 設(shè)置間距，
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
}
}
//計(jì)算出百分比
let p = Math.round((tarValue / total) * 100) + '%'
return `${name} ${tarValue} ${p}`
//name是名稱(chēng)，tarValue是數(shù)值
},
},
series: [
// 設(shè)置外部陰影
{
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 一起設(shè)置圖形的陰影效果
shadowOffsetX: 5, // 陰影水平方向上的偏移距離
shadowOffsetY: 4,
shadowColor: '#5B8FF9' // 陰影顏色
}
}]
},
//內(nèi)部餅圖
{
type: 'pie',
radius: '80%',
center: ['30%', '50%'], //調(diào)整echarts的位置，第一個(gè)值調(diào)整左右，第二個(gè)值調(diào)整上下，也可以設(shè)置具體數(shù)字像素值，center: [200, 300],
label: { //echarts內(nèi)部顯示數(shù)字
color: '#fff',
show: true,
formatter: 'wppm3vysvbp',
position: 'inside',
},
data: [{
value: 85,
name: '正常',
},
{
value: 7,
name: '停運(yùn)+'
},
{
value: 8,
name: '停運(yùn)-'
},
],
itemStyle: {
borderColor: '#fff',
borderWidth: 2,
},
},
]
};總結(jié)
到此這篇關(guān)于Echarts餅圖樣式之添加內(nèi)圈陰影達(dá)到立體效果的文章就介紹到這了,更多相關(guān)Echarts餅圖添加內(nèi)圈陰影內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript中parseFloat()函數(shù)的使用示例
parseFloat主要將首位是數(shù)字的字符串轉(zhuǎn)換成浮點(diǎn)型數(shù)字,如果字符串不是以數(shù)字開(kāi)頭,就會(huì)返回NaN,這篇文章主要給大家介紹了關(guān)于JavaScript中parseFloat()函數(shù)的使用示例,需要的朋友可以參考下2025-08-08
js鎖屏解屏通過(guò)對(duì)$.ajax進(jìn)行封裝實(shí)現(xiàn)
js鎖屏解屏是通過(guò)對(duì)$.ajax進(jìn)行封裝實(shí)現(xiàn)的,需要的朋友可以參考下2014-07-07
用最通俗易懂的代碼幫助新手理解javascript閉包 推薦
我同樣也是個(gè)javascript新手，怎么說(shuō)呢，先學(xué)的jquery，精通之后發(fā)現(xiàn)了javascript的重要性，再回過(guò)頭來(lái)學(xué)javascript面向?qū)ο缶幊?/div> 2012-03-03
JS實(shí)現(xiàn)在線(xiàn)統(tǒng)計(jì)一個(gè)頁(yè)面內(nèi)鼠標(biāo)點(diǎn)擊次數(shù)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)在線(xiàn)統(tǒng)計(jì)一個(gè)頁(yè)面內(nèi)鼠標(biāo)點(diǎn)擊次數(shù)的方法,實(shí)例分析了javascript操作Cookie實(shí)現(xiàn)計(jì)數(shù)的技巧,需要的朋友可以參考下2015-02-02
這篇文章主要給大家介紹了關(guān)于uni-app使用組件的詳細(xì)步驟,文中還介紹了自定義組件的使用方法,本文通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
JavaScript開(kāi)發(fā)者必備的10個(gè)Sublime Text插件
Sublime Text幾乎是任何開(kāi)發(fā)者在其工具箱的必備應(yīng)用程序,這篇文章主要介紹了JavaScript開(kāi)發(fā)者必備的10個(gè)Sublime Text插件，感興趣的小伙伴們可以參考一下2016-02-02
下面小編就為大家?guī)?lái)一篇淺談JavaScript的全局變量與局部變量。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
這篇文章主要為大家詳細(xì)介紹了bootstrap select下拉搜索插件的使用方法，動(dòng)態(tài)加載自己數(shù)據(jù)的二級(jí)聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了JavaScript駕馭網(wǎng)頁(yè)－DOM的相關(guān)資料,需要的朋友可以參考下2016-03-03
JavaScript全排列的六種算法 具體實(shí)現(xiàn)
這篇文章介紹了全排列的六種算法有，交換算法，鏈接算法，回溯算法等，有需要的朋友可以參考一下2013-06-06最新評(píng)論