Vue中使用Echarts（包含各种引入方法）

最新推荐文章于 2024-10-18 21:42:59 发布
原创 最新推荐文章于 2024-10-18 21:42:59 发布 · 2k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#数据可视化 #vue.js

本文详细介绍了如何在Vue项目中安装和使用Echarts，包括全局、局部及按需引入的方式，并展示了柱状图、饼状图和折线图的配置与实现，还提及了响应式布局和自定义配置的方法。

本文主要简单介绍Echarts在Vue项目中的简单使用。

安装

npm install echarts

引入

1、全局引入

1-1、在main.js中全局引入

import * as Echarts from "echarts";
Vue.prototype.$echarts = echarts

1-2、实现一个简单的图像组件

<template>
		<div style="width: 400px; height: 300px" ref="chart"></div>
</template>
<script>
	export default {
		data() {
			return {
			chart: null, 
			};
		},
		 mounted() {
    this.init();
  },
  methods: {
    init() {
      //2.初始化
      this.chart = this.$echarts.init(this.$refs.chart);
      //3.配置数据
      let option = {
        title: {
          text: "柱状图",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
             label: {
                  show: true, //是否在图上展示数据 // position:'top',//数据在柱状图顶部显示
                  textStyle: {
                    // color: "#000000", //数据颜色
                  },
                  formatter: "{c}", //显示百分比
                },
            data: [5, 20, 36, 10, 10, 20],
          },
               
        ],
      };
      // 4.传入数据
      this.chart.setOption(option);
    },
  },
};
</script>
<style>

</style>

效果
在这里插入图片描述

2、局部引入

2-1、在需要的页面引入

<template>
		<div style="width: 400px; height: 300px" ref="chart"></div>
</template>
<script>
import * as Echarts from "echarts";
	export default {
		data() {
			return {
			chart: null, 
			};
		},
		 mounted() {
    this.init();
  },
  methods: {
    init() {
      //2.初始化
      this.chart = Echarts.init(this.$refs.chart);
      //3.配置数据
      let option = {
        title: {
          text: "柱状图",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
             label: {
                  show: true, //是否在图上展示数据 // position:'top',//数据在柱状图顶部显示
                  textStyle: {
                    // color: "#000000", //数据颜色
                  },
                  formatter: "{c}", //显示百分比
                },
            data: [5, 20, 36, 10, 10, 20],
          },
               
        ],
      };
      // 4.传入数据
      this.chart.setOption(option);
    },
  },
};
</script>
<style>

</style>

3、按需引入（在所需要的页面）

<template>
		<div style="display: flex">
              <div style="width: 400px; height: 300px" ref="chart"></div>
              <div style="width: 450px; height: 300px" ref="chart_1"></div>
              <div style="width: 450px; height: 300px" ref="chart_2"></div>
            </div>
            <div style="width: 400px; height: 300px" ref="chart_3"></div>
</template>
<script>
import * as echarts from "echarts/core"; // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import { BarChart, PieChart, LineChart } from "echarts/charts";// 引入柱状图图表，图表后缀都为Chart,也可以引入其他图表
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent
} from "echarts/components"; // 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import { CanvasRenderer } from "echarts/renderers"; // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  PieChart,
  LineChart,
  CanvasRenderer,
   LegendComponent,
  DatasetComponent
]);// 注册必须的组件
// 接下来的使用就跟之前一样，初始化图表，设置配置项
export default {
  data() {
    return {
     
        chart: null, 
    };
  },
  mounted() {
    this.init();
    window.addEventListener("resize", () => {
      this.chart.resize();
    }); //让图表实现响应式布局
  },
  methods: {
    init() {
      //2.初始化
      this.chart = echarts.init(this.$refs.chart);
      this.chart_1 = echarts.init(this.$refs.chart_1);
      this.chart_2 = echarts.init(this.$refs.chart_2);
      this.chart_3 = echarts.init(this.$refs.chart_3);
      //3.配置数据
      let option = {
        title: {
          text: "柱状图",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
             label: {
                  show: true, //是否在图上展示数据 // position:'top',//数据在柱状图顶部显示
                  textStyle: {
                    // color: "#000000", //数据颜色
                  },
                  formatter: "{c}", //显示百分比
                },
            data: [5, 20, 36, 10, 10, 20],
          },
               
        ],
      };

      let option1 = {
        backgroundColor: "#2c343c",
        title: {
          text: "饼状图",
        },

        series: [
          {
            name: "访问来源",
            roseType: true,
            type: "pie",
            radius: "50%",
            data: [
              { value: 235, name: "视频广告" },
              { value: 274, name: "联盟广告" },
              { value: 310, name: "邮件营销" },
              { value: 335, name: "直接访问" },
              { value: 400, name: "搜索引擎" },
            ],
          },
        ],
      };

      let option2 = {
        title: {
          text: "折线图堆叠",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          show: true,
          top: "8%",
          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "邮件营销",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "联盟广告",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "视频广告",
            type: "line",
            stack: "总量",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "直接访问",
            type: "line",
            stack: "总量",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "搜索引擎",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      };
      let option3 = {
        legend: {},
        tooltip: {},
        dataset: {
        dimensions: ["product", "2015", "2016", "2017"],
          source: [
            { product: "Matcha Latte", 2015: 43.3, 2016: 85.8, 2017: 93.7 },
            { product: "Milk Tea", 2015: 83.1, 2016: 73.4, 2017: 55.1 },
            { product: "Cheese Cocoa", 2015: 86.4, 2016: 65.2, 2017: 82.5 },
            { product: "Walnut Brownie", 2015: 72.4, 2016: 53.9, 2017: 39.1 },
          ],
        },
        xAxis: { type: "category" },
        yAxis: {},
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
      };
      // 4.传入数据
      this.chart.setOption(option);
      this.chart_1.setOption(option1);
      this.chart_2.setOption(option2);
      this.chart_3.setOption(option3);
    },
  },
};
</script>

