echarts点击事件、柱状图设置区间颜色

实现echarts柱状图标记区域，并在单击柱状条时触发点击事件切换标记区域

//html
<div id="main" style="width: 600px;height:400px;"></div>

//js
let _chart = null;
letselectInfo = {};//选择的柱状条信息，可用于信息的获取

window.addEventListener('resize', () => {
    if (_chart) _chart.resize()
})

//自定义数据
let aAxisData = [],
    yAxisData1 = [],
    yAxisData2 = [];
for (var i = 0; i < 15; i++) {
    aAxisData.push({
        id: 'id_' + i,
        value: '测试' + (i + 1) + '组'
    })
    yAxisData1.push(i * 4 + 6);
    yAxisData2.push(i * 2 + 5);
}
this.initCharts('main', aAxisData, yAxisData1, yAxisData2);

//定义方法
function initCharts(_id, aAxisData, yAxisData1, yAxisData2) {
	  if (_chart) _chart.clear();
	  _chart = echarts.init(document.getElementById(_id));
	  const options = {
	      grid: { //位置
	          left: '5%',
	          right: '4%',
	          bottom: '30px',
	          top: '80px',
	          containLabel: true //是否包含坐标值
	      },
	      tooltip: {
	          trigger: 'axis',
	          axisPointer: {
	              type: 'shadow'
	          },
	      },
	      xAxis: [{
	          type: 'category',
	          data: aAxisData,
	          axisLabel: { //坐标轴刻度标签
	              show: true,
	              intervel: 0, //设置成 0 强制显示所有标签
	              rotate: 20, //刻度标签旋转的角度,-90 度到 90 度
	              width: 120, //文本显示宽度
	              height: 20, //文本显示高度
	              overflow: 'truncate', //文字超出宽度是否截断或者换行，配置width时有效.'truncate' 截断,'break' 换行,'breakAll' 换行
	              ellipsis: '...' //在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本
	          },
	          max: (value) => { //小于6个则按照6个来展示，防止只有一两个柱状条时会撑得很宽
	              value.max = value.max < 6 ? 6 : value.max;
	              return value.max;
	          }
	      }],
	      yAxis: [{
	          type: 'value',
	      }],
	      series: [{
	          name: '总数',
	          type: 'bar',
	          data: yAxisData1,
	          itemStyle: { //柱状条颜色
	              color: '#4E89EE'
	          },
	          barGap: 0, //柱状图间隔
	          markArea: { //图表标域，常用于标记图表中某个范围的数据
	              silent: true, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
	              itemStyle: { //该标域的样式
	                  color: 'rgba(78, 137, 238, 0.19)'
	              },
	              data: [ //选择标域位置，我这里选择的是第一个柱状条区间
	                  [{
	                      xAxis: aAxisData[0].value
	                  }, {
	                      xAxis: aAxisData[0].value
	                  }]
	              ]
	          }
	      }, {
	          name: '已接入数',
	          type: 'bar',
	          data: yAxisData2,
	          itemStyle: { //柱状条颜色
	              color: '#bbd5ff'
	          },
	      }]
	  }
	  //将实例属性清空，为了解决图表还未渲染时切换页面，再切回来时图表不渲染问题
	  document.getElementById(_id).setAttribute('_echarts_instance_', '');
	  _chart.setOption(options);
	  this.barChartClick(_chart)
}
//定义点击事件
function barChartClick(chart) {
	//chart.on('click', function(params) {})也可以触发点击事件，但是当柱状条无数据时无法触发
  	chart.getZr().on('click', (params) => {
	      let pointInPixel = [params.offsetX, params.offsetY];
	      // 判断点击的是grid区域内
	      if (chart.containPixel('grid', pointInPixel)) {
	          let pointInGrid = chart.convertFromPixel({
	              seriesIndex: 0
	          }, pointInPixel);
	          let handleIndex = Number(pointInGrid[0]); //索引
	          let op = chart.getOption();
	          // 下面的数据可以根据需要进行获取
	          let dataX = op.xAxis[0].data[handleIndex]; //获取点击x轴的数据
	          let dataY = op.series[0].data[handleIndex]; //获取点击的柱状条的数据
	          selectInfo = dataX;
	          op.series[0].markArea.data = [
	              [{
	                  'xAxis': dataX.value
	              }, {
	                  'xAxis': dataX.value
	              }]
	          ]
	          chart.setOption(op);
	      }
	  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125