echarts在vue2中如何使用

1、npm install echarts --save

2、在main.js中引入echarts 

import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;

3、在你要用到的vue页面 

<template>
  <div class="box">
    <div id="myChart" :style="{ width: '800px', height: '400px' }"></div>
  </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      msg: "fafa",
    };
  },
  mounted() {
    this.drawLine();
    console.log(this.$echarts);
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.box {
  margin-top: 50px;
}
</style>

注意：若想直接用官网例子，就直接把上边 myChart.setOption里内容替换官网的即可