// 为保证正常绘图,代码格式与所选格式需保持一致;
// 请输入JS代码或前往官网复制示例代码;
// 复制完代码后,请先将代码中的数据列替换为绑定的数据列,绑定的数据列从上至下依次为column1、column2......,option部分请添加options.data以引用绑定列,chart绘制的DOM id会自动替换为变量$container
var colorList = [ '#74AFFF','#98CD96','#F09766']
var dataList = [
{ value: '480', name: '郑煤机集团', percent: ''},
{ value: '235', name: '关联方', percent: ''},
{ value: '410', name: '外销', percent: ''}
]
// series 3个选项对应3个圆环 以此从里到外
option = {
color: colorList,
tooltip: {
show: false,
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
series: [
{
type: 'pie',
radius: ['49.5%', '50%'],
hoverAnimation: false,
data: dataList ,
itemStyle: {
color: '#999'
},
labelLine: {
show: false
},
label: {
formatter: function (params) {
return (
'{a|' + params.value + '}\n' +
'{b|' + params.percent + '%}'
);
},
rich: {
a: {
color: '#d8d8d8',
fontSize: 14,
backgroundColor: '#21293e'
},
b: {
color: '#d8d8d8',
fontSize: 14,
backgroundColor: '#21293e'
}
},
show: true,
position: 'center',
fontSize: 14,
textStyle: {
color: '#d8d8d8',
}
},
},
{
type: 'pie',
radius: ['55%', '70%' ],
hoverAnimation: false,
itemStyle: {
borderColor: '#21293e',
borderWidth: 3,
opacity: 0.2,
},
label: {
show: false,
position: 'inner',
fontSize: 14
},
labelLine: {
show: false
},
data: dataList
},
{
type: 'pie',
radius: ['70%', '80%'],
//hoverAnimation: false,
itemStyle: {
borderColor: '#21293e',
borderWidth: 3
},
labelLine: {
length: 0,
color: 'inherit',
},
label: {//{b|{b}}\n{d}%
formatter:function(data) {
if (data.name.length > 2) {
data.name = insertStr(data.name, [2, 5], '\n')
}
if (data.name === '关联方') {
return data.name +' \n'+ data.percent +'% '
}
return data.name +'\n'+ data.percent +'%'
},
borderWidth: 1,
borderRadius: 4,
color: 'inherit',
fontSize: 16,
rich: {
},
position: 'outside',
},
emphasis: {
scaleSize: 10
},
data: dataList
}
]
};
var chartIndex = 0;
var timer2 = null;
timer2 = setInterval(() => {
myChart.dispatchAction({
type: 'downplay',
dataIndex: [...new Array(dataList.length).keys()]
})
myChart.dispatchAction({
type: 'highlight',
dataIndex: chartIndex
})
chartIndex++
if (chartIndex >= dataList.length) chartIndex = 0
}, 2000)
let insertStr = (soure,start, str) => {
start.forEach(v => {
soure = soure.slice(0, v) + str + soure.slice(v)
})
return soure;
}
|