echart使用

/***************** vue *******************/

<template>
  <div :id="chartId"  :style="gaugeStyle">
  </div>
</template>

<script>
import echarts from '../../../js/echarts/index'
import util from '../../../js/common/util'
export default {
  name: 'UsagePie',
  data () {
    return {
      myChart: {}
    }
  },
  props: {
    width: {
      type: Number,
      default () {
        return 100
      }
    },
    height: {
      type: Number,
      default () {
        return 100
      }
    }
  },
  computed: {
    chartId () {
      return 'myChartPie' + util.getRandomNumber(1, 1000)
    },
    gaugeStyle () {
      return {width: this.width + 'px', height: this.height + 'px'}
    }
  },
  methods: {
    // 设置echart数据
    setPieOption (option) {
      this.myChart.setOption(option)
    }
  },
  mounted () {
    // 初始化echart结构
    this.myChart = echarts.init(document.getElementById(this.chartId))
  }
}
</script>

<style scoped>

</style>

/***************** echart index *******************/

// echarts官网： https://echarts.apache.org/examples/zh/index.html#chart-type-lines

import * as echarts from 'echarts/core'

// gauge图
import {GaugeChart, PieChart} from 'echarts/charts'
import {CanvasRenderer} from 'echarts/renderers'

// 引入提示框和title组件，图例
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'

echarts.use([
  GaugeChart, CanvasRenderer, TitleComponent, ToolboxComponent, TooltipComponent, LegendComponent, PieChart
])

export default echarts