vue中使用echarts

最新推荐文章于 2024-08-22 09:09:32 发布

fengshaopu

最新推荐文章于 2024-08-22 09:09:32 发布

阅读量387

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/fengshaopu/article/details/118092404

版权

本文介绍了如何在Vue项目中集成ECharts，包括下载ECharts库、局部使用ECharts、导入合并的lodash插件，以及在请求接口后如何结合ECharts进行数据展示的简单示例。

摘要由CSDN通过智能技术生成

一、下载echarts

我们要使用echarts先要去下载echarts

官方文档：[echarts](Documentation - Apache ECharts)

下载echarts的命令是；最好把合并的插件也下载上 lodash 下载4.17.15版本的

>npm install echarts --save 下载最新的版本

>npm install lodash@4.17.15 --save 合并的版本

二、使用echarts

我们可以在局部使用echarts；

在组件中导入echarts，跟合并的插件：

import * as echarts from "echarts";
import _ from "lodash";

三、我们请求完接口后可以直接用_合并

例子：

  var myChart = echarts.init(document.getElementById("main")); 

    this.$axios("reports/type/1", this.myChart).then(res => {  //请求接口
      console.log(res);
      if (res.meta.status == 200) { 
        this.list = res.data.legend.data;
        var result = _.merge(res.data, this.options);