vue cli3 使用 echarts

1 首先安装：

npm install echarts --save

2 在main.js中导入并挂载上

import echarts from "echarts"
Vue.prototype.$echarts = echarts

3、使用：在app.vue中使用

<template>
  <div id="app">
    <div id="box" style="width: 50%; height: 300px"></div>
  </div>
</template>
<script>
  export default {
    name: 'app',
    methods:{
      // 折线图
      polygonal_chart(){
        let my_echarts = this.$echarts.init(document.getElementById("box"))
        let option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
          }]
        };

        my_echarts.setOption(option)
      }
    },
    mounted(){
      this.polygonal_chart()
    },
  }
</script>

 效果如图：

需要注意的是

<div id="box" style="width: 50%; height: 300px"></div>

一定要有高并且不能是百分比