v-chart柱状图点击改变颜色

完整代码

<template>
  <ve-histogram ref="chart_histogram"
                height="380px"
                style="margin-top:50px"
                :width='chartWidth'
                :data="chartData"
                :settings="setting"
                :events="chartSEvents"
                :extend="extend" />
</template>
<script>
export default {
  data() {
    const that = this
    this.setting = {
      // 别称
      labelMap: {
        'name': 'x轴名字',
        'amount': '金额(万元)',
      },
      top: 50
    },
      this.extend = {
        // 不显示图例
        legend: {
          show: false,
          bottom: '10'
        },
        tooltip: {
          position: [10, 320]
        },
        series: {
          itemStyle: {
            //通常情况下：
            normal: {
              //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              color: function(params) {
                  var colorList = []; 
                  //判断点击的柱状图是否是点击当前元素   并设置相应的颜色
                  if(params.name===that.selectName){
                    colorList[params.dataIndex] = "#CA41CA"//点击时改变当前柱子的颜色
                  }else{
                   colorList[params.dataIndex] = "#cc99cc"//默认时候的颜色
                  }
                  return colorList[params.dataIndex];
              }
            }
          }
        },
        xAxis: {
          // 坐标轴每项的文字
          axisLabel: {
            interval: 0,
            formatter: (v) => {
              let txtArry = v.split('');
              let rs = "";
              for (var i = 0; i < txtArry.length; i++) {
                rs += txtArry[i] + "\n";
              }
              return rs
            },
            textStyle: {
              color: "#666666",//这里是改变字体颜色
              fontSize: 14,//字体大小
            }
          },
        },
        yAxis: {
          type: 'value',
          name: '金额（万元）',
          position: 'left',
          color: "#666666",
          fontSize: 14,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#666666'
            }
          },
          axisLabel: {
            color: "#666666",//这里是改变字体颜色
            fontSize: 14,//字体大小
            formatter: '{value}'
          }
        }

      }
    // 点击事件
    this.chartSEvents = {
      click: function (params) {
        setTimeout(() => {
          //重新绘制柱状图
          that.drawRing()
        }, 100)
        //点击时候保存点击的数的名字
        that.selectName = params.name
        // console.log(params.name, '柱状图点击事件')
      }
    }
    return {
      selectName: '',
      chartWidth: 'auto',
      chartData:[
	      {
            amount: 80,
            name: "名字1"
	      },{
            amount: 100,
            name: "名字2"
	      },{
            amount: 10,
            name: "名字3"
	      },{
            amount: 100,
            name: "名字4"
	      },{
            amount: 10,
            name: "名字5"
	      },{
            amount: 690,
            corpName: "名字6"
	      },{
            amount: 190,
            name: "名字7"
	      },{
            amount: 230,
            name: "名字8"
	      }
      ]
    }
  },
  created() {
    const clientWidth = document.documentElement.clientWidth
    if (clientWidth < 990) {
      this.chartWidth = document.documentElement.clientWidth - 20 + 'px'
    } else {
      this.chartWidth = 'auto'
    }
  },
  methods: {
    // 绘制柱状图
    drawRing() {
    //柱状图重绘
      this.$refs.chart_histogram.echarts.resize()
    }
  }
}
</script>

展示效果