echart 柱状图

      initColumnCharts1() {
        const columnChart1 = echarts.init(document.getElementById(‘column-chart1‘))
        const columnOption1 = {
          grid: {
            bottom: ‘35%‘,
            left:‘15%‘
          },
          title: {
            text:‘装机容量(发电类型)‘,
            left: ‘center‘,//标题位置
            textStyle: {//主标题的属性
              color: ‘#C28D21‘,//颜色
              fontSize: 12,//大小
              fontFamily: ‘monospace‘,//字体
            },
          },
          xAxis: {
            type: ‘category‘,
            data: [‘火电‘, ‘风电‘, ‘水电‘, ‘太阳能‘, ‘其他‘],
            axisLabel: {
              clickable: true,
              interval: 0,
              rotate: 0
            }
          },
          yAxis: [{
            name: ‘装机容量（瓦兆）‘,
            type: ‘value‘,
            nameTextStyle: {
              fontSize: 12
            },
            splitLine: {
              lineStyle: {
                type: ‘solid‘
              }
            },
            axisTick:{//隐藏y轴的 刻度
              show:false
            },
            axisLine:{//隐藏y轴
              show:false,
            },
            position: ‘left‘,//位置靠左
            nameLocation: ‘middle‘,//位置居中
            nameGap: 25,//与y轴距离
            nameRotate: 90//角度
      }],
          series: [{
            barWidth: 30,
            data: [
              {
                value: this.colData.countA,
                itemStyle: {
                  normal: { color: ‘#D21D2E‘ }
                }
              },
              {
                value: this.colData.countB,
                itemStyle: {
                  normal: { color: ‘#FCCE1A‘ }
                }
              },
              {
                value: this.colData.countC,
                itemStyle: {
                  normal: { color: ‘#009850‘ }
                }
              },
              {
                value: this.colData.countD,
                itemStyle: {
                  normal: { color: ‘#0872B2‘ }
                }
              },
              {
                value: this.colData.countE,
                itemStyle: {
                  normal: { color: ‘#B884B9‘ }
                }
              }
            ],
            type: ‘bar‘,
            itemStyle: { // 上方显示数值
              normal: {
                label: {
                  show: true, // 开启显示
                  position: ‘top‘, // 在上方显示
                  textStyle: { // 数值样式
                    fontSize: 12
                  }
                }
              }
            }
          }]
        }
        columnChart1.setOption(columnOption1)
        /*
         //x 轴名称
         const that = this
        columnChart1.off(‘click‘)// 防止冒泡
        columnChart1.on(‘click‘, function(params) {
          if (!that.queryParam.data.marketId) { // 如果marketid是空那么marketidlist也为空
            that.queryParam.data.marketIdList = []
          }
          if (params.name === ‘一般信息变更‘) {
            that.queryParam.data.membersType = ‘10‘
            that.queryParam.data.modificationType = ‘08‘
            that.pageQuery(that.queryParam)// 发电
          } else if (params.name === ‘机组一般信息变更‘) {
            that.queryParam.data.membersType = ‘10‘
            that.queryParam.data.modificationType = ‘04‘
            that.pageQuery(that.queryParam)// 发电
          } else if (params.name === ‘机组新增‘) {
            that.queryParam.data.membersType = ‘10‘
            that.queryParam.data.modificationType = ‘05‘
            that.pageQuery(that.queryParam)// 发电
          } else if (params.name === ‘机组转让‘) {
            that.queryParam.data.membersType = ‘10‘
            that.queryParam.data.modificationType = ‘06‘
            that.pageQuery(that.queryParam)// 发电
          } else if (params.name === ‘机组注销‘) {
            that.queryParam.data.membersType = ‘10‘
            that.queryParam.data.modificationType = ‘07‘
            that.pageQuery(that.queryParam)// 发电
          }
        })
        */
        //  当窗口或者大小发生改变时执行resize，重新绘制图表
        window.onresize = columnChart1.resize
      },