Vue中的echarts图表如何实现loading效果

目录

• echarts图表实现loading效果
• Vue使用echarts图表总结
• 安装echarts依赖
• 创建图表
• 在页面中的使用（在这里我用的局部引入）

echarts图表实现loading效果

main.js 中配置Vue属性ecahrts

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts 

• data() 初始化数据调用数据
• mounted() 周期函数内获取画布节点,并且调用加载loading和图表渲染
• computed计算属性内定义echarts渲染内容以及数据请求

当服务器返回数据 hideLoading()

注意：loading方法要定义在计算属性的get方法中,set可以不做任何定义。这样图表于loading样式在画布上不会冲突

Vue使用echarts图表总结

今天在写后台项目的时候，使用echarts来绘制图表。下面来说说怎么使用echarts。

echarts地址：https://echarts.apache.org/zh/index.html

效果：

代码：

在vue项目中使用echarts图表的步骤：

安装echarts依赖

npm install echarts -S

或者使用淘宝的镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

创建图表

一、全局引入

在main.js中

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

二、局部引入（在需要的页面中引入）

import echarts from "echarts";

在页面中的使用（在这里我用的局部引入）

完整的代码：

解释：

1、需要在页面上给一个挂载点

2、在data里面定义一下

// 需要合并的数据
      options: {
        title: {
          text: "用户来源"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3"
            }
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ]
      }

3、初始化数据

  mounted() {
    this.reports();
  },
  methods: {
    async reports() {
    //获取在页面中挂载的数据
      var myChart = echarts.init(document.getElementById("main"));
      //调用接口（即后台返回的数据）
      const res = await getReports();
      console.log(res);
      //使用lodash来合并数据
      const resultJieg = _.merge(res.result, this.options);
      //   展示数据
      myChart.setOption(resultJieg);
    }
  }

总结一下：

在vue中使用echarts图表，分为二步：

1.在页面中给图表一个挂载的元素。

2.在mounted的函数里初始化数据。

• 通过echarts.init来拿到页面中挂载的节点。
• 调用数据
• 最后通过setOption来展示数据。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。