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

已于 2024-03-29 10:56:46 修改
阅读量921 收藏 4
点赞数 13
分类专栏： 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就引入成功!  如果有啥问题可以在评论区进行@我,我会帮你们一一解答

小高求学之路
关注
  • 13
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
uniapp-echarts.rar
07-02
uni-app使用echarts--h5端--可以实现地图下钻
uni-app中使用echarts教程
shi450561200的博客
04-06 2万+
一、下载echart方法一：从下载的源代码或编译产物安装方法二：从 npm 安装方法三：选择需要的模块，在线定制下载即echarts.min.js 下载二、引入。
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 - 在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折线图。
uniapp 使用echarts
weixin_49431241的博客
09-07 4737
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..
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
uniapp-Echarts.zip
07-25
uni-app如何引入Echarts？ Uniapp-Echarts组件包引入后根据博文方法可用 简单直接的方式 不用npm等操作
uni-app 引入echarts饼图，其他图形一样，按需引入
08-31
uni-app 引入echarts饼图，如果需要其他图形，原理一样，按需引入
uni-app封装echarts折线图，安卓真机测试可以使用
02-09
echarts直接使用h5方式渲染在真机里会报错和显示不了，所以需要使用renderjs配合使用才可以
threejs文件包，uniapp 里使用 echarts、threejs、地图插件等
03-17
threejs文件包，uniapp 里使用 echarts、threejs、地图插件等
微信sdk在uniapp中下载引入
04-25
微信sdk，1.6.0
Echarts.zip（适用uni-app App端和H5端的echarts图表组件）
05-27
适用uni-app App端和H5端的echarts图表组件
echarts-uniapp-master.zip
04-12
echart的uniapp实例源码
uniapp 里面echarts的使用
08-30
uniapp 快捷使用echarts方法
uni-app使用echarts并解决echarts文件过大的问题
qq_46499695的博客
04-03 9723
背景 这几天写小程序需要用到echarts，又因为我用uni-app开发，因此研究了好久uni-app引用echarts，遇到了也最终解决了好多bug，我感觉大家应该在使用的时候应该都会遇到，因此专门来写一篇博客，希望可以给大家提供一点帮助！！ 第一次写，保证超详细！！！ 正文 一、uni-app引用echarts 原生开发和uni-app开发需要引用的echarts不同，我们着重讲uni-app开发，原生的大家另行研究吧。 首先，要去下载插件（用hbuilder编辑器下载.....
在uni-app中使用ECharts - 配置四种不同的图表
最新发布
杜永康的博客
10-31 6540
在uni-app中集成ECharts可以为我们的应用提供强大的图表功能。我们详细说一下如何在uni-app中使用ECharts，并配置四种不同的图表。在uniapp中使用echarts的好处：数据可视化：ECharts提供了丰富的图表类型和交互功能，可以将数据以直观、可视化的方式展示出来。在uniapp项目中，通过使用ECharts可以轻松创建各种图表，如折线图、柱状图、饼图等，帮助用户更好地理解和分析数据。
uniapp 引入插件市场的echart插件，使用指南！+踩坑记录！！血泪史！！！
柑橘乌云_
04-11 6878
在uniapp做的微信小程序中使用echarts，通过echart-for-wx 插件，遇到图表不报错，不显示图表等bug，踩坑记录，最重要的是插件版本和echart.js版本的对应关系，以及压缩版本的echart.js的版本对应关系。
uniapp中引入echarts没效果
07-15
你好！对于在uniapp中引入echarts无效的问题，有几个可能的原因和解决方法： 1. 检查echarts版本：确保你使用的echarts版本是兼容uniapp的。你可以尝试使用uni-echarts插件，它是专门为uniapp开发的echarts插件，可以在uniapp中无缝使用echarts。 2. 确认引入方式：在uniapp中引入echarts可以通过两种方式：全局引入和按需引入。全局引入可以在vue文件的main.js中使用Vue.prototype挂载方式引入，按需引入可以通过在需要使用echarts的页面中引入相应的组件。确保你选择了正确的引入方式。 3. 检查组件使用方式：确保你在页面中正确使用了echarts组件，并传入了正确的数据和配置项。你可以参考echarts官方文档和uniapp文档，确保你的代码没有问题。 4. 检查依赖安装：如果你使用了uni-echarts插件，请确保你已经正确安装了相关的依赖。你可以查看插件文档中的安装步骤，或者尝试重新安装相关依赖。 如果以上方法都没有解决你的问题，还可以尝试更新uniapp和echarts的版本，或者在uniapp社区中寻求帮助。希望这些方法能帮到你！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小高求学之路

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

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

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

打赏作者

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

抵扣说明：

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

余额充值