let data = [
"黄曹严",
"李黄",
"张岑伏",
"水褚元",
"茅苏",
"唐何·罗酆陶",
"汤舒",
"和杜廉",
"禹邬薛庞·李项施",
"强柏阮",
"祁季杜",
"唐杜季",
"戚鲍廉",
"李项",
"郎卞袁",
"强杨",
"闵鲍·余臧",
"陈余邵",
"史苗·水鲁",
"水柏",
"茅何禹滕史·廉",
"冯俞·岑项",
"郑鲁",
"茅潘俞魏·葛",
"穆孟伏米苏·方蓝康",
"花鲍于",
"方姚·唐贝茅",
"华薛冯",
"倪尤·严",
"马袁穆",
"柏黄",
"沈沈·倪李",
"朱褚汤",
"贝屈",
"云苏曹",
"邹熊狄杨朱·昌皮元",
"魏雷张",
"陶薛费皮蓝·贺于娄",
"茅袁张·陈",
"何柏酆",
"米皮·唐何",
"纪汤华",
"曹严鲁",
"倪顾柏",
"袁季",
"尤毕陶周杜·花安时",
"云窦金",
"臧费",
"孟乐严",
"邹季"
]
data = data.map(item => ({name: item,textStyle:{color:"#000"}}) )
console.log(data)
let seriesData = [
{
"name": "黄曹严",
"value": 13244
},
{
"name": "李黄",
"value": 39734
},
{
"name": "张岑伏",
"value": 58064
},
{
"name": "水褚元",
"value": 70577
},
{
"name": "茅苏",
"value": 22677
},
{
"name": "唐何·罗酆陶",
"value": 43129
},
{
"name": "汤舒",
"value": 47836
},
{
"name": "和杜廉",
"value": 59035
},
{
"name": "禹邬薛庞·李项施",
"value": 35509
},
{
"name": "强柏阮",
"value": 88528
},
{
"name": "祁季杜",
"value": 31922
},
{
"name": "唐杜季",
"value": 67800
},
{
"name": "戚鲍廉",
"value": 78287
},
{
"name": "李项",
"value": 23236
},
{
"name": "郎卞袁",
"value": 13386
},
{
"name": "强杨",
"value": 86100
},
{
"name": "闵鲍·余臧",
"value": 1844
},
{
"name": "陈余邵",
"value": 6545
},
{
"name": "史苗·水鲁",
"value": 34745
},
{
"name": "水柏",
"value": 61454
},
{
"name": "茅何禹滕史·廉",
"value": 19139
},
{
"name": "冯俞·岑项",
"value": 30683
},
{
"name": "郑鲁",
"value": 82122
},
{
"name": "茅潘俞魏·葛",
"value": 27017
},
{
"name": "穆孟伏米苏·方蓝康",
"value": 56377
},
{
"name": "花鲍于",
"value": 4683
},
{
"name": "方姚·唐贝茅",
"value": 45645
},
{
"name": "华薛冯",
"value": 36630
},
{
"name": "倪尤·严",
"value": 81488
},
{
"name": "马袁穆",
"value": 84341
},
{
"name": "柏黄",
"value": 13519
},
{
"name": "沈沈·倪李",
"value": 8161
},
{
"name": "朱褚汤",
"value": 87759
},
{
"name": "贝屈",
"value": 9420
},
{
"name": "云苏曹",
"value": 32213
},
{
"name": "邹熊狄杨朱·昌皮元",
"value": 34073
},
{
"name": "魏雷张",
"value": 18707
},
{
"name": "陶薛费皮蓝·贺于娄",
"value": 32449
},
{
"name": "茅袁张·陈",
"value": 14081
},
{
"name": "何柏酆",
"value": 88360
},
{
"name": "米皮·唐何",
"value": 90183
},
{
"name": "纪汤华",
"value": 77364
},
{
"name": "曹严鲁",
"value": 25391
},
{
"name": "倪顾柏",
"value": 37327
},
{
"name": "袁季",
"value": 71086
},
{
"name": "尤毕陶周杜·花安时",
"value": 28985
},
{
"name": "云窦金",
"value": 89919
},
{
"name": "臧费",
"value": 57139
},
{
"name": "孟乐严",
"value": 99559
},
{
"name": "邹季",
"value": 35980
}
]
seriesData = seriesData.map(item => ({...item,selected:false,
label:{
show:false,
}}))
option = {
title: {
text: '同名数量统计',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: params => {
return params.data.name + params.data.value
}
},
legend: {
type: 'scroll',
orient: 'vertical',
scrollDataIndex:5,
animation : false,
right: 10,
top: 20,
bottom: 20,
data: data
},
series: [
{
name: '姓名',
type: 'pie',
radius: ['25%', '45%'],
center: ['50%', '50%'],
data: seriesData,
labelLine:{
show:false
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
autoHover(myChart, option, seriesData.length, 3000);
// var count = 0
// app.timeTicket = setInterval(function() {
// var r = count % data.length;
// console.log(r)
// option.legend.data[r].textStyle.color = '#000';
// option.series[0].data[r].label.show = false;
// option.legend.scrollDataIndex = r
// count++;
// var s = count % data.length;
// console.log(s)
// option.legend.data[s].textStyle.color = '#50DCE6';
// option.series[0].data[s].label.show = true;
// option.legend.scrollDataIndex = s
// myChart.setOption(option, true);
// }, 3000);
/**
* echarts tooltip 自动轮播
* @author liuwei
* @param myChart //初始化echarts的实例
* @param option //指定图表的配置项和数据
* @param num //类目数量(原因：循环时达到最大值后，使其从头开始循环)
* @param time //轮播间隔时长
*/
function autoHover(myChart, option, num, time) {
var defaultData = {
//设置默认值
time: 2000,
num: 50,
};
if (!time) {
time = defaultData.time;
}
if (!num) {
num = defaultData.num;
}
var count = 0;
var timeTicket = null;
timeTicket && clearInterval(timeTicket);
timeTicket = setInterval(function () {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0, //serieIndex的索引值 可以触发多个
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: count,
});
option.legend.data[count].textStyle.color = '#50DCE6'
option.legend.scrollDataIndex = count
myChart.setOption(option, true);
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: count,
});
option.legend.data[count].textStyle.color = '#000';
count++;
if (count >= num) {
count = 0;
}
}, time);
myChart.on('mouseover', function (params) {
clearInterval(timeTicket);
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: params.dataIndex,
});
// option.legend.data[params.dataIndex].textStyle.color = '#50DCE6'
// option.legend.scrollDataIndex = params.dataIndex
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: params.dataIndex,
});
option.legend.data = option.legend.data.map(item => ({...item, textStyle:{color: '#000'}}))
option.legend.data[params.dataIndex].textStyle.color = '#50DCE6'
option.legend.scrollDataIndex = params.dataIndex
myChart.setOption(option, true);
});
myChart.on('mouseout', function (params) {
timeTicket && clearInterval(timeTicket);
option.legend.data[params.dataIndex].textStyle.color = '#000'
timeTicket = setInterval(function () {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0, //serieIndex的索引值 可以触发多个
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: count,
});
option.legend.data[count].textStyle.color = '#50DCE6'
option.legend.scrollDataIndex = count
myChart.setOption(option, true);
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: count,
});
option.legend.data[count].textStyle.color = '#000';
count++;
if (count >= defaultData.num) {
count = 0;
}
}, defaultData.time);
});
}