echarts主题自定义不成功 about vue-echarts-v3 HOT 20 CLOSED

import IEcharts from 'vue-echarts-v3/src/full.vue'
import 'echarts/theme/xtheme.js'

<IEcharts
  theme="xtheme"
  :option="bar"
  :resizable="true"
></IEcharts>

import IEcharts from 'vue-echarts-v3/src/full.vue';
import 'echarts/theme/macarons.js';

<IECharts
  :option="option"
  theme="macarons"
/>

<template>
  <div class="echarts">
    <IEcharts
      :option="line"
      @ready="onReady"
      theme="macarons"
    />
  </div>
</template>

<script>
  import IEcharts from 'vue-echarts-v3/src/full.vue'
  import 'echarts/theme/macarons.js'

  export default {
    name: 'view',
    components: {
      IEcharts
    },
    props: {
    },
    data () {
      const that = this
      return {
        data: [],
        timer: null,
        now: +new Date(1997, 9, 3),
        oneDay: 24 * 3600 * 1000,
        value: Math.random() * 1000,
        line: {
          title: {
            text: '动态数据 + 时间坐标轴'
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              params = params[0]
              var date = new Date(params.name)
              return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1]
            },
            axisPointer: {
              animation: false
            }
          },
          xAxis: {
            type: 'time',
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
              show: false
            }
          },
          series: [{
            name: '模拟数据',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: that.data
          }]
        }
      }
    },
    methods: {
      onReady (instance) {
        const that = this
        that.chart = instance
      },
      randomData () {
        const that = this
        that.now = new Date(+that.now + that.oneDay)
        that.value = that.value + Math.random() * 21 - 10
        return {
          name: that.now.toString(),
          value: [
            [that.now.getFullYear(), that.now.getMonth() + 1, that.now.getDate()].join('/'),
            Math.round(that.value)
          ]
        }
      }
    },
    beforeMount () {
      const that = this
      for (var i = 0; i < 1000; i++) {
        that.data.push(that.randomData())
      }
    },
    mounted () {
      const that = this
      if (that.timer) {
        clearInterval(that.timer)
        that.timer = null
      }
      that.timer = setInterval(function () {
        for (var i = 0; i < 5; i++) {
          that.data.shift()
          that.data.push(that.randomData())
        }

        that.chart && that.chart.setOption({
          series: [{
            data: that.data
          }]
        })
      }, 1000)
    },
    beforeDestroy () {
      const that = this
      if (that.timer) {
        clearInterval(that.timer)
        that.timer = null
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .echarts {
    width: 400px;
    height: 400px;
  }
</style>