简述vue项目中如何使用ECharts图表

1、安装

npm install echarts

2、项目中

<template>
  <div>
    <div id="main" style="width: 1000px;height:400px;" ref="main"></div>
  </div>
</template>

<script>
import echarts from "echarts";   //导入EChats
import {
    http } from "../../network/index";   //网络请求模块
export default {
   
  mounted() {
   
    this.save();
  },
  methods: {
   
    save() {
   
      var myChart = echarts.init(this.$refs.main);
      //请求数据
      http.getreports().then((res) => {
   
        myChart.setOption({
   
          title: {
   
            text: "用户来源",
          },
          tooltip: {
   
            trigger: "axis",
            axisPointer: {
   
              type: "cross",
              label: {
   
                backgroundColor: "#6a7985",
              },
            },
          },
          toolbox: {
   
            // 工具箱
            show: true,
            feature: {
   
              dataZoom: {
   
                yAxisIndex: "none",
              },
              dataView: {
    readOnly: false },
              magicType: {
    type: ["line", "bar", "stack", "tiled"] },
              restore: {
   },
            },
          },
          ...res.data.data,
        });
      });
    },
  },
};
</script>

<style>
</style>