1
2
3
4
5
6
7
8
9
10 #main{
11 width:50vw;height:60vh;margin-left:2vw
12 }
13
14
15
16
17
18
19
20 // 饼状图插件的部分内容
21
22 var chart = echarts.init(document.getElementById('main'));
23 var optionbar = {
24 color:['#df6c33','#018dfe'],//饼状图每部分的颜色
25 tooltip: {
26 trigger: 'item',
27 // formatter: "{a}
{b}: {c} ({d}%)",
28 formatter: "{d}%",//鼠标滑过时候的显示
29 // show:false,
30 },
31 series: [{
32 // name: '客户',
33 type: 'pie',
34 radius: ['35%', '50%'],//控制饼状图的大小
35 center: ['50%', '50%'],//控制饼状图所在的位置
36 avoidLabelOverlap: true,
37
38 label: {
39 normal: {
40 formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比
41 },
42 emphasis: {
43 show: true,
44 textStyle: {
45 fontSize: '10',//字体大小
46 // fontWeight: 'bold'
47 }
48 }
49 },
50 labelLine: {
51 normal: {
52 show: true
53 }
54 },
55 data: [20,96]//后台请求到的数据直接复制即可
56 }]
57 };
58
59
60 chart.setOption(optionbar)
61 //设置默认选中高亮部分
62 chart.dispatchAction({
63 type: 'highlight',
64 seriesIndex: 0,
65 dataIndex: 0
66 });
67 chart.on('mouseover', function(e) {
68 //当检测到鼠标悬停事件，取消默认选中高亮
69 chart.dispatchAction({
70 type: 'downplay',
71 seriesIndex: 1,
72 dataIndex: 0
73 });
74 //高亮显示悬停的那块
75 chart.dispatchAction({
76 type: 'highlight',
77 seriesIndex: 1,
78 dataIndex: e.dataIndex
79 });
80 });
81 //检测鼠标移出后显示之前默认高亮的那块
82 chart.on('mouseout', function(e) {
83 chart.dispatchAction({
84 type: 'highlight',
85 seriesIndex: 0,
86 dataIndex: 0
87 }); });
88
89
90
91
92
93
94
95
96
标签：高亮,echart,chart,dispatchAction,dataIndex,中饼,type,状图
来源： /toughy/p/10700844.html
