Vue中使用ECharts

已于 2023-10-09 09:47:23 修改
阅读量113 收藏 1
点赞数
文章标签： vue.js echarts javascript
于 2023-10-09 09:43:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lllcuigu/article/details/133694445
版权

安装ECharts

npm install echarts --save

引入ECharts

main.js
旧版:
import echarts from 'echarts';

Vue.prototype.$echarts = echarts

新版：

import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts

页面代码

<template>
	<div style="width: 100%;">

		<div style="display: flex;height: 50%;width: 100%;">
             <!-- 柱状图  -->
			<a-card style="width: 100%;height: 500px;" id="maychar">

			</a-card>
			
		</div>
		
		<div style="display: flex;">
            <!-- 折线图 -  -->
			<a-card style="width: 50%;height: 420px;" id="maychar3">
				
			</a-card>
             <!-- 饼图 -->
			<a-card style="width:50%;height: 420px;color: white;" id="maychar2">

			</a-card>

		</div>
		<div style="display: flex;">
			<!-- 柱状图  -->
			<a-card style="width: 50%;height: 420px;" id="maychar5">
				
			</a-card>

            <!-- 饼图 -->
			<a-card style="width: 50%;height: 420px;" id="maychar4">
				
			</a-card>
		</div>

	</div>
</template>

<script>
	import * as echarts from 'echarts'
	export default {
		data() {
			return {

			};
		},
		mounted() {
			this.getCharts();
			this.getCharts2();
			this.getCharts3();
			this.getCharts4();
			this.getCharts5()
		},
		methods: {
			getCharts() {
				let chartBox = this.$echarts.init(document.getElementById("maychar"));
				let option = {
					legend: {


					},
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					grid: {
						// left: '15%',
					   top:'20%'
					   
					},
					tooltip: {},

					title: {
						text: 'abcde',
						left: 'center',
						top: 20,
						textStyle: {
							color: '#000000'
						}
					},
					dataset: {
						  dimensions: ['product', '状态', '工时', '金额'],
						source: [

							['1', 43.3, 85.8, 93.7],
							['2', 83.1, 73.4, 55.1],
							['3', 86.4, 65.2, 82.5],
							['4', 72.4, 53.9, 39.1],
							['5', 43.3, 85.8, 93.7],
							['6', 72.4, 53.9, 39.1],
							
						]
					},
					xAxis: {
						type: 'category'
					},
					yAxis: {},

					series: [
						
						{
						type: 'bar',
						color: 'rgba(204,204,204)',
					}, {
						type: 'bar',
						color: 'rgba(0,51,102)',
					}, {
						type: 'bar',
						color: 'rgba(153,204,255, 0.9)',
					}]
				};
				chartBox.setOption(option);
				// 根据页面大小自动响应图表大小
				window.addEventListener("resize", function() {
					chartBox.resize();
				});
			},

			getCharts2() {
				let chartBox = this.$echarts.init(document.getElementById("maychar2"));
				let option = {
					
					title: {
						text: 'abc',
						left: 'center',
						top: 20,
						textStyle: {
							color: '#000000'
						}
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						left: 'center',
						top: 'bottom',
						data: ['小明', '阿珍', '阿强', '打酱油', '嘿嘿']
					},
					visualMap: {
						show: false,
						min: 80,
						max: 600,
						inRange: {
							colorLightness: [0, 1]
						}
					},
					series: [{
						name: '',
						type: 'pie',
						radius: '55%',
						center: ['50%', '50%'],
						data: [{
								value: 335,
								name: '小明'
							},
							{
								value: 310,
								name: '阿珍'
							},
							{
								value: 274,
								name: '阿强'
							},
							{
								value: 235,
								name: '打酱油'
							},
							{
								value: 400,
								name: '嘿嘿'
							}
						].sort(function(a, b) {
							return a.value - b.value;
						}),
						roseType: 'radius',
						label: {
							color: 'rgba(255, 255, 255, 0.3)'
						},
						labelLine: {
							lineStyle: {
								color: 'rgba(255, 255, 255, 0.3)'
							},
							smooth: 0.2,
							length: 10,
							length2: 20
						},
						itemStyle: {
							color: '#1f668c',
							shadowBlur: 200,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						},
						animationType: 'scale',
						animationEasing: 'elasticOut',
						animationDelay: function(idx) {
							return Math.random() * 200;
						}
					}]
				};
				chartBox.setOption(option);
				// 根据页面大小自动响应图表大小
				window.addEventListener("resize", function() {
					chartBox.resize();
				});
			},

			getCharts3() {

				let chartBox = this.$echarts.init(document.getElementById("maychar3"));
				let option = {
					title: {
						text: 'ab',
						left: 'center',
						top: 20,
						textStyle: {
							color: '#000000'
						}
					},
					tooltip: {
						trigger: 'axis'
					},

					legend: {
						left: 'center',
						top: 'bottom',
						data: ['a', 'b']
					},
					grid: {

					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['1', '2', '3', '4', '5', '6', '7']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
							name: 'a',
							type: 'line',
							stack: 'Total',
							data: [120, 132, 101, 134, 90, 230, 210],
							color:'rgb(255,204,51)',
						},
						{
							name: 'b',
							type: 'line',
							stack: 'Total',
							data: [220, 182, 191, 234, 290, 330, 310],
							color:'rgb(153,204,255)'
						},

					]
				};
				chartBox.setOption(option);
				// 根据页面大小自动响应图表大小
				window.addEventListener("resize", function() {
					chartBox.resize();
				});
			},
			getCharts4() {

				let chartBox = this.$echarts.init(document.getElementById("maychar4"));
				let option = {
					title: {
						text: 'abcd',
						left: 'center',
						top: 20,
						textStyle: {
							color: '#000000'
						}
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					color: ['#FFCC99', '#ffe45d', '#99CCFF','#CCFFFF', '#FFCCCC', '#CCCCFF','#CCFFCC','#66CCFF'],
					legend: {
						left: 'center',
						top: 'bottom',
						data: [
							'a',
							'b',
							'c',
							'd',
							'e',
							'f',
							'g',
							'k',

						]
					},
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: true
							},

							saveAsImage: {
								show: true
							}
						}
					},
					series: [{
						name: '',
						type: 'pie',
						radius: [20, 140],
						center: ['45%', '54%'],
						roseType: 'area',
						itemStyle: {
							borderRadius: 5
						},
						data: [{
								value: 30,
								name: 'a',
								
							},
							{
								value: 28,
								name: ' b',
								
							},
							{
								value: 26,
								name: 'c'
							},
							{
								value: 24,
								name: 'd'
							},
							{
								value: 22,
								name: 'e'
							},
							{
								value: 20,
								name: 'f'
							},
							{
								value: 18,
								name: 'g'
							},
							{
								value: 16,
								name: 'k'
							}
						]
					}]
				};
				chartBox.setOption(option);
				// 根据页面大小自动响应图表大小
				window.addEventListener("resize", function() {
					chartBox.resize();
				});
			},
			getCharts5() {

				let chartBox = this.$echarts.init(document.getElementById("maychar5"));
				let option = {
					title: {
						text: 'abc',
						left: 'center',
						top: 20,
						textStyle: {
							color: '#000000'
						}
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						data: ['a', 'b', 'b', 'd', 'e', 'f', 'g']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [
							20,
							// {
							// 	value: 200,
							// 	itemStyle: {
							// 		color: '#666699'
							// 	}
							// },
							20,
							50,
							80,
							70,
							10,
							30,
							
						],
						type: 'bar',
						color:'#93c4f5'
					}]
				};
				chartBox.setOption(option);
				// 根据页面大小自动响应图表大小
				window.addEventListener("resize", function() {
					chartBox.resize();
				});
			},


		}
	}
