## :-: 折线统计图（line） ``` //stack ： { }，堆叠效果对象 1.dom容器 <div style="width:600px;height:400px;margin:100px auto" id="chart"></div> 2.配置 //初始化 var myCharts = this.$echarts.init(document.getElementById('chart')); // x轴数据 var xDataArr = ['1月','2月','3月','4月','5月','6月','7月','8月','9月']; // y轴数据 var yDataArr = [500,500,556,855,644,598,457,689,587]; var yDataArr2 = [784,452,897,568,452,587,225,874,897]; // 配置项 var option = { //标题配置 title : { text : '销量',//标题，加‘\n’可换行 link : 'http://www.baidu.com',//超链接 textStyle : {//文本样式 color : 'red', fontWeight : '800' }, borderWidth : 5,//边框 borderColor : 'blue', borderRadius : 5, left : 30,//位置 top : 10 }, // x轴 xAxis : { type : 'category',//类目轴 data : xDataArr,//x轴数据 boundaryGap : false,//让x轴第一个数据紧贴y轴，没有间距 }, // y轴 yAxis : { type : 'value',//数值轴，对应series中的data scale : true,//脱离0值比例的缩放，y轴不是从0开始，当数据相差较小时，可看出明显差异，要不然不好比较数据大小 }, //数据筛选，需要配合series使用，data中的每一项对应name值 legend : { data : ['可乐','雪碧'], }, //系列列表，多个对象显示多个条形图 series : [ { name : '可乐', type : 'line',//类型：bar：柱状图，line：折线图，pie：饼装图 data : yDataArr,//数据 //最大值最小值标记 markPoint : { data : [ {type : 'max',name : '最大值'},//最大值 {type : 'min',name : '最小值'}//最小值 ], }, // 平均值标记线 markLine : { data : [ {type : 'average',name : '平均值'} ] }, //标记区间，多个数组 markArea : { data : [ // 第一个区间 [ {xAxis:'1月'},//开始 {xAxis:'2月'},//结束 ], // 第二个区间 [ {xAxis:'5月'},//开始 {xAxis:'6月'},//结束 ] ], }, // smooth : true,//使线条更加平滑 //线条样式 lineStyle : { color : 'green', type : 'solid', //dotted,solid }, stack : {},//堆叠图效果，多条数据不会重叠，起点是相对的 //填充样式配置 areaStyle : { color : 'pink' }, //显示数值 label : { show : true,//设置显示 // rotate : 30,//数值旋转角度 // position : 'inside',//定位：默认inside（内部），还有top,right等 }, barWidth : '30%',//宽度设置 color : 'red',//颜色 }, { name : '雪碧', type : 'line',//类型：bar：柱状图，line：折线图，pie：饼装图 data : yDataArr2, barWidth : '30%',//宽度 stack : {}, //填充样式配置 areaStyle : { color : '#ccc' }, //标记区间，多个数组 markArea : { data : [ // 第一个区间 [ {xAxis:'3月'},//开始 {xAxis:'4月'},//结束 ], // 第二个区间 [ {xAxis:'8月'},//开始 {xAxis:'9月'},//结束 ] ], }, }, ], // 提示 tooltip : { // trigger : 'item',//触发类型：放在图上 trigger : 'axis',//触发类型：放在坐标轴上 triggerOn : 'click',//触发方式：click：点击，mouseover：鼠标移入(默认) // formatter : '{b}的成绩是{c}',//提示文字，默认显示类目name({a}),{b}:x轴，{c}：y轴 formatter : function(arg){//提示文字也可以是个回调函数 console.log(arg); return arg[0].name + '的销量是' + arg[0].data; } }, //右上角工具栏按钮 toolbox : { feature : { saveAsImage : {},//导出为图片 dataView : {},//数据视图，生成一个列表，可以编辑数据 restore : {},//重置数据，刷新 dataZoom : {},//区域缩放 magicType : {//动态图表切换 type : ['bar','line'] }, } }, }; myCharts.setOption(option); ``` 图示：  堆叠效果： :-: