uniapp使用echarts

uniapp使用echarts

1.下载资源包

https://echarts.apache.org/zh/download.html

2.引入资源包

将资源包放入项目内

3.代码示例

javascript 复制代码
<template>
	<div style="width:100%;height:500rpx" id="line" ref="line"></div>
</template>

<script>
	import * as echarts from '@/config/echarts.min.js';
	export default {
		data() {
			return {
				chartDom: "",
				myChart: "",
				option: "",
			};
		},
		// onLoad() {
		// 	this.$nextTick(() => {
		// 		this.chartDom = document.getElementById("main");
		// 		this.myChart = echarts.init(this.chartDom);
		// 		this.initChart();
		// 	});
		// },
		mounted() {
			this.$nextTick(() => {
				this.initChart();
			});
		},
		methods: {
			initChart() {
				this.chartDom = document.getElementById("line");
				this.myChart = echarts.init(this.chartDom);
				// return;
				// this.chart = echarts.init(this.$el, "macarons");

				this.option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
							name: 'Direct',
							type: 'bar',
							emphasis: {
								focus: 'series'
							},
							data: [320, 332, 301, 334, 390, 330, 320]
						},
						{
							name: 'Email',
							type: 'bar',
							stack: 'Ad',
							emphasis: {
								focus: 'series'
							},
							data: [120, 132, 101, 134, 90, 230, 210]
						},
						{
							name: 'Union Ads',
							type: 'bar',
							stack: 'Ad',
							emphasis: {
								focus: 'series'
							},
							data: [220, 182, 191, 234, 290, 330, 310]
						},
						{
							name: 'Video Ads',
							type: 'bar',
							stack: 'Ad',
							emphasis: {
								focus: 'series'
							},
							data: [150, 232, 201, 154, 190, 330, 410]
						},
						{
							name: 'Search Engine',
							type: 'bar',
							data: [862, 1018, 964, 1026, 1679, 1600, 1570],
							emphasis: {
								focus: 'series'
							},
							markLine: {
								lineStyle: {
									type: 'dashed'
								},
								data: [
									[{
										type: 'min'
									}, {
										type: 'max'
									}]
								]
							}
						},
						{
							name: 'Baidu',
							type: 'bar',
							barWidth: 5,
							stack: 'Search Engine',
							emphasis: {
								focus: 'series'
							},
							data: [620, 732, 701, 734, 1090, 1130, 1120]
						},
						// {
						// 	name: 'Google',
						// 	type: 'bar',
						// 	stack: 'Search Engine',
						// 	emphasis: {
						// 		focus: 'series'
						// 	},
						// 	data: [120, 132, 101, 134, 290, 230, 220]
						// },
						// {
						// 	name: 'Bing',
						// 	type: 'bar',
						// 	stack: 'Search Engine',
						// 	emphasis: {
						// 		focus: 'series'
						// 	},
						// 	data: [60, 72, 71, 74, 190, 130, 110]
						// },
						// {
						// 	name: 'Others',
						// 	type: 'bar',
						// 	stack: 'Search Engine',
						// 	emphasis: {
						// 		focus: 'series'
						// 	},
						// 	data: [62, 82, 91, 84, 109, 110, 120]
						// }
					]
				};
				this.option && this.myChart.setOption(this.option);
			},
		},
	}
</script>

<style>
</style>

注意事项

div中的id 需要对应document中的id,且最好是唯一的,不重复的

相关推荐
10年前端老司机6 分钟前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程4 小时前
2025前端面试题
前端·面试
前端小趴菜055 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo6 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
军军君017 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼8 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原8 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序