Echarts:X轴不等距折线图

来源:https://blog.csdn.net/flygoa/article/details/73090369
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>不等距折线图</title>
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script>
</head>
<body>
<div id="main" style="height:400px"></div>
</body>
</html>
<script type="text/javascript">
function addZero(number) {
return (number.toString())[1] ? number :‘0‘ + number;
}
var myChart = echarts.init(document.getElementById(‘main‘));
var index=1;
var option = {
legend: {
data: [‘随机数值‘]
},
xAxis: [
{
axisLabel: {
formatter: function (params) {
var date = new Date(params);
var time=addZero(date.getHours()) + ":00";
if(time==="00:00"&& index===2){
time="24:00"
}
if(time==="00:00"&& index===1){
index=2
}
return time
}
},
type: ‘time‘,
data:[new Date(2017, 9, 1, 0, 0, 0),new Date(2017, 9, 2, 0, 0, 0)],
min: new Date(2017, 9, 1, 0, 0, 0),
max: new Date(2017, 9, 2, 0, 0, 0),
splitNumber: 16/*X轴上包含原点在内的值的个数,当该值不能使“显示范围”在X轴“整数等分”时,该值不起作用*/
}
],
yAxis: [
{
type: ‘value‘,
min: 0,
max: 11
}
],
series: [
{
name: ‘随机数值‘,
type: ‘line‘,
data: (function () {
var timeAndData = [];
for (var i = 0; i <24; i++) {
var timeDate = new Date(2017, 9, 1, i, (Math.random() * 60).toFixed(0), 0);
var randomNum = (Math.random() * 10).toFixed(2);
timeAndData.push([timeDate, randomNum]);
}
return timeAndData;
})()
}
]
};
myChart.setOption(option);
</script>
```
以下真实案例:
```javascript
function addZero(number) {
return (number.toString())[1] ? number : ‘0‘ + number;
}
var lineOption = {
animation: false,
title: {
text: ‘总流量(Bps)‘
},
tooltip: {
trigger: ‘axis‘,
axisPointer: {
type: ‘cross‘
}
},
grid: {
left: 50,
right: 15
},
legend: {
data: [‘当前流量‘]
},
xAxis: [
{
axisLabel: {
formatter: function (params) {
var date = new Date(params);
return addZero(date.getHours()) + ":" + addZero(date.getMinutes());
}
},
type: ‘time‘,
data: null,
splitNumber: 30
}
],
yAxis: [
{
type: ‘value‘
}
],
series: [
{
name: ‘当前流量‘,
type: ‘line‘,
data: null
}
]
};
console.log(result.lineinfo);
/*上面result是返回结果,result.lineinfo是要渲染的数据*/
/*以下计算X轴刻度*/
$scope.xMinValue = new Date(result.lineinfo[0][0]);
$scope.xMaxValue = new Date((result.lineinfo[result.lineinfo.length - 1])[0]);
$scope.xAxisData=[$scope.xMinValue,$scope.xMaxValue];
/*以上计算X轴刻度*/
/*以下计算各点的纵横坐标*/
$scope.yAxisData=[];
angular.forEach(result.lineinfo, function (singleArray) {
$scope.yAxisData.push([(new Date(singleArray[0])), singleArray[1]])
});
/*以上计算各点的纵横坐标*/
lineOption.xAxis[0].data = $scope.xAxisData;
lineOption.series[0].data = $scope.yAxisData;
instanceEcharts.setOption(lineOption);
```

原文地址:https://www.cnblogs.com/gushixianqiancheng/p/10962931.html

时间: 2024-08-01 15:54:04

Echarts:X轴不等距折线图的相关文章

如何绘制双轴柱状图和折线图?

如何绘制双轴柱状图和折线图? 答:第1步,先将数据作成如下表格. ××市2010--2014年农业灌溉用水有效利用系数 年份 灌溉亩数(万亩) 毛灌溉用水总量(万米3) 净灌溉用水总量(万米3) 灌溉水有效利用系数 考核标准 2010年 1.57 1440 691 0.48 0.55 2011年 1.57 1142 628 0.55 0.55 2012年 1.57 966 628 0.65 0.55 2013年 1.57 966 628 0.65 0.55 2014年 1.57 966 628

echarts 动态生成多条折线图和动态获得x轴并于数字相对应

function drawZXT(id, data) {    myChart = echarts.init(document.getElementById(id));    option = {        title: {            text: '流量计折线图',            //subtext: '纯属虚构'        },        tooltip: {            trigger: 'axis',            axisPointer:

深入浅出ECharts系列 (二) 折线图

深入浅出ECharts系列(二) 目标 本次教程的目标是实现“折线图堆叠”折线,实现结果如图: 2. 准备工作 a)         首先下载ECharts插件,你可以根据自己的实际需求选择你想要下载的版本,也可以自己定制相应功能的版本,下面附上插件的下载地址: http://echarts.baidu.com/download.html 我们下载完整版为大家进行演示. 3. 正式开始 首先,我新建了一个MVC4项目,将下载的文件放到对应的位置: 然后新建一个控制器和对应的视图,添加对文件的引用

使用Echarts几分钟制作出折线图、饼图、柱状图等

ECharts,缩写来自Enterprise Charts. ECharts,不仅是国内关注度最高的开源项目,还是中国第一个也是目前唯一一个入选了Github Explorer Data Visualization板块的开源项目.这里咱们结合上篇提到的Bootstrap简单栅格框架,来做一个小小的布局.学以致用嘛.从来不喜欢赘述,直接上代码,一切的解释,请看代码注释: <script type="text/javascript" src="js/jquery.min.j

echarts入门基础,画折线图

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ transform: translate(50%,50%); -webkit-transform: translate(-50%,-50%); -moz-transform: transla

Echarts折线图的样式修改

option 内属性: //------------------------------------------------------------------------------------------------------------- legend: { data: ['提现人数'], align: 'left', left: 10 },//------------------------------------------------------------------------

HighCharts实现多数据折线图分列显示

HighCharts实现多数据折线图分列显示 BY ZYZ HighCharts是一个非常好用的web端画图插件,用起来非常方便,它的官方支持非常好,而且有中文API(不完全),画出来的图像也挺漂亮的.最近需要用HighCHarts绘制多数据展示对比的折线图,要求的效果类似下图. 这个图的特点是Y轴从大到小显示,多个X轴对应多个不同的折线,且每个X轴的刻度不同,每条折线的颜色也不同,且折线不交叉. 在官方的在线演示里找了许久,并没有发现可以实现这样效果的例子,虽然有多轴多折线显示的例子,但是折线

Matplotlib学习---用matplotlib画折线图(line chart)

这里利用Jake Vanderplas所著的<Python数据科学手册>一书中的数据,学习画图. 数据地址:https://raw.githubusercontent.com/jakevdp/data-CDCbirths/master/births.csv 准备工作:先导入matplotlib和pandas,用pandas读取csv文件,然后创建一个图像和一个坐标轴 import pandas as pd from matplotlib import pyplot as plt birth=p

百度推出的echarts,制表折线图柱状图饼图等的超级工具

一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts的简介: ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRen