Echart 柱状图模板

好久不写Echart图，配置基本上会忘记，这里记录一个柱状图的模板留着参考。这是个组件。
效果：

代码：

<template>
  <div class="page">
    <div ref="mychart" style="height:500px;width:100%;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      option: {
        tooltip: {
          trigger: 'axis', // 触发器，主要用于柱状图
          axisPointer: { // 移入时 指示坐标的归属
            type: 'shadow' // 阴影指示器
          }
        },
        title: {
          text: 'ECharts 入门示例',
          textStyle: {
            color: '#ffffff'
          },
          textAlign: 'center',//其实长度就是文字的长度
          x: 'center',//确定标题的位置
          y: 'top'

        },
        color: function (params) {
          let colorList = [
            '#19d4ae', '#5ab1ef', '#fa6e86',
            '#ffb980', '#0067a6', '#c4b4e4',
            '#d87a80', '#9cbbff', '#d9d0c7',
            '#87a997', '#d49ea2', '#5b4947',
            '#7ba3a8'
          ]
          return colorList[params.dataIndex % colorList.length]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // 调整x轴的lable
            textStyle: {
              fontSize: 12, // 让字体变大
              color: '#fff'
            },
            interval: 0
          },
          axisLine: {
            lineStyle: {
              color: '#aaa'
            }
          },
          data: ['人防部门', '指挥机构', '人防工程', '疏散场所和其他基地', '人防警报器', '群众防空组织', '重要经济目标', '政企单位', '社会资源', '危险源']
        },
        yAxis: {
          type: 'value',
          name: '数量',
          axisLabel: { // 调整x轴的lable
            textStyle: {
              fontSize: 12, // 让字体变大
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#aaa'
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            data: [2, 3, 4, 3, 1, 2, 3, 4, 1, 1] //当只有一个轴是category的时候，这里可以直接写值
          }
        ]
      }
    }
  },
  mounted () {
    this.chartInit()
  },
  methods: {
    chartInit () {
      console.log(this.$refs.mychart)
      // this.option.data = this.
      this.myChart = echarts.init(this.$refs.mychart)
      this.myChart.setOption(this.option)
    }
  }
}
</script>

<style scoped lang="stylus">
.page
  width 100%
 
</style>