调柱状图

<template>
  <chart style="width:100%; height:100px;"
         :options="orgOptions"
         :auto-resize="true"></chart>
</template>

<script>
import echarts from 'echarts'
export default {

  name: 'barChartGDYJ',
  data () {
    return {
      orgOptions: {}
    }
  },
  methods: {
    getInfoSucc () {
      this.orgOptions = {
        legend: { // 图例说明
          itemWidth: 18,
          itemHeight: 10, // 小图标高度
          textStyle: {
            color: '#85a6db'
          }
        },
        tooltip: {},
        grid: {
          left: '0%',
          right: '5%',
          top: '30%',
          bottom: '10%',
          containLabel: true
        },
        dataset: {
          source: [
            ['product', '红色预警', '黄色预警', '蓝色预警'],
            ['食品安全(11)', 5, 1, 5],
            ['消防安全(6)', 2, 3, 1],
            ['综合治理(6)', 4, 1, 1]
          ]
        },
        xAxis: { // x轴
          type: 'category',
          axisLine: { // 设置坐标轴和坐标轴字体颜色
            lineStyle: {
              color: '#85a6db',
              width: 0
            }
          }
        },
        yAxis: { // y轴
          min: 0, // 刻度最小值
          max: 6, // 刻度最大值
          splitNumber: 2, // 刻度间隔
          interval: 3, // 横线数
          axisLine: { // 坐标抽
            lineStyle: { // 设置坐标轴和坐标轴字体颜色
              color: '#5767a0',
              width: 0
            }
          },
          splitLine: { // 网格线
            show: true,
            lineStyle: {
              color: '#5767a0',
              width: 1
            }
          }

        },
        series: [
          {
            type: 'bar',
            barWidth: 12, // bar的宽度
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient( // bar设置渐变色
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#8b1909' },
                    { offset: 1, color: '#691004' }
                  ]
                )

              }
            }
          },
          {
            type: 'bar',
            barWidth: 12, // bar的宽度
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient( // bar设置渐变色
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#c1571a' },
                    { offset: 1, color: '#a44813' }
                  ]
                )

              }
            }
          },
          {
            type: 'bar',
            barWidth: 12, // bar的宽度
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient( // bar设置渐变色
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#195cad' },
                    { offset: 1, color: '#09356b' }
                  ]
                )

              }
            }
          }
        ]

      }
    }
  },

  mounted () {
    this.getInfoSucc()
  }
}
</script>

<style scoped>
</style>