wt-biz-bigdata/src/views/home/components/chart4.vue

<template>
  <div>
    <charts
      style="margin-top: -40px"
      id="bizchart4"
      height="230px"
      width="460px"
      :option="option"
    />
  </div>
</template>

<script lang="js">
import charts from '../../../components/echarts/index.vue'
import * as echarts from "echarts";

export default {
  components: {charts},
  data() {
    return {
      option: {
        dataset: {
          dimensions: ['product', '2016', '2017'],
          source: [
            {product: '1', 2016: 85.8, 2017: 93.7},
            {product: '2', 2016: 73.4, 2017: 55.1},
            {product: '3', 2016: 65.2, 2017: 82.5},
            {product: '4', 2016: 53.9, 2017: 39.1},
            {product: '5', 2016: 53.9, 2017: 39.1}
          ]
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: "#a4a2a2",
            }
          }
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "#a4a2a2",
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color:'rgba(128,126,126,0.25)'
            },
          },
        },
        label: {
          show: true,
          position: 'top',
        },
        textStyle: {
          color:'rgba(245,126,31,0.74)'
        },
        series: [
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 1,
                  color: 'rgba(54,131,122,0.84)'
                }, {
                  offset: 0,
                  color: 'rgba(15,227,202,0.54)'
                }]),
              }
            },
          }, {
            type: 'bar',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 1,
                  color: 'rgba(70,52,38,0.84)'
                }, {
                  offset: 0,
                  color: 'rgba(245,126,31,0.54)'
                }]),
              }
            },
          },
        ]
      }
    }
  },
  created() {
    this.timingAcquisition()
  },
  methods: {
    timingAcquisition() {
      setInterval(() => {

      }, 10000)
    },

  }
}
</script>