echarts图表初始化

首先下载echarts：npm install echarts -S

其次copy以下代码就可以生成一个简单的图标表了

<template>
    <div>
		<div id="myChart" :style="{width: '80%', height: '300px'}"></div>
	</div>
</template>

<script>
import echarts from 'echarts'
export default {
	name: 'HelloWorld',
	data () {
		return {
		msg: 'Welcome to Your Vue.js App'
		}
	},
	mounted(){
		this.drawLine()
	},
	methods:{
		drawLine(){
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById('myChart'))
			// 绘制图表
			myChart.setOption({
				tooltip : {
					trigger: 'axis',
					axisPointer : {            // 坐标轴指示器，坐标轴触发有效
						type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				
				legend: {
					// data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis : [
					{
						type : 'category',
						data : ['周一','周二','周三','周四','周五','周六','周日']
					}
				],
				yAxis : [
					{
						type : 'value'
					}
				],
				series : [
					{
						name:'直接访问',
						type:'bar',
						data:[320, 332, 301, 334, 390, 330, 320],
						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: '16px'
									}
								}
							}
						},
					},
					{
						name:'视频广告',
						type:'bar',
						stack: '广告',
						data:[150, 232, 201, 154, 190, 330, 410]
					},
					{
						name:'搜索引擎',
						type:'bar',
						data:[862, 1018, 964, 1026, 1679, 1600, 1570],
						markLine : {
							lineStyle: {
								normal: {
									type: 'dashed'
								}
							},
						}
					},
				]
			});
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>