项目中常用echarts属性集合——柱状图

 let myChart = this.$echarts.init(document.getElementById('echartsVal'))
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            let arr = params[2].value.split(',')
            for (let i in arr) {
              str += arr[i] + '<br/>'
            }
            return str
          },
        },
         grid: {
          left: '3%',
          right: '4%',
          bottom: '14%', // 调整 legend 和图表的间距
          containLabel: true,
        },
        legend: {//图例
          textStyle: {
            color: '#000',
          },
          x: 'right', // 可设定图例在左、右、居中
          y: 'bottom',
          data: ['测试1', '测试2'], // 菜单数据
          selectedMode:false,//图例不可点击
                    },

        xAxis: [
          {
            type: 'category',
            axisLine: {   // 设置轴线的属性
              show: true,
              // x轴线样式
              lineStyle: {
                color: '#17273B',
                width: 1,
                type: 'solid',
              },
            },
            // x轴字体设置
            axisLabel: {
              show: true,
              fontSize: 12,
              color: '#000',
              interval: 0,
              rotate: 40,
            },
            data: this.areaName,
          },
        ],
        yAxis: [
          {
            type: 'value',
            minInterval: 1,//y轴数据最小间距为1
            // y轴线设置不显示
            axisLine: {
              show: true,
              color: '#d9d9d9',
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#a16f6f',
              },
            },
            // 与x轴平行的线样式
            splitLine: {
              show: true,
              lineStyle: {
                color: '#e1e1e1',
                width: 2,
                type: 'dotted',
              },
            },
            name: '台',//y轴最上方的单位
            nameTextStyle: {//台的样式
              color: '#a16f6f',
              fontSize: 12,
            },
          },
        ],
        series: [
          {
            name: '测试1',
            type: 'bar',
            barWidth: 8,
            itemStyle: {
              color: '#178de8',
            },
            data: this.data1,
            label: { //柱体上显示数值
                    show: true,//开启显示
                    position: 'top',//在上方显示 inside在里面显示
                    textStyle: {//数值样式
                        fontSize: '7px',
                        color: '#666'
                    },
                    formatter: '{c}',
                }
          },
          {
            name: '测试2',
            type: 'bar',
            // 柱子宽度
            barWidth: 8,
            // 柱状图样式
            itemStyle: {
              color: '#f8762f',
            },
            data: this.data2,
          },
        ],
      })