vue中使用Echarts

原创已于 2023-02-01 22:18:19 修改 · 235 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts #vue.js #javascript

于 2023-01-28 17:15:05 首次发布

本文介绍如何在Vue项目中安装并使用ECharts库来创建动态图表。文章详细展示了从安装依赖、配置全局变量到具体页面中实现图表的全过程，并通过axios从服务器获取数据进行图表的动态展示。

安装echarts依赖

npm install echarts -S

创建图表

全局引入

main.js

// 引入echarts
import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts

report.vue

<template>
  <div>
    <!-- 卡片 -->
    <el-card>
      <div id="myChart" :style="{ width: '700px', height: '400px' }"></div>
    </el-card>
  </div>
</template>

<script>
// 引入封装好的axios请求
import { httpGetReportList } from "@/http/report_index.js";
// 引入lodash库（需要先安装 npm i -save lodash ）
import _ from "lodash";
export default {
  props: {},
  data() {
    return {
 // 自己的options配置项
      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",
          },
        ],
      },
    };
  },
  methods: {
    async drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 准备数据和配置项
      let { data: res } = await httpGetReportList();
      if (res.meta.status !== 200) {
        this.$message.error("获取图表数据失败");
      }
 //   将后台获取的数据和自己设置的options合并
      const result = _.merge(res.data, this.options);
      //   展示数据   绘制图表
      myChart.setOption(result);
    },
  },
  mounted() {
    this.drawLine();
  },
  components: {},
};
</script>

<style scoped lang="less">
</style>