Echarts学习记录——不等距折线图

Echarts学习记录——不等距折线图

需求

横坐标为一个区间,折线的加勒比海盗每个点在加勒比海盗5区间内展示。
如横坐标是24小时的加勒比海盗时间点,其中展示每个小时内某个时间点的加勒比海盗数值。如下图:
Echarts学习记录——不等距折线图

说明

  1. 设置【横坐标】xAxis的加勒比海盗【类型】type为【time】类型。
  2. 设置【横坐标】的加勒比海盗值并格式化显示格式。
  3. 设置【纵坐标】yAxis,最大值,最小值,分行,背景色等
  4. 设置【数据驱动】series,主要设置data为一个二维数组,第一个元素是时间节点,第二个元素是数值。

源代码

  1. 使用的加勒比海盗CDN,所以代码可直接运行查看。
<!DOCTYPE html> <head>     <meta charset="utf-8">     <title>不等距折线图</title>     <script src="http://apps.bdimg.com/libs/jquery/1.7.1/jquery.js"></script>     <script src="https://cdn.bootcss.com/echarts/3.6.1/echarts.min.js"></script>  </head> <body>     <div id="main" style="height:400px"></div>     <script type="text/javascript">         //图表         var myChart;         //图表参数         var option;          $(function(){             //创建Echarts             myChart = echarts.init(document.getElementById('main'));              //初始化图表选项             initOption();             // 为echarts对象加载图表选项             myChart.setOption(option);          })          //初始化Option         function initOption(){             option = {                 //设置标题                 title : {                     text : '不等距折线图',                 },                 //设置鼠标移动到节点上时显示的加勒比海盗内容                 tooltip : {                     trigger: 'item',//触发类型 'item' | 'axis'                      formatter : function (params) { //内容格式器:                         var date = new Date(params.value[0]);                         data = date.getHours() + ':'                                + date.getMinutes();                         return "时间:"+data + '<br/>'+ "数值:"+params.value[1];                     }                 },                 //设置图例,与折线名称相对应                 legend : {                     data : ['随机数值']                 },                 //设置边框                 grid: {                     x : 40,                     y : 60,                     x2: 20,                     y2: 60                 },                 //设置横坐标                 xAxis : [                     {                         axisLabel :{                             textStyle:{                                 color: '#333'                             },                             //设置x轴显示样式                             formatter:function(params){                                 var date = new Date(params);                                 return date.getHours()+":00";                             }                         },                         type : 'time',                         data : (function(){                             var d = [];                             var i = -1 ;                             while(i++ < 24){                                 d.push(new Date(2017, 9, 1, i,0,0));                             }                             return d;                         })(),                         min: new Date(2017, 9, 1, 0,0,0),                         max: new Date(2017, 9, 2, 0,0,0),                            splitLine:{show:true},                         splitNumber:25                     }                 ],                 //设置纵坐标                 yAxis : [                     {                         type : 'value',                         min: 0,                         max: 100,                            splitArea:{show:true,                             areaStyle:{color:['#008000',                                     '#99CC00',                                     '#FFFF00',                                     '#FF9900',                                     '#FF0000']}                         },                         splitLine:{show:false},                         splitNumber:5                     }                 ],                 //设置数据驱动                 series : [                     {                         name: '随机数值',                         type: 'line',                         //图标大小,根据值进行计算                         symbolSize: function (value){                             return Math.round(value[1]/10) + 4;                         },                         data: (function () {                             var d = [];                             var len = -1;                             while (len++ < 23) {                                 var timeDate = new Date(2017, 9, 1, len,(Math.random()*30).toFixed(0),0);//时间 2017 10 1                                  var randomNum = (Math.random()*100).toFixed(2);//100以内随机数,保留两位小数                                 //如果数据格式为'-',则折线表示为断点                                 if(len == 5){                                     randomNum = '-';                                 }                                 d.push([timeDate,randomNum]);                             }                             return d;                         })()                     }                 ]             };         }      </script> </body>

参考

http://echarts.baidu.com/echarts2/doc/example/line8.html

http://blog.csdn.net/flygoa/article/details/73090369加勒比海盗5

发表评论

电子邮件地址不会被公开。 必填项已用*标注