var valueData = [
{value: 33,name: '診所'},
{value: 29,name: '汽車服務相關'},
{value: 27, name: '洗衣店'},
{value: 26,name: '中介機構'},
{value: 22,name: '汽車維修'}
];
var nameData = ['診所', '汽車服務相關', '洗衣店', '中介機構', '汽車維修'];
var colorData = ['#A769EB', '#f69846', '#f6d54a', '#45dbf7', '#5AF6DE', '#89F6DC'];
let Option2 = {
backgroundColor: 'rgba(0,0,0,0)',
tooltip: {
trigger: 'item',
formatter: "{b} : {d}% <br/> {c}"
},
legend: {
// orient: 'vertical',
icon: 'circle',
bottom: 20,
x: 'center',
y: 'top',
data: nameData,
textStyle: {
color: '#fff'
}
//data: ['診所', '汽車服務相關', '洗衣店', '中介機構', '汽車維修', '火車站', '人流指數', '日式簡餐/快餐', 'ATM', '超市']
},
series: [{
type: 'pie',
// radius: ['20%', '40%'],
center: ['50%', '50%'],
left:70,
right:70,
color: colorData,
data: valueData,
labelLine: {
normal: {
show: true,
length: 20,
length2: 20,
lineStyle: {
color: '#fff',
width: 2
}
}
},
label: {
normal: {
formatter: '{c|{b}}\n{a|{d}}'+ '%',
rich: {
b: {
fontSize: 12,
color: '#12EABE',
align: 'left',
padding: 4
},
d: {
fontSize: 12,
align: 'left',
padding: 2
},
c: {
color: '#fff',
fontSize: 12,
align: 'left',
padding: 2
}
}
}
}
}]
}
var dom1 = document.getElementById("Box2");
var myChart1 = echarts.init(dom1);
let number = 0 //聲明一個變量稍后接扇區的dataIndex
myChart1.on('click', function(param) { //添加點擊事件
console.log(param );
myChart1.dispatchAction({ type: 'highlight', dataIndex: param.dataIndex }); //激活點擊區域高亮
if (param.dataIndex !== number) { // 當鼠標點擊的時候 消除上一個扇區的高亮
myChart1.dispatchAction({ type: 'downplay', dataIndex: number });
}
number = param.dataIndex //接住當前扇區的dataIndex
});
myChart1.setOption(Option2)
myChart1.dispatchAction({ type: 'highlight', dataIndex: 0 }); // 生成是默認第一條數據高亮