echarts橫向柱狀圖詳細解析

 <div id="main"></div>

js部分

<script>
移入echarts
let echarts = require('echarts/lib/echarts')
export default {
  mounted () {
     this.mein()
  },

  // 繪製柱狀圖
  methods: {
    mein () {
    var myChart = this.$echarts.init(document.getElementById('main'))
   var option = {
        // 設置標題內容樣式
        title: {
          text: '2019年全省各行規上企業數（家)',
          標題位置
          x: 'center',
           標題字體樣式
          textStyle: {
            fontSize: 12,
            textAlign: 'center',
            color: '#668ff2'
          }
        },
        // 設置柱狀圖子在頁面的位置
        grid: {
          left: '5%',
          right: '10%',
          bottom: '5%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
        // 影藏x軸
          show: false
        },
​        yAxis: [{
​          type: 'category',
​          show: true,
​          boundaryGap: true,
​          axisTick: {// 橫軸方向刻度
​            length: 0
​          },
​          splitLine: { // 網格線
​            show: false
​          },
​          axisLine: {// 豎軸方向刻度
​            show: false
​          },
​          axisLabel: {
​            interval: 0,
​            fontSize: 15
​          },
​           y：軸信息
​          data: ['煤炭開採\n和洗選業', '非金屬\n礦物製品業', '電力,熱力\n生產力和供應業', '化學原料和\n化學制品製造業', '黑色金屬\n冶煉和壓延加工業']

​        }],
​        series: [
​          {
​            type: 'bar',
​            stack: '總量',
​            barGap: '50%',
​            label: {
​              normal: {
​                show: false,
​                position: 'right',
​                textStyle: {
​                  color: '#666666' // color of value
​                }
​              }
​            },
​            itemStyle: {
​              normal: {
​                // 柱狀圖漸變效果
​                color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
​                  [
​                    { offset: 0, color: '#6D8FF7' },
​                    { offset: 1, color: '#80D1F3' }
​                  ]
​               )
​              }
​            },
​            data: [320, 302, 301, 255, 390, 330, 320, 444]
​          },
​          {
​            type: 'bar',
​            stack: '總量',
             barGap: '50%',
​            label: {
​              normal: {
​                show: false,
​                position: 'right',
​                textStyle: {
​                  color: '#666666' // color of value
​                }
​              }
​            },
​            itemStyle: {
​              normal: {
​                color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
​                  [
​                    { offset: 0, color: '#f58c66' },

​                    { offset: 1, color: '#f4d295' }
​                  ]
​                )
​              }
​            },
​            data: [120, 132, 101, 134, 90, 230, 210, 555]
​          },
​          {
​            type: 'bar',
​            stack: '總量',
​            label: {
​              normal: {
​                show: false,
​                position: 'right',
​                textStyle: {
​                  color: '#666666' // color of value
​                }
​              }
​            },
​            itemStyle: {
​              normal: {
​                color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
​                  [
​                    { offset: 0, color: '#c362d1' },

​                    { offset: 1, color: '#cdaad2' }
​                  ]
​                )
​              }
​            },
​            data: [220, 182, 191, 234, 90, 330, 310, 66]
​          }
​        ]
​      }
​      myChart.setOption(option)
​    }
  }
}
</script>

 data: [220, 182, 191, 234, 90, 330, 310, 66]

​ }
​ ]
​ }
​ myChart.setOption(option)
​ }
}
}