vuecli4 引入 echarts 动态数据渲染 + 页面自适应

	<!-- 折线图 -->
		<div id='broken'></div>

在mounted周期中渲染

//引入大体轮廓
var echarts = require('echarts')
		var myChart = echarts.init(document.getElementById('broken'));
		// // 绘制图表
			myChart.setOption({
			title: {
				text: '堆叠区域图',
				x:'40'
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					label: {
						backgroundColor: '#6a7985'
					}
				}
			},
			legend: {
				// data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
			},
			toolbox: {
				feature: {
					saveAsImage: {}
				}
			},
			grid: {
				left: '5%',
				right: '4%',
				bottom: '1%',
				containLabel: true
			},
			xAxis: [
				{
					type: 'category',
					boundaryGap: false,
					
				}
			],
			yAxis: [
				{
					type: 'value'
				}
			],
			series: []
		});

模拟异步加载数据

	//加载数据的动画
		myChart.showLoading();
		// 折线图数据加载模块
		//此处获取并加载数据
		setTimeout(()=>{
        let legend_data =  ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'];
		let x_data = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
		let series_data = [ {
					name: '邮件营销',
					type: 'line',
					stack: '总量',
					areaStyle: {},
					data: [120, 132, 101, 134, 90, 230, 210]
				},
				{
					name: '联盟广告',
					type: 'line',
					stack: '总量',
					areaStyle: {},
					data: [220, 182, 191, 234, 290, 330, 310]
				},
				{
					name: '视频广告',
					type: 'line',
					stack: '总量',
					areaStyle: {},
					data: [150, 232, 201, 154, 190, 330, 410]
				},
				{
					name: '直接访问',
					type: 'line',
					stack: '总量',
					areaStyle: {},
					data: [320, 332, 301, 334, 390, 330, 320]
				},
				{
					name: '搜索引擎',
					type: 'line',
					stack: '总量',
					label: {
						normal: {
							show: true,
							position: 'top'
						}
					},
					areaStyle: {},
					data: [820, 932, 901, 934, 1290, 1330, 1320]
				}];
				//数据加载到图标中
	         	myChart.setOption({
								legend: {
									data:legend_data
								},
								xAxis:{
									data:x_data
								},
								series:series_data
			});
		myChart.hideLoading();    //隐藏加载动画
		},1000);

页面自适应配置

		//折线图自适应配置
		window.onresize = function(){
			let myCharts = echarts.init(document.getElementById('broken'));//这块一定单独引入一次，如果同步上面的，可能不会实现自适应，需手动刷新适应
			myCharts.resize();
		};

注：如果异步渲染echarts,自适应配置函数需写入异步callback中，不然不会起到自适应效果。