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

1、安装

npm install echarts

  
 

  
1
 

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>

  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
 

文章来源: jiangwenxin.blog.csdn.net，作者：前端江太公，版权归原作者所有，如需转载，请联系作者。

原文链接：jiangwenxin.blog.csdn.net/article/details/108592448