uniapp中怎么引入echarts(最简单)

已于 2024-03-29 10:56:46 修改
阅读量3.2k 收藏 8
点赞数 14
分类专栏： echarts 前端 文章标签： uni-app echarts 前端
于 2024-03-29 09:33:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gps666666/article/details/137132542
版权

目录

引言

echarts.vue 文件代码

echarts-config 文件代码

在需要引入echarts图表的页面(.vue)中进行导入该文件(echarts.vue)

使用该组件(echarts)

引言

在uniapp中需要引入echarts时的时候,需要引入两个配置文件.分别是 echarts.vue  以及  echarts-config  放在你项目中需要的目录下,

echarts.vue 文件代码

<template>
	<view class="content">
		<view
			:prop="optionData"
			:moduleParamProp="moduleParam"
			:change:moduleParamProp="echarts.moduleParamUp"
			:change:prop="echarts.updateEcharts"
			:id="moduleParam.id"
			class="echarts"
		></view>
	</view>
</template>

<script>
	const style = {
		backgroundColor: 'rgba(145,215,255, .3)',
		dataBackground: {
			lineStyle: { color: 'rgba(145,215,255, .3)' },
			areaStyle: { color: 'rgba(145,215,255, .5)' },
		},
		selectedDataBackground: {
			lineStyle: { color: 'rgba(145,215,255, .6)' },
			areaStyle: { color: 'rgba(145,215,255, .8)' },
		},
		borderColor: 'rgb(145,215,255, .1)',
		handleStyle: {
			color: 'rgba(145,215,255, .5)',
			borderColor: 'rgba(145,215,255, .7)',
		},
		moveHandleStyle: {
			color: 'rgba(145,215,255, .2)',
			borderColor: 'rgba(145,215,255, .3)',
		},
		fillerColor: 'rgba(145,215,255, .1)',
	};

	import * as echarts from 'echarts';

	import echartsConfig from '@/common/echarts-config.js';
	export default {
		data() {
			return {};
		},
		mounted() {},
		props: {
			moduleParam: {
				type: Object,
				default: () => {
					id: 'myCharts';
					width: '100%';
					height: '300rpx';
				},
			},
			optionData: {
				type: Object,
				default: {
					tooltip: {
						trigger: 'axis',
						textStyle: {
							color: '#fff',
						},
						extraCssText:
							'padding: 10px; max-width: 60%; max-height:80%; overflow-y: auto; background: rgba(0, 64, 193, 0.7); border: none; color: #fff; border:none; box-shadow: 0 0 5px 1px rgba(147, 235, 248, 1)',
					},
					legend: {
						show: true,
						textStyle: { color: '#FFFDFE' },
					},
					grid: {
						left: '3%',
						right: '16%',
						bottom: '20%',
						containLabel: true,
					},
					toolbox: {
						show: false,
					},
					xAxis: {
						type: 'value',
						name: '时间(s)',
						splitLine: {
							show: false,
						},
						axisLine: {
							lineStyle: {
								color: '#B2CBDA',
							},
						},
						max: 'dataMax',
					},
					yAxis: {
						type: 'value',
						name: 'm/s²',
						splitLine: {
							show: false,
						},
						axisLine: {
							lineStyle: {
								color: '#B2CBDA',
							},
						},
					},
					dataZoom: [
						{
							show: true,
							bottom: '10%',
							realtime: true,
							start: 0,
							end: 30,
							height: 10,
							...style,
						},
						{
							type: 'inside',
							realtime: true,
							start: 0,
							end: 30,
							...style,
						},
					],
					series: [
						{
							name: '',
							type: 'line',
							stack: 'Total',
							lineStyle: {
								color: '#44F8FF',
							},
							showSymbol: false,
							data: [],
						},
					],
				},
			},
		},
		onLoad() {},
		methods: {},
	};
</script>

