echarts在vue中的使用

java中使用echarts图表插件
1、引入echarts插件
2、进入https://echarts.apache.org/examples/zh/index.html#chart-type-line寻找适合的图
3、代码如下

<template>
	<div>
	 <div id="main" ref="chart"></div>						
	</div>
</template>
<script>
	var echarts = require("echarts");
	export default {
		// name: "charts",
		data() {
			return {
				
				 edata: {
				        title: {
				          text: "新增设备"
				        },
				        tooltip: {trigger: 'axis'},
						legend: {
						        data: ['销量']
						    },
						toolbox: {
						        show: true,
						        feature: {
						            dataZoom: {
						                yAxisIndex: 'none'
						            },
						            dataView: {readOnly: false},
						            magicType: {type: ['line', 'bar']},
						            restore: {},
						            saveAsImage: {}
						        }
						},
				        xAxis: {
				          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
				        },
				        yAxis: {
						},
				        series: [
				          {
				            name: "销量",
				            type: "line",
							smooth: true,
				            data: [150, 120, 136, 100, 120, 180],
							markPoint: {
								data: [
									{type: 'max', name: '最大值'},
									{type: 'min', name: '最小值'}
								]
								},
								markLine: {
									data: [
										{type: 'average', name: '平均值'}
									]
								}
				          }
				        ]
				      },
				pageParam:{},
				queryForm: {
				},
				tableData: [],
				currentRow: null
			}
		},

		methods: {
			
		},
		mounted() {
			echarts.init(this.$refs.chart).setOption(this.edata);
		}
	}
</script>

<style>
	#main {
	       width: 600px;
	       height: 400px;
	       /* background-color:black;  */
	       margin: 0 auto;
	      }
</style>