在vue中使用Echart图表。小白篇

最近发现公司使用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;

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

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

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();
      });
    },

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

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

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

 myChart.setOption(option, true);

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

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

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

<div ref="WaterAndFlow_charts" class="line-charts"></div>
let myChart = this.$echarts.init(
         this.$refs.WaterAndFlow_charts
      );

其他不变
放上以上代码最终的绘图效果。
在这里插入图片描述

  • 4
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值