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,且最好是唯一的,不重复的

相关推荐
姑苏洛言21 分钟前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手1 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言1 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
七夜zippoe2 小时前
uniapp跳转页面时如何带对象参数
uni-app·携带参数
你的人类朋友2 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手2 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
racerun3 小时前
UniApp中的pages.json 和 tabBar
uni-app·json
一只小灿灿3 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜053 小时前
react状态管理库 - zustand
前端·react.js·前端框架