vue中怎么引入echarts

引入命令：

npm install echarts --save

全局引入：

在main.js中写入：

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

在其他页面用到echarts时，需要先有一个HTML标签：(id不可缺少)

 <div id="monthorder" style="width:100%;height:300px"></div>

接下来echart的应用方式为：

var myechart = this.$echarts.init(document.getElementById("monthorder"));

按需引入：

在需要用到的页面引入，以饼状图为例：

//引入echart
var echarts = require("echarts/lib/echarts");
//引入饼状图
require("echarts/lib/chart/pie");
//引入title等等
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
require("echarts/lib/component/legendScroll");

然后就是按照网上一般的写法写就行，

我参照了：https://echarts.baidu.com/examples/editor.html?c=pie-legend

 

 

下面贴一部分我写的：

<template>
  <div class="indexs">
          <div id="monthorder" style="width:100%;height:300px"></div>
  </div>
</template>
<script>
var echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/pie");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
export default {
  name: "indexss",
  data() {
    return {
      monthlist: {
        monthdata: [
          "未付款的订单",
          "待确认的订单",
          "待发货的订单",
          "已发货的订单",
          "已完成的订单",
          "取消的订单"
        ],
        time: "2018.01.01-2019.09.01",
        precent: [0, 10, 12, 15, 30, 1],
        total: 88
      }
    };
  },
  created() {
    this.$nextTick(function() {
      this.montheahcrt();
    });
  },
  methods: {
    montheahcrt() {
      var that = this;
      var monthseries=that.monthseries();
      var myechart = echarts.init(document.getElementById("monthorder"));
      myechart.setOption({
        title: { subtext: that.monthlist.time,x:'center' },
        tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)" },
      
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 0,
          top: 0,
          bottom: 20,
          data:monthseries.legendData,
          selected:monthseries.selected
        },
        series: [
          {
            name:'',
            type: "pie",
            radius: "50%",
            center: ["60%", "50%"],
            data:monthseries.seriesData
          }
        ]
      });
    },
    monthseries() {
      var data = this.monthlist;
      var legendData = [];
      var seriesData = [];
      var selected = {};
      for (var i = 0; i < data.monthdata.length; i++) {
        seriesData.push({
          name: data.monthdata[i],
          value: data.precent[i]
        });
        legendData.push(data.monthdata[i]);
        selected[data.monthdata[i]] = true;
      }
      return {
        seriesData,
        selected,
        legendData
      };
    }
  }
};
</script>
<style scoped>
.indexs {
  width: 100%;
}
</style>