前言：项目中经常用到Echarts，有些需求几乎可以复用。因为之前没有很好的总结，时间长了容易忘记，所以这里总结一下Echarts折线图的使用，下面会列出官网的一些API。1.效果图2.配置基本折线图第一步：初始化letmyChart=echarts.init(document.getElementById("echarts-line"));第二部分：定义配置项option={xAxis:{type:'category',boundaryGap:false,data:['01.23','01.24','01.25','01.26','01.27','01.28','01.29']},yAxis:{type:'value'},series:[{data:[15,14,10,11,14.58,10,11.5],type:'line',areaStyle:{}}]};最后：渲染myChart.setOption(option);三、一步修改OptionxAxis一步：X轴类型：x轴坐标轴类型'value'值轴，适用于连续数据。‘category’类目轴，适用于离散类目数据，类目数据必须通过该类数据设置。'time'时间轴，适用于连续时间序列数据。与数值轴相比，时间轴有时间格式，刻度计算也不同。例如，它将决定使用月、周、日或小时范围的刻度。'log'对数轴。适用于对数数据。常用的类型是'category'，需要定义正确的类别数据。本例中的类别数据是由日期组成的数据。boundaryGap：坐标轴两边的空白，可以配置为true或false，也可以配置为数组。默认为真。非类别轴包括时间轴、值轴和对数轴。boundaryGap是两个值的数组，分别代表数据的最小值和最大值。扩展范围，可以直接设置数值或相对百分比。本例中：坐标轴两边留10%空白axisLine:坐标轴相关设置show:是否显示，坐标轴包括x轴上的黑色(#333)线和刻度名称lineStyle：设置坐标轴样式，包括坐标轴颜色、宽度、透明度、线型、阴影等...：更多信息请参考官网api，可以设置箭头方向、大小、是否刻度线在坐标0尺度上。本例中：通过设置坐标轴的透明度实现视觉上，颜色为浅灰色axisTick：坐标轴刻度相关设置show：是否显示interval：显示间隔，默认为'auto'坐标轴颜色，宽度，透明度,线型,阴影等本例中：设置刻度线不显示splitLine:坐标轴在网格区域的分界线（网格中的竖线）show:是否显示interval:显示间隔，默认为'auto'lineStyle：设置网格线样式，包括坐标轴颜色、宽度、透明度、线型、阴影等X轴代码xAxis:{type:'category',data:['01.23','01.24','01.25','01.26','01.27','01.28','01.29'],boundaryGap:['10%','10%',],//坐标轴axisLine两边空白:{//坐标轴lineStyle:{opacity:0.01,//设置透明度控制显示与否},},splitLine:{//Gridlineshow:false,//GridlinelineStyle:{color:'#eeeeee',},},axisTick:{//scalelineshow:false,//去除刻度线},},yAxis:Y轴X轴和Y轴文档大致相同，所以只列出设置Y在例子中对于坐标轴的刻度线，我设置透明度为0，设置坐标轴名称，设置网格线颜色。Y轴代码yAxis:{min:0,//最小刻度max:25,//最大刻度type:'value',name:'℃',//基于Y轴对齐，坐标轴名称用空格对齐标尺名称nameTextStyle:{color:'#444e65',align:'left',//textlevelAlignmentverticalAlign:'middle',//文本垂直对齐},axisTick:{//刻度线显示:false,//去掉刻度线},axisLine:{//坐标轴lineStyle:{opacity:0,//透明度为0},},splitLine:{//gridline//show:false,//gridlinelineStyle:{color:'#eeeeee',},},},series:serieslistlabel:onthegraph文本标签可以用来解释图表的一些数据信息show：是否显示position：标签的默认位置是top，有14个可选值rich：在rich中，可以自定义富文本风格。More...：更多信息请参考官网api，如颜色、字体、背景等相关设置。itemStyle：折线拐点标记的样式。)More...：更多详情请参考官网api，如阴影、透明度areaStyle：区域填充样式-color：颜色值-描边设置：borderColor（颜色）、borderWidth（宽度）、borderType（类型)中：设置区域填充样式，绘制线性渐变折线数据系列：[{data:[15,14,10,11,14.58,10,11.5,],//datatype:'line',//charttype,polylineGraphorhistogramorpiechartlabel:{//图表上的文本标签normal:{formatter:'{@data}℃',show:true,//显示数据color:'#00af58',position:'top',fontSize:'14',},},itemStyle:{//折线拐点标记的样式。normal:{color:'#00af58',},},areaStyle:{//区域填充样式normal:{color:{type:'linear',x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:'rgba(0,175,88,0.4)',},{offset:1,color:'rgba(0,175,88,0.01)',},],globeCoord:false,},},},},],4.其他echarts颜色设置Echarts颜色可以用RGB表示，比如'rgb(128,128,128)'，如果要加alpha通道表示opacity，你可以使用RGBA，比如'rgba(128,128,128,0.5)'，或者使用十六进制格式，比如'#ccc'。颜色除了纯色，还支持渐变色和纹理填充//线性渐变，前四个参数为x0,y0,x2,y2，取值范围为0-1，相当于图形边界框内的百分比，如果globalCoord为`true`，这四个值是绝对像素位置color:{type:'linear',x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:'red'//colorat0%},{offset:1,color:'blue'//colorat100%}],globalCoord:false//默认为false}//径向渐变，前三个参数分别是中心x、y和半径，取值同线性渐变color:{type:'radial',x:0.5,y:0.5,r:0.5,colorStops:[{offset:0,color:'red'//0%时的颜色},{offset:1,color:'blue'//100%时的颜色}],globalCoord:false//默认为false}//纹理填充颜色：{图像:imageDom,//支持HTMLImageElement,HTMLCanvasElement,不支持路径字符串repeat:'repeat'//是否平铺，可以是'repeat-x','repeat-y','no-repeat'}代码GitHub:https://github.com/myNameTao/...总结由于对Echarts不熟悉，还是需要花时间慢慢阅读文档，所以整理这个例子方便大家遇到类似需求直接拿来用.在使用Echarts之前感觉这个插件的Api内容很多，但是看了折线图的Api之后发现很多都是类似的，比如X轴和Y轴的设置轴。
