vue-echarts数据统计图表展示

    <template>
    	<div>
    		<h1>统计</h1>
    		<div id="myChart" :style="{width:'100vw',height:'300px'}"></div>
    	</div>
    </template>
    
    <script>
    	let echarts = require('echarts/lib/echarts')
    	require('echarts/lib/chart/bar')
    	require('echarts/lib/chart/line')
    	require('echarts/lib/component/tooltip')
    	require('echarts/lib/component/toolbox');
    	require('echarts/lib/component/legend');
    	require('echarts/lib/component/markPoint');
    	require('echarts/lib/component/markLine');
    	require('echarts/lib/component/title')
    	import datajson from '../../demo.js'
    	export default {
    		name: 'demo',
    		data() {
    			return {
    				xdata: [],
    				ydata: []
    			}
    		},
    		mounted() {
    			for (var i = datajson.list.length - 1; i > 0; i--) {
    				this.xdata.push(datajson.list[i]['date'])
    				this.ydata.push(datajson.list[i]['num'])
    			}
    			this.drwaLine()
    		},
    		methods: {
    			drwaLine() {
    				let myChart = echarts.init(document.getElementById('myChart'))
    				myChart.setOption({
    					title: {
    						text: ''
    					},
    					tooltip: {
    						trigger: 'axis'
    					},
    					xAxis: {
    						data: this.xdata
    					},
    					yAxis: {
    						type: 'value'
    					},
    					series: [{
    						data: this.ydata,
    						type: 'line',
    						markPoint: {
    							data: [{
    									type: 'max',
    									name: '最大值'
    								},
    								{
    									type: 'min',
    									name: '最小值'
    								}
    							]
    						},
    						markLine: {
    							data: [{
    								type: 'average',
    								name: '平均值'
    							}]
    						}
    					}]
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    	body{
    		margin: 0;
    	}
    </style>
    
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    代码解读