之前在项目中利用canvas实现了折线图，在实现的过程中觉得过于繁琐，前两天看到Echarts这个插件，学习，模仿一下，中文学习网址：http://echarts.baidu.com/index.html 项目的需求为：当数据少于7个的时候，展现第一种样式，当数据多余7个的时候，采用第二种样式，如下图：
实现的思路如下： 1.写出一条简单的折线图 2.修改折线图样式（7个点以内的样式和大于7个点的样式各来一个） 3.后期数据交互实现 4.完整代码
最后实现效果如下（这里把折线改成了曲线）：
效果图如下： 实现一个基本的折线图代码如下： ——css—–
<style type="text/css"> html,body{ margin:0; padding: 0; } .chartContainer{ width:100%; height:10rem; border:1px solid pink; box-sizing:border-box; } </style>—–html—–
<body> <div class="chartContainer" id="chart1"></div> </body>——js——
<script type="text/javascript"> //初始化echarts实例 var chart1=$("#chart1").get(0); var myChart=echarts.init(chart1); var chartDate=[1,3,5,8,10,15,18,22,25,28,30]; //var weight=[55.4,55.9,53]; var weight=[55.4,55.9,53,56,57,58,56.7,53,55,54,53]; //对echarts做基础配置 option={ xAxis:{ data:chartDate }, yAxis:{ }, series:[ { name:"体脂", type:"line",//折线图，还有pie（饼状图）， data:weight } ] } myChart.setOption(option); </script>1：少于7个点的样式 最后实现效果如下图：
<1>调整折线的折线颜色，隐藏x,y轴
series:[ { name:"体脂", type:"line",//折线图，还有pie（饼状图）， data:weight, lineStyle:{//线条颜色 normal:{ color: '#1daffa', } }, } ]<2>调整标注的颜色
series:[ { name:"体脂", type:"line",//折线图，还有pie（饼状图）， data:weight, lineStyle:{//线条颜色 normal:{ color: 'rgba(29, 175, 250, 0.3)', } }, itemStyle:{ normal:{ color: 'rgba(29, 175, 250, 0.3)', } } } ]<3>调整y轴，使y坐标轴从数据最小点开始（不是从0开始，从0开始数据域范围太窄）
yAxis:{ min:"dataMin",//可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。 show:false },<4>调整标注样式
本来是打算用代码实现外面是半透明，里面是蓝色实心的样式，但是没有找到设置的，看看以后能不能优化，现在用图片代替。 在series里面添加：
symbol:'image://image/dot1.png', //设置标注点的图片，或者有('circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow') symbolSize:10,//标注点的大小<5>添加标注文本，修改样式
在series里面添加：
label:{ normal:{ show:true, position:[0,-20], textStyle:{ color:"#1daffa" } } }<6>去掉动画效果，把折线变成曲线 在option里面添加，和series同级
animation : false,//是否启用图表初始化动画，默认开启在series里面添加
smooth:true,//是否平滑曲线显示。2.大于7个点的实现 <1>首先实现一个简单的曲线，去掉标注
option2={ xAxis:{ data:chartDate, show:false }, yAxis:{ boundaryGap:false, min:"dataMin", show:false }, animation : false,//是否启用图表初始化动画，默认开启 series:[ { name:"体脂", type:"line",//折线图，还有pie（饼状图）， smooth:true, symbol:"none",//去掉标注 lineStyle:{//线条颜色 normal:{ color: '#1daffa', width:1 } }, itemStyle:{ normal:{ color: 'rgba(29, 175, 250, 0.3)', } }, data:weight } ] }<2>实现极点的标注
在series里面添加：
markPoint: { data: [ { type:'max', symbolSize:2, label: { normal: { position: 'top', formatter: '{c}', textStyle:{ color:"#1daffa" } } } }, { type:'min', symbolSize:2, label: { normal: { position: 'bottom', formatter: '{c}', textStyle:{ color:"#1daffa" } } } } ] },1.当数据少于7个点的时候
var weight=[55.4,55.9,53]; //初始化echarts实例 var chart1=$("#chart1").get(0); var myChart=echarts.init(chart1); var chartDate=[1,3,5,8,10,15,18,22,25,28,30]; var weight=[55.4,55.9,53]; //var weight=[55.4,55.9,53,56,57,58,56.7,53,55,54,53]; var dataLength=weight.length; var symbolImg='image://image/1.png'; if(dataLength <=7 ){ var dataText="["; var dataArr=new Array(); for(var i=0;i<7;i++){ var noDataText="{value:"+weight[dataLength-1]+",symbol:'emptyCircle',symbolSize:5,label:{ normal:{show:false}}},"; if(i < dataLength){ dataArr.push({"value":weight[i],"symbol":symbolImg,"symbolSize":10}); }else{ dataArr.push({"value":weight[dataLength-1],"symbol":'emptyCircle',"symbolSize":5,"label":{"normal":{"show":false}}}); } } }else{ dataArr=weight; }2.多余7个点
var weight=[55.4,55.9,53,56,57,58,56.7,53,55,54,53];