在vue中使用Echart图表。小白篇_vue-echarts是基于canvas吗

最近发现公司使用echart绘制图表特别多，作为小白的我一开始并不会，后来通过学习大佬的代码，渐渐学会了基本的使用，在这里仅向新手小白分享一下，作为入门。大佬勿喷，有错误的地方还请指正。废话不多说直接开始上代码。
1.首先我们要知道ehcart是基于canvas画布的。至于没有canvas基础的，可以先上网查查他是干啥的，简单来说就是HTML中的一种绘图工具。至于echart能绘什么图，可以直接百度echart去官网查看，我常用的就是绘折线图，柱状图，饼状图等等。
2.首先在vue项目中引入echart。在终端中运行 npm install echarts --save 在main.js加入代码引入echarts，我这里是将其挂载在vue的原型上面，当然你也可以按需引入。

import echarts from "echarts";
Vue.prototype.$echarts = echarts;
1
2

3.在你需要使用到echart的地方准备一个盒子。并给一个id方便我们后续操作这个DOM节点，这里推荐使用另一种方法即vue的ref属性来操作DOM节点，使用方法跟id大同小异。

<div id="WaterAndFlow_charts" class="line-charts"></div>
1

4.写一个函数来操作DOM节点。

playCharts() {
      let option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["水位", "流量"],
          icon: "rect",
          itemWidth: 20, // 设置宽度
          itemHeight: 12, // 设置高度
          right: "3%",
          top: "5%",
          textStyle: { color: "white" }
        },
        grid: {
          left: "4%",
          right: "4%",
          bottom: "10%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["2-3", "2-4", "2-5", "2-6", "2-7", "2-8", "2-9"],
          axisLine: {
            lineStyle: {
              color: "white"
            }
          }
        },
        yAxis: [
          {
            name: "m³/s",
            type: "value",
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "white"
              }
            }
          },
          {
            type: "value",
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "white"
              }
            }
          }
        ],
        dataZoom: [
          {
            type: "slider",
            show: true,
            height: 15,
            bottom: 5,
            start: 10,
            end: 90 //初始化滚动条
          }
        ],
        series: [
          {
            name: "水位",
            type: "line",
            stack: "总量",
            color: ["#FF7F0B"],
            yAxisIndex: 1,
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "流量",
            type: "line",
            stack: "总量",
            color: ["#0BCF95"],
            yAxisIndex: 0,
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      };
      let myChart = this.$echarts.init(
        document.getElementById("WaterAndFlow_charts")
      );
      // 绘制图表
      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

这段代码有点长，中间的option大家都可以先不看，这是配置echart图表的一些参数，我们的目的是交会小白如何使用echart，

let myChart = this.$echarts.init(
        document.getElementById("WaterAndFlow_charts")
      );
1
2
3

这两行代码，获取到我们为echart准备的DOM节点，并进行初始化，

 myChart.setOption(option, true);
1

在这里开始绘制图表，option就是我们绘图需要传入的参数，以及一些配置项，例如我们需要划一个折线图，那我们就至少就需要传入X,Y轴的坐标数组。我们利用echart绘图，主要的关注部分也就是option部分，这里网上的讲解很多，大家可以根据需求上网查询相关资料。

window.addEventListener("resize", () => {
        myChart.resize();
      });
1
2
3

这一部分代码不是绘制echart图必须的，但是我认为非常重要，添加事件监听，当页面尺寸变化时，例如缩放，重新去调整echart图的尺寸比例。
再讲一下如果使用ref属性来操作DOM节点，应该怎么修改。

<div ref="WaterAndFlow_charts" class="line-charts"></div>
1

let myChart = this.$echarts.init(
         this.$refs.WaterAndFlow_charts
      );
1
2
3

其他不变
放上以上代码最终的绘图效果。