echarts.js的使用

前提准备条件折线图

前提准备条件

引入echarts.js； <script src="./echarts.min.js"></script> 设置一个容器，并给它 设置宽高属性； 必须给容器设置宽高，它是用来给画布提供一个空间的，如果不设置是不会显示的； <div id="echarts" style="width:1000px;height:600px;"></div> echarts部分的js； //1. 获取到这个DOM节点，然后初始化 var myChart = echarts.init(document.getElementById("echarts")); //2.定义样式和数据 var option = {}; //3.使用指定的配置项和数据显示图表 myChart.setOption(option);

折线图

var option={ //添加图表的背景色 //因为canvas的原因，通过行内样式style="backgroundColor:'#FBFBFB'"不生效 backgroundColor:'#FBFBFB', //图标悬停的提示内容 tooltip:{ trigger:'axis' }, //图表正上方的数据图标 legend:{ data:['充值','消费'] }, calculable:true, //图表右上方的工具栏 toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none' }, dataView: {readOnly: false}, magicType: {type: ['line', 'bar']}, restore: {}, saveAsImage: {} } }, //x轴： xAxis:[ { axisLabel:{ //让X轴的这组数据旋转,自己设置旋转角度 rotate:30, //当X轴上面要渲染的数据太多的时候就会出现只渲染出来一部分， //但是图表中的数据显示又会自动的进行宽度的缩放，所以会导致X轴与图中的信息不相匹配的问题 interval:0 }, axisLine:{ lineStyle:{ //设置坐标轴的颜色 color:'#CECECE' } }, type:'category', //让折线图从X轴0刻度开始 boundaryGap:false, data : function (){ var list = []; for (var i = 10; i < 18; i++) { if(i<= 12){ list.push('2016-'+i + '-01'); }else{ list.push('2017-'+(i-12) + '-01'); } } return list; }() } ], //y轴： yAxis:[ { type:'value', axisLine:{ lineStyle:{ //设置坐标轴的颜色 color:'#CECECE' } } } ], //数据： series:[ //第一组数据： { name:'充值', type:'line', //去掉小圆点 symbol:'none', color:['#66AEDE'], //鼠标放在折线上，显示该折点的数据 itemStyle:{ normal:{ label:{show:true} } }, //数据 data:[800, 300, 500, 800, 300, 600,500,600], //标记最大值与最小值 markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, //标记平均值 markLine: { data: [ {type: 'average', name: '平均值'} ] } }, //第二组数据： { name:'消费', type:'line', //设置折线小圆点的样式 symbol:'triangle', //设置折线图的弧度,属性值在0-1之间 smooth:0.4, color:['#90EC7D'], //鼠标放在折线上，显示该折点的数据,并设置这点数据的颜色和背景色等样式 itemStyle:{ normal:{ label:{show:true,color:'white',backgroundColor:'black'} } }, //数据 data:[600, 300, 400, 200, 300, 300,200,400] } ] };

绘制折线图如下所示：