echart的关系图高亮_echart中饼状图的高亮显示。

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,状图

来源： https://www.cnblogs.com/toughy/p/10700844.html