vue 使用e-chart

官网：https://echarts.apache.org/examples/zh/index.html#chart-type-line

1,安装，下载，并且全局挂载

import echarts from 'echarts'
 Vue.prototype.$echarts = echarts;
           

2,页面直接使用，根据官网的案例调整数据

<div style="width:100%;height:550px" ref="chart"></div>    //ref属性
initCharts() {
	let myChart = this.$echarts.init(this.$refs.chart);
	// 绘制图表
	myChart.setOption({
			tooltip: {
			trigger: 'axis'
			},
	//折线图颜色
	color:['#21C2F5','#FFAD65','#FFDD00'],
	legend: {
			data: ['早餐', '午餐', '晚餐']
			},
	grid: {
			left: '1%',
			right: '4%',
			bottom: '3%',
			containLabel: true
			},
	//显示下载按钮
	// toolbox: {
	// feature: {
    // saveAsImage: {}
    // 	}
	// },
	xAxis: {
			type: 'category',
		 	boundaryGap: false,
			data: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
			axisLabel: {
				interval: 0,//横轴信息全部显示
				rotate: -20,// -20度角倾斜显示
				}
			},
//底部X轴滑动样式
		dataZoom: [{
			type: 'slider',
			show: true, //flase直接隐藏图形
			xAxisIndex: [0],
			left: '9%', //滚动条靠左侧的百分比
			bottom: -5,
			start: 0,//滚动条的起始位置
			end: 20 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
			}],
	yAxis: {
			type: 'value'
		},
	//数据
	series: [
		{
		name: '早餐',
		type: 'line',
		stack: '大小',
		//显示有阴影区域折线案例
		areaStyle: {
			normal: {
					color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
					offset: 0, color: '#FFDD00' // 0% 处的颜色
					}, {
							offset: 0.4, color: '#FFDD05' // 100% 处的颜色
					}, {
							offset: 1, color: '#fff' // 100% 处的颜色
					}]),
				}
		},
		//折线的颜色
		lineStyle: {
			color: "#FFDD00",
			width: 1
		},
		//折线上指示点的颜色
		itemStyle: {
				color: "#FFDD00",
				opacity: 0.5 //为0不会绘制图形拐点消失
		},
		data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230]
		},
		{
		name: '午餐',
		type: 'line',
		stack: '大小',
		data: [220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 90, 230]
		},
		{
		name: '晚餐',
		type: 'line',
		stack: '大小',
		data: [150, 232, 201, 154, 190, 330, 410, 120, 132, 101, 134, 90, 230]
		},
		]
	});
}