【Echarts】双x轴实现柱形图背景点击亮起

双x轴实现柱形图背景点击亮起

一切源于UI做了点击Echarts柱形图的点击亮起效果，测试便要求开发完成…

虽然最后没做，毕竟优先上线重要嘛🌚

但是有时间摸鱼的时候我又来研究了，写好之后再遇到类似问题咱就不慌，本CV工程师分分钟完成~

参考文章

一开始试图使用series-bar. backgroundStyle 或者 barGap 完成，但是series-bar. backgroundStyle 和 barWidth 的给定宽度等宽，不行；使用barGap后，柱中心轴会与tooltip的中心轴产生偏移，都弃用了…后来根据参考文章的双X轴逻辑实现的效果~撒花🎉🎉

文中代码也有一个定时器可以模拟点击，放开相关注释即可使用

这里是——随便一个echarts官网示例链接，点击将↓↓↓↓下文代码贴入即可查看

const data = [120, 200, 150, 80, 70, 110, 130]
const lineData = [150, 230, 224, 218, 135, 147, 260]
let currentShow = ''
const max = data.concat(lineData)
	.reduce((pre, cur) => pre > cur ? pre : cur, 0)
const color = [{
	type: 'linear',
	x: 0,
	x2: 0,
	y: 0,
	y2: 1,
	colorStops: [{
			offset: 0,
			color: '#40BDF7',
		},
		{
			offset: 0.5,
			color: '#40BDF7',
		},
		{
			offset: 1,
			color: '#3F82F7',
		},
	],
}, ]
let option1 = {}
function initOption () {
  option1 = {
    tooltip: {
      trigger: "axis",
      formatter: '{b}: {c}',
      backgroundColor: "rgba(13, 118, 93, 0.5)",
      borderColor: "#fff",
      textStyle: { color: "#fff" },
      axisPointer: {
        // type: "none",
        shadowStyle: {
          color: "#0953482b",
        },
      },
      // rich: {
      //   name: {
      //     fontSize: 30
      //   }
      // }
    },
  	color,
  	xAxis: [{
  		type: 'category',
  		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  	}, {
  		type: 'category',
  		show: false,
  		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  	}],
  	yAxis: {
  		type: 'value',
  		max: max
  	},
  	series: [{
  		data: data,
  		barWidth: 20,
  		type: 'bar'
  	},{
  		xAxisIndex: 1,
  		itemStyle: {
  			color: 'rgba(180, 180, 180, 0.2)'
  		},
  		data: data.map((item, index) => {
  		  console.log(currentShow, 'index == currentShow')
  		  return index == currentShow && {
  		    value: max,
  		    itemStyle: {
          	color: {
          		type: 'linear',
          		x: 0,
          		x2: 0,
          		y: 0,
          		y2: 1,
          		colorStops: [{
          				offset: 0,
          				color: 'rgba(64, 247, 176, 0.25)'
          			},
          			{
          				offset: 1,
          				color: 'rgba(17, 34, 64, 0.25)'
          			},
          		],
          	}
          }
  		  }
  		}),
  		barWidth: 60,
  		type: 'bar'
  	}]
  };
  option = option1
}
initOption()
// setInterval(() => {
//   currentShow = Math.ceil(Math.random() * 7);
//   console.log(currentShow, 'currentShow')
//   initOption()
//   option && myChart.setOption(option);
// }, 2000)
myChart.on('click',  function(param) {
  console.log(param, 'param')
  // dataIndex 点击项的index
  currentShow = param.dataIndex
  initOption()
  option && myChart.setOption(option);
});