</script>

<style>
</style>

效果展示

前端榴脆骨
关注
Vue中使用echarts
Soul_guys的博客
11-11 2万+
使用步骤 在项目下使用命令行，初始化工程的 npm 环境并安装 echarts（这里前提是您已经安装了 npm）： npm install echarts --save 2.导入模块到main.js（如果你只有一个组件都用echarts，那么就导入局部） 全局 main.js: import Vue from 'vue' import echarts from 'echarts' //需要挂载到Vue原型上 Vue.prototype.$echarts = echarts 之后的组件内部使用： &l
vue中使用echarts制作圆环图的实例代码
10-18
本文主要介绍如何在Vue项目中使用ECharts库来制作圆环图，提供了一个实例代码供参考。ECharts是一个使用JavaScript实现的开源可视化库，提供直观、生动、可交互、高度可定制的数据可视化图表，非常适合用于Vue等前端...
Echarts-vue
weixin_45439379的博客
06-12 2656
Echarts-vue 文章目录Echarts-vue前言一、主要内容1.介绍2.演示 前言 一、主要内容 1.介绍 （1）数据可视化前言 （2）Echarts基本使用 （3）Echarts高级使用 （4）电商平台数据可视化实时监控系统 4.1后台搭建 4.2结合vue搭建图表组件 4.3websocket实现数据推送 4.4主题切换、页面合并 、全屏切换 知识储备 （1）html,css,js （2）Echarts的使用 （3）vue,vuex,Router,webpack （4）websocket的使用
echarts+vue
jwq
01-26 360
echarts+vue //echarts的npm安装 npm install echarts --save //or （或者） cnpm install echarts --save //main.js import echarts from 'echarts' Vue.prototype.$echarts = echarts//全局使用this.$echarts <template> <div ref="top" class="top-child-foot"></di
Echarts在vue中的使用
gmf7471的博客
05-05 1763
以下是在vue中开发使用的场景 必要的从npm下载echarts npm install echarts --save 其次引入全局中 1.开始的时候需要准备一个div，就是所说的对dom容器 <div class="Iots"></div> 2.在我们echarts官方文档中找到自己所需的图表，然后复制到methods生命周期里，（如需调用接口本人建议的方法时给图表代码外封一层函数，然后在mounted里面调用，这样请求下来的数据可以直接通过调用携带数据） 3.之
echarts在Vue中的使用
birdcoder的博客
09-12 284
echarts在Vue中的使用下载echarts引用echarts代码data里的代码方法的代码css效果图 下载echarts npm i echarts --save 引用echarts import * as echarts from ‘echarts’ 注意：不要使用 import echarts from ‘echarts’,后续会报init没有定义的错误 代码 <div class="echart-pie"> <div ref="echartsOne" clas
在Vue中使用echarts的方法
08-28
在Vue中使用ECharts的方法 Vue框架是当前最流行的前端框架之一，ECharts是中国最流行的数据可视化工具之一。在实际项目中，我们经常需要将ECharts集成到Vue项目中，以实现数据的可视化展示。因此，本文将详细介绍...
在vue中使用echarts(折线图的demo,markline用法)
10-15
在`mounted`生命周期钩子中，我们初始化ECharts图表，调用`this.$echarts.init()`方法创建图表实例，然后使用`setOption()`方法设置配置。 在`markLine`中，你可以根据需求配置不同类型的数据，如平均值、最大值、...
在Vue中使用Echarts实例图的方法实例
10-14
在Vue中使用Echarts涉及到几个关键步骤，包括安装Echarts、在组件中引入Echarts、创建Echarts图表容器、配置图表参数以及在合适的生命周期中挂载图表。 首先，需要在Vue项目中安装Echarts。可以通过npm或者yarn来...
详解Vue中使用Echarts的两种方式
08-27
Vue中使用Echarts的两种方式详解 Vue.js是当前非常流行的前端框架之一，而Echarts则是非常流行的数据可视化库。合理地使用Echarts可以让我们的数据更加直观、美观。但是，如何在Vue项目中使用Echarts呢？本文将为...
echarts在vue中的使用
weixin_45111741的博客
11-05 6996
文章目录1.ECharts2.ECharts如何在vue中使用2.1从 npm 安装2.2 引入3.在组件中先显示一个简单的echarts图表4.如何将一个表格的数据用echarts图形显示出来？？？ 1.ECharts 一个使用 JavaScript 实现的开源可视化库，包含了丰富功能的图表，还可以自定义图表。详细了解可去ECharts官网 ECharts官网链接 2.ECharts如何在vue...
在Vue中使用echarts
HD243608836的博客
10-28 587
由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的（懒省事），eg:vue-echarts ，但是拉取下来发现，跟项目中使用的类型有点偏差，而且他们的数据大多都是定制好的，我很难在此基础上进行更改（惹不起），于是选择了放弃，最终还是选择echarts。以下是我使用的一些心得体会~ 我的示例是在vue-cli搭建 安装echarts依赖 npm install echarts -S 或者使用淘宝的镜像 npm inst
echarts-vue学习
Shiki2147的博客
02-10 376
echarts学习 1.配置 1.新建项目 vue create 项目名 2.下载echart包 npm install echarts@4.9.0 --save 3.在main.js配置echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 4.使用echarts <template> <div id="app"> <div id="demo" ref="view">&lt
Vue使用ECharts
qq_46724069的博客
02-23 960
快速入门 EChartsEcharts实例一个基于` JavaScript 的开源可视化图表库。例如折线图代码option = {xAxis : {
【Echarts】在Vue中使用Echarts
weixin_46443403的博客
03-05 7582
Vue，Echarts
echarts在vue中简单应用
weixin_43965881的博客
05-16 152
在vue项目中使用echarts生成柱状图
如何在Vue和React中优雅的使用ECharts
qq_42002487的博客
08-27 751
前言 俗话说：“工欲善其事，必先利其器”。现如今已经有许多成熟易用的可视化解决方案，例如ECharts，AntV等等。我们可以把这些解决方案比作是一套套成熟的“工具”，那我们如何将这些“工具”应用于当前最热门的两个前端框架中呢？ 不慌，现在我们就以ECharts为例，来尝试“工具”的各种用法。 Vue中运用ECharts 首先我们要把ECharts下载下来： npm install echarts --save 全局引用 全局引用的好处就是我们一次性把ECharts引入项目后，就可以在任何一个组件中使用E
echarts vue使用
技术改变生活
10-28 137
<template> <el-row :gutter="20" style="margin-top: 15px;"> <el-col :span="12"> <div id="chart" class="grid-content bg-white" style="height: 300px;"> ...
vue中使用echarts
最新发布
04-27
要在Vue中使用echarts，需要先安装echarts和vue-echarts插件。 1. 安装echarts和vue-echarts插件： ``` npm install echarts vue-echarts ``` 2. 在Vue中引入vue-echarts组件： ```javascript import VueECharts...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值