「后端小伙伴来学前端了」Vue中学会使用Echarts生成各种各样的图表，得学学了，必须要会的基本操作了

宁在春

发布于 2022-10-31 15:38:50

6000

发布于 2022-10-31 15:38:50

文章被收录于专栏：关于Java学习@宁在春

依旧还是学妹给的封面

直接进入主题…在vue中使用个啥，都差不多是一个流程。

引入Echarts

安装

npm install echarts --save

我们写一个Echarts组件，在内进行引入

import * as  echarts from 'echarts'

入门使用

如果之前没有接触过Vue或者Echarts 的小伙伴，了解方式无疑就是Echarts官方文档或各大搜索引擎了。

我的了解方式无疑也是这个，但是我在看官方文档的时候，觉得官方给的那个例子，有点点不符合Vue的风格，不过我先贴出来，实现最简单的入门：

<template>
  <div id="echarts" style="width: 600px; height: 600px"></div>
</template>
<script>
import * as  echarts from 'echarts'
export default {
  mounted() {
    this.createEcharts();
  },
  methods: {
    createEcharts() {
        // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("echarts"));
    // 绘制图表  
    // 最重要的就是理解各个配置的作用吧，这个没啥说的 就算熟能生巧
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
    }
  }
};
</script>

将这个组件，在app组件中进行引入即可，我们来看看初始效果是如何的。

问题

1）从DOM操作改为ref

不知道你们有没有发现问题所在：

官方文档中它是直接对于dom进行操作的document.getElementById("echarts")，这和Vue的理念其实是不一样的。

在vue中我们要做到尽可能减少直接对dom的操作，那么在这里我们可以如何改进勒？？

我们明确一下document.getElementById("echarts")获得的是什么即可了。这里无疑就是获得了节点信息，打印出来可以看到console.log(document.getElementById("echarts"));

那么我们就只要用vue的方式获取到这个节点信息即可，因此可以使用vue中的ref属性来实现。

<div id="echarts" ref="myEcharts" style="width: 600px; height: 600px"></div>

console.log(this.$refs.myEcharts);

我们输出来看一下好吧

和我们之前获取到的是一模一样的哈。

为了更符合Vue中的方式，我们再将这个案例改的更加灵活些：

<template>
  <div ref="myEcharts" style="width: 600px; height: 600px"></div>
</template>
<script>
import * as  echarts from 'echarts'
  export default {
        data() {
            return {
                myEcharts: null,
                option:{
                    title: { 
                        text: '普通图表'
                    },
                    tooltip: {},
                    xAxis: {
                        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                }
            }
        },
        methods: {     
            initChart() {
                this.myEcharts = echarts.init(this.$refs.myEcharts);
                this.myEcharts.setOption(this.option);
            }
        },
        mounted () {
            this.initChart()
        }
    }
</script>

这样子才像vue中的写法哈。