echarts柱状条

功能：进入页面默认最后一个柱条和文字是处于高亮，点击可切换柱条高亮。

参考链接：https://echarts.apache.org/zh/option.html#series-bar.itemStyle.color

**第一步：**从 npm 获取并引用
npm install echarts --save

import * as echarts from "echarts";

Vue.prototype.$echarts = echarts; // 将echarts引入与到vue的原型中，方便使用

**第二步：**基于准备好的dom，初始化echarts实例

 <div id="main" style="width: 330px; height: 400px"></div>
 
var myChart = echarts.init(document.getElementById('main'));

第三步： 绘制图表

  data() {
    return {
      option: [],
      data: ['4709.0', '2000.00', '2900.21', '5023.50', '1823.20', '6407.06'],
      colorList: [
        '#4D92FF',
        '#4D92FF',
        '#4D92FF',
        '#4D92FF',
        '#4D92FF',
        '#1F73F7',
      ],
    }
  },

 onExample() {
      let that = this
      let myChart = this.$echarts.init(document.getElementById('main'))
      let index = 5
      this.option = {
        title: {
          text: '',
        },
        xAxis: {
          data: ['11月', '12月', '1月', '2月', '3月', '4月'],
          axisLine: {
            lineStyle: {
              color: '#1F73F7',
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: '#999999',
            },
          },
        },
        yAxis: {
          show: false, //y轴刻度值不显示
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: this.data,
            label: {
              normal: {
                show: true,
                position: 'top',  
                height: 20,
                formatter: (value) => {
                  // index默认是5，最后一个高亮，在下方点击事件获取index
                  //货币符需要在formatter配置
                  var a = '{a|' + '¥' + value.value + '}'
                  var b = '{b|' + '¥' + value.value + '}'
                  //a是高亮，b是黑色
                  var c = value.dataIndex == index ? a : b
                  return c
                },
                textStyle: {
                  rich: {
                    a: {
                      color: '#1F73F7',
                    },
                    b: {
                      color: '#999999',
                    },
                  },
                },
              },
            },
            itemStyle: {
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function (params) {
                //colorList定义好每个柱条的颜色
                  var colorList = that.colorList
                  return colorList[params.dataIndex]
                },
              },
            },
            barCategoryGap: '90%',
            barWidth: 30,
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(that.option)

      setTimeout(() => {
        myChart.setOption(that.option)
      }, 100)
      
      //点击柱条事件
      myChart.on('click', function (params) {
        index = params.dataIndex
        //循环柱条
        that.colorList.forEach((i, v) => {
          that.colorList[v] = '#4D92FF'
          that.colorList[params.dataIndex] = '#1F73F7' //点击时改变当前柱子的颜色
          myChart.setOption(that.option)
        })
      })
    },