如何在vue中使用echarts

最新推荐文章于 2024-03-29 10:30:59 发布

Acolasiaa

最新推荐文章于 2024-03-29 10:30:59 发布

阅读量161

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/Acolasiaa/article/details/111564311

版权

在vue中使用echarts

安装echarts

1、npm安装echarts

npm install echarts --save

2、在main.js中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、在所需要的页面中引入echarts

var echarts = require（“echarts”）

4、创建DOM元素（所需要echarts的页面）

<div ref="chart" style="width: 460px; height: 280px; position: relative; top: 15px"></div>

5、在mounted里面初始化echarts

mounted() {
	const chart = this.$refs.chart;
	if（chart）{
		const myChart = echarts.init(chart);
		const option = {
			tooltip: {
				trigger: "axis",
				axisPointer: {
					type: "cross",
					label: {
						backgroundColor: "#6a7985",
					},
				},
			},
			legend: {
				data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
			},
			toolbox: {
				feature: {
					saveAsImage: {},
				},
			},
			grid: {
				left: "3%",
				right: "4%",
				bottom: "3%",
				containLabel: true,
			},
			xAxis: [{
				type: "category",
				boundaryGap: false,
				data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
			}, ],
			yAxis: [{
				type: "value",
			}, ],
			series: [{
				name: "邮件营销",
				type: "line",
				stack: "总量",
				areaStyle: {},
				data: [120, 132, 101, 134, 90, 230, 210],
				},
				{
				name: "联盟广告",
				type: "line",
				stack: "总量",
				areaStyle: {},
				data: [220, 182, 191, 234, 290, 330, 310],
				},
				{
				name: "视频广告",
				type: "line",
				stack: "总量",
				areaStyle: {},
				data: [150, 232, 201, 154, 190, 330, 410],
				},
				{
				name: "直接访问",
				type: "line",
				stack: "总量",
				areaStyle: {},
				data: [320, 332, 301, 334, 390, 330, 320],
				},
				{
				name: "搜索引擎",
				type: "line",
				stack: "总量",
				areaStyle: {},
				data: [820, 932, 901, 934, 1290, 1330, 1320],
				},
				],
			}
			myChart.setOption(option);
			window.addEventListener("resize", function() {
				myChart.resize();
			});	
		}
		this.$on("hook:destroyed", () => {
			window.removeEventListener("resize", function() {
				myChart.resize();
			});
		});
	}
}