thoth-frontend-test/src/components/chart/index.vue

<template>
  <div :id="chartId" style="width: 100%;height: 160px" />
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'Hello',
  props: {
    chartId: {
      type: String,
      default: 'myChart'
    },
    option: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  watch: {
    option(newValue, oldValue) {
      this.drawLine()
    }
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById(this.chartId))
      // 绘制图表
      myChart.setOption(this.option)
    }
  }
}
</script>