vue中使用Apache ECharts（vue脚手架）

Posted 2021-12-05 web半晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中使用Apache ECharts（vue脚手架）相关的知识，希望对你有一定的参考价值。

1、安装

1.1、npm安装ECharts

npm install echarts --save

1.2、yarn安装ECharts

yarn add echarts --save

1.3、使用国内淘宝镜像安装ECharts

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用淘宝镜像安装ECharts

cnpm install echarts -S

2、全局引入和使用

2.1、引入ECharts

在main.js中引入ECharts。

import echarts from 'echarts';
// 把 echarts 挂载到Vue实例的原型上
// 并且重命名为 $echarts
Vue.prototype.$echarts = echarts;

2.2、使用ECharts

<div id="myChart" :style="{ width: '500px', height: '500px' }"></div>

export default {
	name: "eCharts",
	data() {
		return {};
	},
	mounted() {
		// 模板挂载完成后调用
		this.drawEcharts();
	},
	methods: {
		drawEcharts() {
			// 基于准备好的dom，初始化echarts实例
			// 第一种写法，不需要在当前页定义标签id
			// let myChart = this.$echarts.init(this.$el);
			
			// 第二种写法
			let myChart = this.$echarts.init(document.getElementById("myChart"));
			// 绘制图表
			myChart.setOption({
				title: {
					text: 'ECharts 入门示例'
				},
				tooltip: {},
				legend: {
					data:['销量']
				},
				xAxis: {
					data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
				},
				yAxis: {},
				series: [{
					name: '销量',
					type: 'bar',
					data: [5, 20, 36, 10, 10, 20]
				}]
			})
		}
	}    
}

3、局部引入和使用

<div id="myChart" :style="{ width: '500px', height: '500px' }"></div>

// 引入ECharts
let echarts = require('echarts');

export default {
	mounted() {
		this.$nextTick(() => {
			this.initChart();
		});
	},

	methods: {
    	initChart() {
    		// 方式一
			// let chart = echarts.init(this.$el);
			
			// 方式二
			let chart = echarts.init(document.getElementById("myChart"));
			chart.setOption({
				title: {
					text: "PM 2.5 均值浓度变化情况",
					textStyle: {
						color: "#000",
					},
					x: "center",
					top: "5%",
				},
				backgroundColor: "#fff",
				tooltip: {
					trigger: "axis",
					formatter: "value：{c}<br/>时间：{b}",
				},
				// 保存图片
				toolbox: {
					top: "5%",
					right: "5%",
					iconStyle: {
						borderColor: "#1890ff",
					},
					feature: {
						saveAsImage: {
							type: "png",
							name: "PM2.5均值浓度变化情况",
						},
					},
				},
				xAxis: {
					type: "category",
					data: ["2021-09-01 10:00", "2021-09-01 11:00", "2021-09-01 12:00"],
				},
				yAxis: {
					type: "value",
					boundaryGap: false,
					name: "ug/m³",
					splitLine: {
						show: false,
					},
					// y轴不能设置值
					// data: [0, 30, 60, 90],
				},
				series: [
					{
						data: [6, 30, 60],
						type: "line",
					},
				],
			});
		},
	}
}