<script module="echarts" lang="renderjs">
	import * as echarts from "echarts"
	import echartsConfig from '@/common/echarts-config.js'
	let myChart

	export default {
		data(){
			return{
				clickData:null
			}
		},
		watch: {
			"optionData": {
				handler(newV) {
					// console.info('watcher : ', newV)
					// this.updateEcharts(newV)
				},
				// 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
				deep: true,
			}
		},
		mounted() {
			this.$nextTick(() => {
				if (typeof window.echarts === 'function') {
					this.initEcharts()
				} else {
					// 动态引入较大类库避免影响页面展示
					const script = document.createElement('script')
					// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
					script.src = 'static/echarts.js'
					script.onload = this.initEcharts.bind(this)
					document.head.appendChild(script)
				}
			})
		},
		methods: {
			initEcharts(){
				this.$nextTick(() => {
					var dom = document.getElementById(this.moduleParam.id)
					echarts.dispose(dom)
					myChart = echarts.init(dom)


					// console.info("myChart : ", myChart)
					// 观测更新的数据在 view 层可以直接访问到
					myChart.setOption(this.optionData)
				})

				// // 点击传参
				// myChart.on('click', params => {
				// 	this.clickData = params
				// })
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				this.$nextTick(() => {
					// 监听 service 层数据变更
					var dom = document.getElementById(this.moduleParam.id)
					echarts.dispose(dom)
					myChart = echarts.init(dom)

					// console.info('myChart : ', myChart)

					if(myChart._dom !== null) {
						myChart.setOption(newValue)
					}
				})

			},
			moduleParamUp(newvalue,oldvalue){},
			onClick(event, ownerInstance) {
				ownerInstance.callMethod('onViewClick',{
					value:this.clickData.value,
					name:this.clickData.name,
					dataIndex:this.clickData.dataIndex,
					seriesName:this.clickData.seriesName
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.echarts {
		/* margin-top: 100px; */
		width: 100%;
		height: 250px;
	}
</style>

echarts-config 文件代码

// 通用配置项
module.exports = {
    "color": [
		"#91cc75",
        "#348739",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc"
    ],
    "backgroundColor": "rgba(0, 0, 0, 0)",
    "textStyle": {},
    "title": {
        "textStyle": {
            "color": "#464646"
        },
        "subtextStyle": {
            "color": "#6E7079"
        }
    },
    "line": {
        "itemStyle": {
            "borderWidth": 1
        },
        "lineStyle": {
            "width": 2
        },
        "symbolSize": 4,
        "symbol": "emptyCircle",
        "smooth": false
    },
    "radar": {
        "itemStyle": {
            "borderWidth": 1
        },
        "lineStyle": {
            "width": 2
        },
        "symbolSize": 4,
        "symbol": "emptyCircle",
        "smooth": false
    },
    "bar": {
        "itemStyle": {
            "barBorderWidth": 0,
            "barBorderColor": "#ccc"
        }
    },
    "pie": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "scatter": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "boxplot": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "parallel": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "sankey": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "funnel": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "gauge": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "candlestick": {
        "itemStyle": {
            "color": "#eb5454",
            "color0": "#47b262",
            "borderColor": "#eb5454",
            "borderColor0": "#47b262",
            "borderWidth": 1
        }
    },
    "graph": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        },
        "lineStyle": {
            "width": 1,
            "color": "#aaa"
        },
        "symbolSize": 4,
        "symbol": "emptyCircle",
        "smooth": false,
        "color": [
            "#5470c6",
            "#91cc75",
            "#fac858",
            "#ee6666",
            "#73c0de",
            "#3ba272",
            "#fc8452",
            "#9a60b4",
            "#ea7ccc"
        ],
        "label": {
            "color": "#eee"
        }
    },
    "map": {
        "itemStyle": {
            "normal": {
                "areaColor": "#eee",
                "borderColor": "#444",
                "borderWidth": 0.5
            },
            "emphasis": {
                "areaColor": "rgba(255,215,0,0.8)",
                "borderColor": "#444",
                "borderWidth": 1
            }
        },
        "label": {
            "normal": {
                "textStyle": {
                    "color": "#000"
                }
            },
            "emphasis": {
                "textStyle": {
                    "color": "rgb(100,0,0)"
                }
            }
        }
    },
    "geo": {
        "itemStyle": {
            "normal": {
                "areaColor": "#eee",
                "borderColor": "#444",
                "borderWidth": 0.5
            },
            "emphasis": {
                "areaColor": "rgba(255,215,0,0.8)",
                "borderColor": "#444",
                "borderWidth": 1
            }
        },
        "label": {
            "normal": {
                "textStyle": {
                    "color": "#000"
                }
            },
            "emphasis": {
                "textStyle": {
                    "color": "rgb(100,0,0)"
                }
            }
        }
    },
    "categoryAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#6E7079"
            }
        },
        "axisTick": {
            "show": true,
            "lineStyle": {
                "color": "#6E7079"
            }
        },
        "axisLabel": {
            "show": true,
            "textStyle": {
                "color": "#6E7079"
            }
        },
        "splitLine": {
            "show": false,
            "lineStyle": {
                "color": [
                    "#E0E6F1"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.2)",
                    "rgba(210,219,238,0.2)"
                ]
            }
        }
    },
    "valueAxis": {
        "axisLine": {
            "show": false,
            "lineStyle": {
                "color": "#6E7079"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#6E7079"
            }
        },
        "axisLabel": {
            "show": true,
            "textStyle": {
                "color": "#6E7079"
            }
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": [
                    "#E0E6F1"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.2)",
                    "rgba(210,219,238,0.2)"
                ]
            }
        }
    },
    "logAxis": {
        "axisLine": {
            "show": false,
            "lineStyle": {
                "color": "#6E7079"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#6E7079"
            }
        },
        "axisLabel": {
            "show": true,
            "textStyle": {
                "color": "#6E7079"
            }
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": [
                    "#E0E6F1"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.2)",
                    "rgba(210,219,238,0.2)"
                ]
            }
        }
    },
    "timeAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#6E7079"
            }
        },
        "axisTick": {
            "show": true,
            "lineStyle": {
                "color": "#6E7079"
            }
        },
        "axisLabel": {
            "show": true,
            "textStyle": {
                "color": "#6E7079"
            }
        },
        "splitLine": {
            "show": false,
            "lineStyle": {
                "color": [
                    "#E0E6F1"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.2)",
                    "rgba(210,219,238,0.2)"
                ]
            }
        }
    },
    "toolbox": {
        "iconStyle": {
            "normal": {
                "borderColor": "#999"
            },
            "emphasis": {
                "borderColor": "#666"
            }
        }
    },
    "legend": {
        "textStyle": {
            "color": "#333"
        }
    },
    "tooltip": {
        "axisPointer": {
            "lineStyle": {
                "color": "#ccc",
                "width": 1
            },
            "crossStyle": {
                "color": "#ccc",
                "width": 1
            }
        }
    },
    "timeline": {
        "lineStyle": {
            "color": "#DAE1F5",
            "width": 2
        },
        "itemStyle": {
            "normal": {
                "color": "#A4B1D7",
                "borderWidth": 1
            },
            "emphasis": {
                "color": "#FFF"
            }
        },
        "controlStyle": {
            "normal": {
                "color": "#A4B1D7",
                "borderColor": "#A4B1D7",
                "borderWidth": 1
            },
            "emphasis": {
                "color": "#A4B1D7",
                "borderColor": "#A4B1D7",
                "borderWidth": 1
            }
        },
        "checkpointStyle": {
            "color": "#316bf3",
            "borderColor": "fff"
        },
        "label": {
            "normal": {
                "textStyle": {
                    "color": "#A4B1D7"
                }
            },
            "emphasis": {
                "textStyle": {
                    "color": "#A4B1D7"
                }
            }
        }
    },
    "visualMap": {
        "color": [
            "#bf444c",
            "#d88273",
            "#f6efa6"
        ]
    },
    "dataZoom": {
        "handleSize": "undefined%",
        "textStyle": {}
    },
    "markPoint": {
        "label": {
            "color": "#eee"
        },
        "emphasis": {
            "label": {
                "color": "#eee"
            }
        }
    }
}

