Echarts学习记录——不等距折线图
Echarts学习记录——不等距折线图
需求
横坐标为一个区间，折线的每个点在区间内展示。
如横坐标是24小时的时间点，其中展示每个小时内某个时间点的数值。如下图：
说明
- 设置【横坐标】xAxis的【类型】type为【time】类型。
- 设置【横坐标】的值并格式化显示格式。
- 设置【纵坐标】yAxis，最大值，最小值，分行，背景色等
- 设置【数据驱动】series，主要设置data为一个二维数组，第一个元素是时间节点，第二个元素是数值。
源代码
- 使用的CDN，所以代码可直接运行查看。
<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 + '
'+ "数值："+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