在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";

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

完整的代码：

<template>
  <div>
    <!-- 面包屑 -->
    <BreadCrumb level1="数据统计" level2="数据报表"></BreadCrumb>
    <!-- 内容 -->
    <el-card style="margin-top:20px;">
      <!-- 为Echarts准备一个Dom -->
      <div id="main" style="width: 750px;height:400px;"></div>
    </el-card>
  </div>
</template>

<script>
import {
      getReports } from "../../http/api";
import echarts from "echarts";
import _ from "lodash";
export default {
     
  data() {
     
    return {
     
      // 需要合并的数据
      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"
          }
        ]
      }
    };
  },
  mounted() {
     
    this.reports();
  },
  methods: {
     
    async reports() {
     
      var myChart = echarts.init(document.getElementById("main"));
      const res = await getReports();
      console.log(res);
      const resultJieg = _.merge(res.result, this.options);
      //   展示数据
      myChart.setOption(resultJieg);
    }
  }
};
</script>

<style></style>

解释：

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

		
      <div id="main" style="width: 750px;height:400px;">div>

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图表，分为二步：

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

• 在mounted的函数里初始化数据。

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