echart histogram

 

 

 

      initColumnCharts1 () {
        const columnChart1 = echarts.init(document.getElementById('column-chart1'))
        const columnOption1 = {
          grid: {
            bottom: '35%',
            left:'15%'
          },
          title: {
            text: 'capacity (power type)' ,
            left: 'Center', // title position 
            textStyle: { // main title attribute 
              Color: '# C28D21', // Colors 
              the fontSize: 12 is, // size of 
              the fontFamily: 'monospace', // font 
            },
          },
          xAxis: {
            type: 'category',
            Data: [ 'thermal power "," wind power "," hydroelectric', 'solar', 'other' ],
            axisLabel: {
              clickable: true,
              interval: 0,
              rotate: 0
            }
          },
          yAxis: [{
            name: 'capacity (mega watt)' ,
            type: 'value',
            nameTextStyle: {
              fontSize: 12
            },
            splitLine: {
              lineStyle: {
                type: 'solid'
              }
            },
            axisTick: { // hide the y-axis scale 
              Show: to false
            },
            axisLine: { // hide the y-axis 
              Show: to false ,
            },
            position: 'left', // positions left 
            nameLocation: 'Middle', // centrally 
            nameGap: 25, // and the y-axis distance 
            nameRotate: 90 // angle 
      }],
          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: { // above values show 
              normal: {
                label: {
                  Show: to true , // enable the display 
                  position: 'Top', // displayed above 
                  textStyle: { // value style 
                    fontSize: 12
                  }
                }
              }
            }
          }]
        }
        columnChart1.setOption(columnOption1)
        /*
         // x-axis names
         const that = this
        columnChart1.off ( 'click') // prevent bubbling
        columnChart1.on('click', function(params) {
          if (! that.queryParam.data.marketId) {// If marketid is empty then marketidlist also empty
            that.queryParam.data.marketIdList = []
          }
          if (params.name === 'general information change') {
            that.queryParam.data.membersType = '10'
            that.queryParam.data.modificationType = '08'
            that.pageQuery (that.queryParam) // power
          } Else if (params.name === 'information changing unit ships') {
            that.queryParam.data.membersType = '10'
            that.queryParam.data.modificationType = '04'
            that.pageQuery (that.queryParam) // power
          } Else if (params.name === 'new unit') {
            that.queryParam.data.membersType = '10'
            that.queryParam.data.modificationType = '05'
            that.pageQuery (that.queryParam) // power
          } Else if (params.name === 'transfer unit') {
            that.queryParam.data.membersType = '10'
            that.queryParam.data.modificationType = '06'
            that.pageQuery (that.queryParam) // power
          } Else if (params.name === 'cancellation unit') {
            that.queryParam.data.membersType = '10'
            that.queryParam.data.modificationType = '07'
            that.pageQuery (that.queryParam) // power
          }
        })
        * / 
        //   perform resize when the window size is changed or re-charting 
        window.onresize = columnChart1.resize
      },