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)
​ }
}
}