在文件里面有关于这两个文件的路径,根据自己的项目的结构目录进行配置

在需要引入echarts图表的页面(.vue)中进行导入该文件(echarts.vue)

import echarts from '@/components/echarts/echarts.vue';
	export default {
		components: {
			echarts,
		},
	    data() {
           return{ 
           }
        }
    }


使用该组件(echarts)

	<echarts :moduleParam="{ id: '自定义' }" :optionData="自定义的Option" ></echarts>

其中这两个参数是必传的,第一个参数是为了让echarts 识别到你这个组件,并且要唯一, 第二个参数是图表的样式,详情可以去看echarts官网给出的样例

到此,echarts就引入成功!  如果有啥问题可以在评论区进行@我,我会帮你们一一解答

小高求学之路
关注
专栏目录
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
如何在uni-app中使用echarts（泪的教训，保证可用，不能用来打我，保姆级教程）
程序媛的梦工厂
08-29 993
如何在uni-app中使用echart 报错"Cannot read property 'createElement' of undefined" 报错TypeError: Cannot read property 'createElement' of undefined 报错TypeError: Cannot read property 'node' of null
uni-app echarts所有示例
11-30
uni-app echarts所有示例,每个示例均可运行
uniapp EChars图表
最新发布
qq_36158551的博客
09-26 811
/ 引入主题文件// 使用自定义主题初始化图表});RenderJS 是 uni-app 提供的一种技术手段，允许开发者在特定环境下（通常指 App 端的 Vue 页面）直接在视图层（而非逻辑层）执行 JavaScript 代码。这样做的主要目的是 为了提升复杂视图渲染和交互的性能，尤其是在处理大量图形绘制、动画效果、地图渲染等场景时，通过减少逻辑层与视图层之间的通信损耗，提供更高效的视图更新和用户交互体验。
uni-app 引入echarts饼图，其他图形一样，按需引入
08-31
uni-app 引入echarts饼图，如果需要其他图形，原理一样，按需引入
uni-app引用echarts
热门推荐
梦寻汝的博客
05-14 5万+
1.首先在uni-app中不支持包下载所以得自己先新建一个项目，然后进入到这个目录下，执行npm init，接下来一路回车即可。 2.下载所需要的库 npm install echarts mpvue-echarts --save 3.引用（5是页面代码） import echarts from '@/components/echarts/echarts.vue'; 下面的是echarts.vue的代码 、 代码里script.src = './static/echarts.min...
uni-app中使用echarts教程
shi450561200的博客
04-06 2万+
一、下载echart方法一：从下载的源代码或编译产物安装方法二：从 npm 安装方法三：选择需要的模块，在线定制下载即echarts.min.js 下载二、引入。
uni-app - 在uniapp中使用echarts展示图表
iotjin的专栏
07-12 1万+
习惯使用echarts图表，在uniapp中使用npm安装echarts再使用，或多或少有问题，最终找到一个好用的插件lime-echart 官网地址 uni-app插件市场地址 安装 直接在插件市场，使用HBuilderX导入插件即可，最终导入到uni_modules文件夹 使用 使用方法可参考插件市场的用法，以下是一个异步加载demo <template> <view> <view style="width: 100%; height:50.
Uniapp中使用Echarts
weixin_42216094的博客
02-09 3万+
在uniapp中使用echarts折线图。
uni-app 中如何使用echart
BradenHan的专栏
04-20 2839
在 uni-app 中使用 ECharts 数据可视化库，通常需要完成以下步骤：使用 npm 安装 ECharts 到你的 uni-app 项目中。在项目根目录下打开终端，执行以下命令： 2. 引入 ECharts 对于 Vue 单文件组件（ 文件） 在需要使用 ECharts 的 Vue 组件中，通过 语句引入 ECharts。同时，如果你需要使用地图功能，还需要额外引入相应的地图文件（如中国地图）并注册。 对于使用 uni-app 插件市场的 ECharts 插件 如果你选择使用 uni-app 插件
在uni-app中使用ECharts - 配置四种不同的图表
杜永康的博客
10-31 1万+
在uni-app中集成ECharts可以为我们的应用提供强大的图表功能。我们详细说一下如何在uni-app中使用ECharts，并配置四种不同的图表。在uniapp中使用echarts的好处：数据可视化：ECharts提供了丰富的图表类型和交互功能，可以将数据以直观、可视化的方式展示出来。在uniapp项目中，通过使用ECharts可以轻松创建各种图表，如折线图、柱状图、饼图等，帮助用户更好地理解和分析数据。
uniapp-echarts.rar
07-02
标题 "uniapp-echarts.rar" 提示我们这个压缩包包含了一个使用uni-app与ECharts集成的项目，特别地，它支持在H5端实现地图的下钻功能。ECharts是一个由百度开发的，基于JavaScript的数据可视化库，而uni-app则是一个...
uniapp-Echarts.zip
07-25
"Uniapp-Echarts组件包引入后根据博文方法可用"意味着这个压缩包包含了一个已经封装好的uni-app Echarts组件，并且提供了一种简单直接的引入方式，无需通过npm等复杂操作。这为开发者快速集成Echarts到uni-app项目中...
uniapp 里面echarts的使用
08-30
- 在`main.js`文件中引入ECharts，添加以下代码： ```javascript import ECharts from 'echarts' Vue.prototype.$echarts = ECharts ``` 这样，ECharts就被注册为Vue的全局组件，可以在任何页面中使用。 2. *...
uniapp开发微信小程序引入echarts
C_0010的博客
05-21 2884
使用uniapp在开发微信小程序的时候怎么正确引入echarts呢？官方插件市场早已给你准备好了！
uniapp 使用echarts
weixin_49431241的博客
09-07 5090
uniapp 如何使用 echarts 图标 1 引入 文件 主要这三个文件 2 在使用到的页面 注册使用 3 html 结构 ec 对应绑定的是 　data　中的　ec ４　效果图 ５　全部代码 <template> <view class="container"> <uni-ec-canvas :ec="ec" canvas-id="multi-charts-pie"></uni-ec-canvas> </view> &l..
uni-app使用echarts图表进行数据可视化展示
weixin_48373171的博客
03-31 3831
uni-app使用echarts
uni-app使用echarts并解决echarts文件过大的问题
qq_46499695的博客
04-03 1万+
背景 这几天写小程序需要用到echarts，又因为我用uni-app开发，因此研究了好久uni-app引用echarts，遇到了也最终解决了好多bug，我感觉大家应该在使用的时候应该都会遇到，因此专门来写一篇博客，希望可以给大家提供一点帮助！！ 第一次写，保证超详细！！！ 正文 一、uni-app引用echarts 原生开发和uni-app开发需要引用的echarts不同，我们着重讲uni-app开发，原生的大家另行研究吧。 首先，要去下载插件（用hbuilder编辑器下载.....
适合uniapp的echarts库
05-02
Uniapp是一个跨平台的开发框架，它适用于多个操作系统和应用程序类型。为了创建适合于Uniapp框架的echarts库，我们需要考虑以下几个关键要素。 首先，echarts库应该易于集成到Uniapp项目中。这意味着它应该提供一个简单的安装流程，能够快速地与现有代码集成。一个好的echarts库应该易于使用，并且能够提供清晰的文档，方便开发者使用。同时，echarts库也需要支持Uniapp平台的多种操作系统和设备。 其次，echarts库应该在Uniapp框架下能够提供高性能的数据可视化。由于Uniapp开发框架是跨平台的，因此，echarts库应该能够通过多种方式来实现优秀的可视化效果。这包括支持多种图表类型、交互式特效以及大规模数据展示等方面。 最后，echarts库应该能够满足不同类型的应用程序需求。无论是一个移动端应用程序、一个Web页面还是一个桌面应用程序，echarts库应该都能够适应。 综上所述，适合于Uniapp的echarts库需要提供易于集成、高性能和多功能的数据可视化，同时要适应Uniapp框架下不同类型的应用程序。如果您需要一个可靠的echarts库，建议您选择已经针对Uniapp框架进行了优化的第三方echarts库。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小高求学之路

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值