uniapp使用echarts

uniapp使用echarts

• 1.下载资源包
• • 2.引入资源包
  • 3.代码示例
  • 注意事项

1.下载资源包

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

2.引入资源包

将资源包放入项目内

3.代码示例

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