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

r囧r小猫 2022-06-14 06:07 223阅读 0赞

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

## 需求 ##

横坐标为一个区间，折线的每个点在区间内展示。  
如横坐标是24小时的时间点，其中展示每个小时内某个时间点的数值。如下图：  
![gJZVgJK.png][]

## 说明 ##

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_echarts.baidu.com_echarts2_doc_example_line8.html]

[gJZVgJK.png]: http://i.imgur.com/gJZVgJK.png
[http_echarts.baidu.com_echarts2_doc_example_line8.html]: http://echarts.baidu.com/echarts2/doc/example/line8.html