Echarts分时图绘制

应为公司要做一个手机端的分时图，百度echats中只有折线图所以这边查看了api进行了些改造，有需要的可以私聊我。

首先可以参考echats中的折线图demo这边就不具体说明了

},
grid : [ {
left : '60',
right : '50',
top:'5',
} ],
xAxis : {
type : 'time',
splitLine : {
show : false
},
position : 'bottom',
splitNumber : 5,
axisLabel : {
interval : false,
formatter : function(value, index) {
// 格式化成月/日，只在第一个刻度显示年份
var date = new Date(value);
date = date.Format('hh:mm');
if (index > 0 && date == '23:59:59') {
date = "24:00";
}
return date;
}
}
},
yAxis : [
{
type : 'value',
position : 'left',
max : maxValue,
min : minValue,
interval : yAxisSpan,
splitLine : {
show : true
},
axisLabel : {
formatter : function(value, index) {
return value.toFixed(jindu);
},
textStyle : {
color : function(value, index) {
return getColor(value, lastClose);
}
}
}
},
{
type : 'value',
interval : yAxisSpan,
position : 'right',
max : maxValue,
min : minValue,
splitLine : {
show : false
},
axisLine : {
onZero : false
},
axisLabel : {
formatter : function(value, index) {
return ((value - lastClose) * 100 / lastClose)
.toFixed(jindu)
+ '%';
},
textStyle : {
color : function(value, index) {
return getColor(value, lastClose);
}
}
}
} ],
series : [ {
name : '模拟数据',
type : 'line',
showSymbol : false,
hoverAnimation : false,
smooth : 'spline',
itemStyle : {
normal : {
lineStyle : {
color : '#74C2D8'
}
}
},
areaStyle : {
normal : {
color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
offset : 0,
color : '#74C2D8'
}, {
offset : 1,
color : '#FFFFFF'
} ])
}
},
data : data
}, {
name : '.anchor',
type : 'line',
showSymbol : false,
data : anchor,
itemStyle : {
normal : {
opacity : 0
}
},
lineStyle : {
normal : {
opacity : 0
}
}
} ]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}

}

这里我是用websocket接收数据的，数据格式参考echarts的折线demo

demo改版已经上传了 https://download.csdn.net/download/zhanghuaikun/10409623

Echarts分时图绘制相关推荐

IOS端K线系列之分时图-绘制分时线和背景区域
k线系列目录查看目录请点击这儿本文是衔接上篇关于绘制分时图框的内容,如果你还不了解关于K线图.分时图的相关知识,可以点击这儿. 需求确定在上篇文章中,我们已经把分时图的框和坐标文字全部画好,如下 ...
在Vue3项目中使用 Echarts 绘制股票图表的分享（五）：分时图的基础上绘制出五日图
效果展示分析:五日图其实也就是展示了相当于五天的分时图的数据量:对比前面的分时图绘制效果,我们可以发现:它多出了对这五天内的现价做个最高价和最低价的标注,并且对最新时间段的现价数据做个闪烁点+涟漪特 ...
IOS端K线系列之分时图-整体搭建
k线系列目录查看目录请点击这儿提出问题记得曾经有一个脑筋急转弯: 问:如何把大象装进冰箱里? 答:总共分三步(1)把冰箱门开起来(2)把大象推进去(3)把冰箱门关上虽然是一个笑话,但是从另一种 ...
echarts 雷达图_【带着canvas去流浪】绘制雷达图
使用原生canvasAPI绘制雷达图.(截图以及数据来自于百度Echarts官方示例库[查看示例链接]). 二. 重点提示雷达图绘制的看起来并不复杂,无非就是一些路径点的连线,其中的难点都在于一些细 ...
基于AChartEngine绘制股票走势图----分时图一(走势柱状)
概述(项目地址:https://github.com/JiangYueA/android_aps) 使用AChartEngine实现股票分时.五日.k线图,分时图主要有均线,时价的走势和成交量的柱状图 ...
软件设计模式（观察者模式）——模拟股票价格变动并绘制分时图和K线图
一.观察者模式简介: 首先看百度百科上对观察者模式的简介:观察者模式(Observer)完美的将观察者和被观察的对象分离开.举个例子,用户界面可以作为一个观察者,业务数据是被观察者,用户界面观察业务数 ...
Echarts动态饼状图，柱形图，关系图绘制
1 饼状图代码(动态) //echarts图var chrNumber =[];var chrnum=[];for (var i=0;i<data.chrNum.length;i++){//通过 ...
用python画股票分时图 github_用python的matplotlib和numpy库绘制股票K线均线和成交量的整合效果（含量化验证交易策略代码）...
在用python的matplotlib和numpy库绘制股票K线均线的整合效果(含从网络接口爬取数据和验证交易策略代码)一文里,我讲述了通过爬虫接口得到股票数据并绘制出K线均线图形的方式,在本文里,将 ...
vue+Echarts绘制K线图详解（一）----基本日K图绘制
目录 1 引入Echarts 1.1 安装 1.2 引入 1.3 基本使用 2 基础K线图 2.1 基础k线图 2.2 基础日k图 3 总结 1 引入Echarts 1.1 安装使用如下命令通过 n ...

Echarts分时图绘制

Echarts分时图绘制相关推荐

最新文章

热门文章