demo效果
在这里插入图片描述

自定义配置

我们可以根据Echarts的配置项来自定义实现，UI设计稿 --> 配置项
可以根据下面的概念图对一些基础的配置有了解（更多的配置请查询官网）在这里插入图片描述

Vue项目中引入Echarts
...
02-08 2090
Vue项目中引入Echarts
vue引入图形组件echarts v-charts
大小先生
06-29 2815
整体效果视频： 一、引入echarts 第一步：引入依赖 npm install echarts -S 第二步：配置main.js 引入全局变量，可减少页面配置 import echarts from 'echarts' Vue.prototype.$echarts = echarts; 局部变量 import echarts from 'echarts' 第三步：页面加载数据 <div id="container" style="height: 50.
【Echarts】echarts多层圆环图详细配置代码
做笔记/记录遇到的前端bug
10-09 4791
vue项目使用echars圆环图，多层圆环图，详细配置，拿来直接用
vue中引入echarts
热门推荐
nunumaymax的博客
12-14 1万+
vue中引入echarts并使用准备工作全局引用局部引用 准备工作 安装echarts npm install echarts -S 全局引用 首先在main.js中引入echarts，将其绑定到vue原型上：
在Vue中使用echarts
xqhys的博客
09-17 1057
由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的（懒省事），eg:vue-echarts ，但是拉取下来发现，跟项目中使用的类型有点偏差，而且他们的数据大多都是定制好的，我很难在此基础上进行更改（惹不起），于是选择了放弃，最终还是选择echarts。以下是我使用的一些心得体会~ 我的示例是在vue-cli搭建 ...
在Vue中使用Echarts实例图的方法实例
10-14
在Vue中使用Echarts涉及到几个关键步骤，包括安装Echarts、在组件中引入Echarts、创建Echarts图表容器、配置图表参数以及在合适的生命周期中挂载图表。 首先，需要在Vue项目中安装Echarts。可以通过npm或者yarn来...
vue中使用echarts制作圆环图的实例代码
10-18
本文主要介绍如何在Vue项目中使用ECharts库来制作圆环图，提供了一个实例代码供参考。ECharts是一个使用JavaScript实现的开源可视化库，提供直观、生动、可交互、高度可定制的数据可视化图表，非常适合用于Vue等前端...
vue使用echarts图表的详细方法
10-17
在Vue中使用Echarts，可以使图表与Vue组件更好地结合，提高开发效率。 首先，我们需要在Vue项目中安装Echarts。如果你使用的是vue-cli构建的项目，可以通过以下命令安装Echarts： ```bash npm install echarts -S ...
在vue中使用echarts(折线图的demo,markline用法)
10-15
在`mounted`生命周期钩子中，我们初始化ECharts图表，调用`this.$echarts.init()`方法创建图表实例，然后使用`setOption()`方法设置配置。 在`markLine`中，你可以根据需求配置不同类型的数据，如平均值、最大值、...
vue在使用ECharts时的异步更新和数据加载详解
08-28
本文将详细介绍如何在 Vue 中使用 ECharts 实现异步更新和数据加载。 一、准备 ECharts 环境 首先，我们需要将 ECharts.js 引入到我们的 Vue 项目中，可以通过在入口 html 文件中添加以下代码： ```html ...
Vue项目中引入ECharts
weixin_38383877的博客
10-18 1959
上面的代码会引入所有 ECharts 中所有的图表和组件，但是假如你不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。第一行：Parsing error: No Babel config file detected for...全部引入，这样一来，我们可以在该页面使用。
Vue中引入echarts。
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
03-03 1万+
1、安装 在终端vue项目的文件夹下运行npm install echarts --save安装依赖 可以使用npm install echarts@(“这里可以写版本号”) --save安装指定版本。 提示我之前使用的第一种方式安装、结果出现了错误、弄了我老半天。最终解决的方法是：通过将之前下载的版本卸载掉、然后安装对应的版本 2、在main.js文件中引入 // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echa
Vue中引入echarts的步骤及常见配置项
m0_61685343的博客
08-24 5957
一、安装echarts二、引入echarts1、全局引入2、局部引入三、使用。
vue引入echart
chaoyumeng的博客
07-05 322
1、安装echarts npm install --save-dev echarts 2、main.js中引入并绑定到Vue原型（main.js） import echarts from 'echarts' Vue.prototype.$echarts = echarts 3、如果需要中国地图（main.js） import china from ‘echarts/map/json/china.json’ echarts.registerMap(‘china’, china) <template&gt
Vue中引入echarts
记录生活点滴
05-13 897
Vue中引入echarts安装Echarts在组件中使用Echarts 前言：基于Vue-cli搭建的Vue项目，集成Echarts，实现图表可视化案例，最终效果如下。完整代码在文末。 安装Echarts Echarts实例官网 npm install echarts -S 如果慢的话，就自行换成淘宝镜像。安装完成后，在Vue项目中的main.js全局引入，也可以按需引入，这里直接全局引入方便点 // 引入echarts import * as echarts from 'echarts' Vue.pr
vue引入echarts
好气嗷，但仍要保持微笑!
01-14 369
1)安装echarts插件 npm install echarts --save 2)在main.js中种引入，作为全局变量 import echarts from 'echarts' Vue.prototype.$echarts = echarts; 3)在组件中使用 html代码 <div class="myChart" ref="myChart" ></div>...
Vue项目中使用echarts教程
qq_20236937的博客
05-08 7516
/该处就是图表内容，在官网的示例里面，要复制过来到项目里面的也是这一块内容。//此处的意思就是，对 demo 元素 进行图表初始化的相关操作。//使用echarts局部引入的方式（我这边的版本是5版本）//2. 基于准备好的dom，初始化echarts实例。//不加的话,当浏览器窗口缩小的时候,样式会出现问题。//import引入的组件需要注入到对象中才能使用。//4.使用刚指定的配置项和数据显示图表。//3. 指定图表的配置项和数据。//初始化echarts实例。// 调用setOption。
vue2使用echarts按需引入
最新发布
09-03
<think> 首先，用户的问题是：“我想查找vue2中使用echarts进行按需引入的方法 请问vue2中echarts按需引入的方法”。这是在询问如何在Vue2项目中按需引入ECharts图表库。 根据系统级指令： - 所有行内数学表达式用$...$格式（但在这个上下文中，可能不需要数学表达式，因为主题是前端开发）。 - 独立公式用$$...$$格式（同样，可能不适用）。 - LaTeX语法正确（确保任何代码或格式正确）。 - 使用中文回答。 - 生成相关问题（在回答结束后）。 - 回答中引用的段落末尾自然地添加引用标识，如[^1]。 用户提供的引用： - [^1]: 讨论了在Vue项目中使用ECharts，包括按需引入的基本步骤。 - [^2]: 提到了使用babel-plugin-equire来简化按需加载。 - [^3]: 是Vue3的示例，但用户需要Vue2。 用户指定了Vue2，所以我需要专注于Vue2的按需引入方法。参考引用，[^1]和[^2]提供了相关信息。 提炼关键点： - 引用[^1]：在Vue2中，按需引入ECharts需要手动导入所需的组件。步骤包括：安装ECharts，然后在组件中导入和使用。 - 引用[^2]：建议使用babel-plugin-equire来更方便地进行按需加载，避免手动导入每个组件。 - 引用[^3]：是Vue3的，不相关，但可以作为参考，因为app.provide可能类似，但Vue2使用Vue.prototype或插件形式。 标准方法： 1. 安装ECharts：`npm install echarts --save` 2. 按需引入：在组件中，只导入需要的图表和相关组件。 3. 优化：使用插件如babel-plugin-equire简化过程。 步骤详细： - **手动按需引入**： - 在具体组件中引入ECharts的核心和需要的模块。 - 例如：`import echarts from 'echarts/lib/echarts';` 然后导入特定模块如 `import 'echarts/lib/chart/bar';` - **使用babel-plugin-equire**： - 安装插件：`npm install babel-plugin-equire --save-dev` - 配置babel：在.babelrc或babel.config.js中添加插件。 - 在代码中使用equire来动态加载。 在Vue2中，通常使用Vue.prototype来挂载ECharts实例，以便全局访问。但按需引入时，最好在组件级别导入。 回答结构： - 清晰、逐步解决问题。 - 使用中文。 - 结束时添加引用标识。 - 之后添加相关问题。 大纲回答： 1. **介绍按需引入的必要性**：减少包大小，提高性能。 2. **手动按需引入步骤**： - 安装ECharts。 - 在组件中导入核心和特定模块。 - 创建图表实例。 3. **简化方法**：使用babel-plugin-equire。 4. **示例代码**：展示如何写代码。 5. **注意事项**：如确保容器有高度，生命周期中使用。 6. **引用**：基于提供的引用添加标识。 7. **添加相关问题**：在最后。 相关问题想法： 1. 如何在Vue2中全局引入ECharts？ 2. ECharts按需引入的性能优化有哪些？ 3. 如何处理ECharts图表响应式？ 4. Vue2和Vue3在ECharts使用上的区别？ 5. 常见问题排查，如图表不显示。 确保回答可靠：基于提供的引用和标准实践。 </think> ### Vue2中ECharts按需引入的方法 在Vue2项目中，按需引入ECharts可以有效减少构建包大小，提升应用性能，避免加载不必要的图表组件。以下是详细的实现步骤，参考了官方文档和最佳实践[^1][^2][^3]。 #### 1. **安装依赖** - 首先，安装ECharts核心包： ```bash npm install echarts --save ``` - 按需加载推荐使用babel插件简化模块导入（可选但推荐）： ```bash npm install babel-plugin-equire --save-dev ``` #### 2. **配置Babel插件** - 在项目根目录下的`babel.config.js`（或`.babelrc`）中添加插件配置： ```javascript module.exports = { plugins: ["equire"] }; ``` 这避免了手动导入每个模块，插件会自动按需加载[^2]。 #### 3. **手动按需引入（不使用插件）** 如果需要完全手动控制，在Vue组件中导入所需模块： - 在组件文件的`<script>`部分： ```javascript import echarts from 'echarts/lib/echarts'; // 导入核心库 import 'echarts/lib/chart/bar'; // 导入柱状图模块 import 'echarts/lib/component/title'; // 导入标题组件 ``` 注意：每个图表类型（如`bar`、`line`）和组件（如`title`、`tooltip`）需单独导入[^1]。 #### 4. **在Vue组件中使用ECharts** - 创建图表容器（确保设置高度）： ```vue <template> <div ref="chartContainer" style="width: 100%; height: 400px;"></div> </template> ``` 容器必须设置`height`，否则图表无法渲染[^1]。 - 在组件逻辑中初始化和销毁图表： ```javascript <script> export default { mounted() { this.initChart(); // 在mounted生命周期初始化 }, beforeDestroy() { if (this.chartInstance) { this.chartInstance.dispose(); // 销毁图表避免内存泄漏 } }, methods: { initChart() { // 获取容器DOM元素 const chartDom = this.$refs.chartContainer; const myChart = echarts.init(chartDom); // 配置图表选项 const option = { title: { text: '柱状图示例' }, xAxis: { data: ['A', 'B', 'C'] }, yAxis: {}, series: [{ type: 'bar', data: [10, 20, 30] }] }; myChart.setOption(option); this.chartInstance = myChart; // 存储实例便于后续操作 } } }; </script> ``` 关键点： - 使用`ref`定义容器，并在`mounted`中初始化，确保DOM已加载[^1]。 - 在`beforeDestroy`中销毁实例，防止内存泄漏。 #### 5. **简化引入（使用babel-plugin-equire）** - 在组件中使用`equire`语法自动按需加载： ```javascript const echarts = equire(['echarts', 'bar', 'title']); // 只需声明所需模块 ``` 插件会在构建时自动处理导入，简化代码[^2]。 #### 注意事项 - **性能优化**：按需引入比全局引入（如在`main.js`导入）节省约70%的包体积，但需确保只导入用到的模块。 - **主题定制**：如需修改主题色，可在初始化后调用`echarts.registerTheme()`。 - **常见问题**： - 图表不显示：检查容器是否有固定高度。 - 导入错误：确认模块路径正确，如线条图是`'echarts/lib/chart/line'`。 - Vue2兼容性：使用`Vue.prototype`全局挂载（如`Vue.prototype.$echarts = echarts`）可能导致性能问题，推荐组件级引入[^1][^3]。 通过以上步骤，您可以在Vue2项目中高效集成ECharts，实现数据可视化[^1][^2]。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值