在Avue项目中使用echarts图表

效果图：

一、先在命令行安装echarts

方法一：npm安装

npm install echarts --save

方法二：cnpm安装

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

目前我安装的版本是：echarts 5.0.1

二、代码

<template>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="myChart" :style="{ width: '600px', height: '400px' }"></div>
</template>

<script>
	import * as echarts from "echarts";
	export default {
		data() {
			return {
				echartsdata: {
					title: {
						text: "ECharts 入门示例",
					},
					tooltip: {},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
					},
					yAxis: {},
					series: [{
						name: "销量",
						type: "bar",
						data: [5, 20, 36, 10, 10, 20],
					}, ],
				},
			};
		},
		//钩子函数
		mounted() {
			this.draw();
		},
		methods: {
			draw() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById("myChart"));
				myChart.setOption(this.echartsdata);
			},
		},
	};
</script>

<style>
</style>

官方文档