在vue项目中使用echarts

怎么在vue项目中使用echarts

1.从npm获取echarts

npm install echarts --save

2.在src的main.js中引入echarts

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

3.在页面中使用

<template>
	<div class="about">
		<div id="content"></div>
	</div>
</template>
<script>
	export default {
		mounted() {
			this.myChart();
		},
		methods: {
			myChart() {
				// 基于准备好的dom，初始化echarts实例
				let Chart = this.$echarts.init(document.getElementById('content'),"dark")
				var mycolor = {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [{
						offset: 0,
						color: 'aqua' // 0% 处的颜色
					}, {
						offset: 1,
						color: 'rgba(10, 50, 128, 1)' // 100% 处的颜色
					}],
					global: false // 缺省为 false
				};
				// 绘制图表
				Chart.setOption({
					title: {
						text: '在Vue中使用echarts'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					xAxis: {
						data: ["1~30秒", "31秒~1分", "1分~3分", "3分~10分", "10分-30分"]
					},
					yAxis: {},
					series: [{
						name: "人数",
						type: "bar",
						barWidth: '60%',
						data: [3580, 4660, 6003, 8044, 9831],
						// 渐变颜色
						itemStyle: {
							color: mycolor,
						}
					}, ]
				});
			}
		},
	}
</script>
<style>
	#content{
		width: 800px;height: 800px;
		margin: 100px auto;
	}
</style>