这章节将完成我们的分时图，并使用真实的数据来进行展示分时图。
一天的交易时间段分为上午的09:30~11:30，下午的13:00~15:00两个时间段，因为分时间段的关系，数据是不连续的，所以会先分为2个grid，上午的grid跟下午的grid，又因为分时图是由折线图跟柱状图来组成的，所以又把上下午的grid再一分为二，变成了4个grid，这也是为什么会分解成4个grid的原因。
先看看分时图的数据。
现在我们再重新看一下雪球的分时图
根路径的last_price指的是昨日收盘价，这个数值很重要，我们需要这个数值来建立一条基准线；然后items里面就是今天的交易数据了，current表示这一分钟应该取的价格，一般是指一分钟内最后一笔成交的价格，也是折线图的数据；volume则是这一分钟的成交量，也就是下方柱状图的数据；timestamp表示这是哪个时间的数据，我们用来作为x轴的数据。
将x轴的type设置成“time”。为了方便我们也把坐标轴的最大最小值设置成随数据的最大最小值，把max设置成"dataMax"，min设置成"dataMin"。
type: 'time',
max:'dataMax',
min:'dataMin'
y轴也是需要进行一些配置，已达到完全对称的效果，需要配置interval属性以及max，min属性。x轴的时间是已经固定了09:30~11:30,13:00~15:00，所以可以直接写死，但是y轴的价格是会波动的，所以这三个数值是要经过运算得来的。
我们先配置上方的折线图的y轴坐标轴线为9条，设置splitNumber属性为9即可，定义变量priceMax、priceMin、priceInterval（priceInterval表示价格的差值），以及左边的数据数组grid1Data，右边的数据数组grid3Data。（注：由于x轴的type修改成了'time'类型，所以去掉x轴的data属性）。下方的柱状图也是这样，下方的柱状图一共是3条坐标轴线，设置splitNumber属性为3即可，定义变量volumeMax，volumeMin，volumeInterval（volumeInterval表示价格的差值），以及左边的数据数组grid2Data，右边的数据数组grid4Data；柱状图每一条柱子的颜色设置方式为
color: function (params) {
// params.dataIndex 柱子的下标
return "#000";
}所以要新建两个数组volumeColor1，volumeColor2来存放柱子的颜色。接下来，我们要遍历我们拿到的分时图数据data，来组成我们需要的数据。
for(var i in data.data.items){
// 上午的数据
if(i < 121){
if(data.data.items[i].current > priceMax){
priceMax = data.data.items[i].current;
}
if(data.data.items[i].current < priceMin || priceMin == 0){
priceMin = data.data.items[i].current;
}
// 左上方折线图
grid1Data.push([data.data.items[i].timestamp,data.data.items[i].current]);
if(data.data.items[i].volume > volumeMax){
volumeMax = data.data.items[i].volume;
}
if(data.data.items[i].volume < volumeMin ){
volumeMin = data.data.items[i].volume;
}
if(i == 0){
if(data.data.items[i].current >= lastPrice){
volumeColor1.push(UP_COLOR);
}else{
volumeColor1.push(DOWN_COLOR);
}
}else{
if(data.data.items[i].current >= data.data.items[i-1].current){
volumeColor1.push(UP_COLOR);
}else{
volumeColor1.push(DOWN_COLOR);
}
}
// 左下方柱状图
grid2Data.push([data.data.items[i].timestamp,data.data.items[i].volume]);
}else{// 下午的数据
if(data.data.items[i].current > priceMax){
priceMax = data.data.items[i].current;
}
if(data.data.items[i].current < priceMin || priceMin == 0){
priceMin = data.data.items[i].current;
}
// 右上方折线图
grid3Data.push([data.data.items[i].timestamp,data.data.items[i].current]);
if(data.data.items[i].volume > volumeMax){
volumeMax = data.data.items[i].volume;
}
if(data.data.items[i].volume < volumeMin){
volumeMin = data.data.items[i].volume;
}
if(data.data.items[i].current >= data.data.items[i-1].current){
volumeColor2.push(UP_COLOR);
}else{
volumeColor2.push(DOWN_COLOR);
}
// 右下方柱状图
grid4Data.push([data.data.items[i].timestamp,data.data.items[i].volume]);
}
}遍历完成后，得到了价格的最大最小值，成交量的最大值，接下来还要处理一下价格的最大最小值，以达到对称的效果。列入，昨日收盘价是1，今日最高价是上涨了0.5块，最高价是1+0.5 = 1.5块，那么为了达到对称的效果，下方的价格线应该是1-0.5=0.5块。
// 重新计算价格的最大最小值，以达到对称的效果
if((lastPrice - priceMax) * -1 > (lastPrice - priceMin)){
priceMin = (lastPrice - ((lastPrice - priceMax)* -1));
}else{
priceMax =(lastPrice + (lastPrice - priceMin));
} priceInterval = (priceMax - lastPrice) / 4;
volumeInterval = volumeMax / 2;
重新计算了最大最小价格，并得到了价格的差值，成交量的差值，把这些数值设置到对应的位置上。第一个跟第三个grid的y轴属性max，min，interval分别设置成priceMax，priceMin，priceInterval；第二个跟第四个grid的y轴属性max，min，interval分别设置成volumeMax，0，volumeInterval。然后我们会发现，y轴上的值的小数位非常大，x轴上显示的是月日时分的格式，所以还要对这些显示的数值进行格式化。首先对y轴的数据进行格式化，左上方的y轴设置：
axisLabel:{
fontSize:10,
margin:0,
// y轴的数值向内显示
align:"left",
formatter: function (value, index) {
return value.toFixed(2);
},
color: function (value, index) {
// 中间基准线的数值为黑色
if(parseFloat(value).toFixed(2) == lastPrice){
return NORMAL_COLOR;
}
// 上涨区域的数字为红色
if(value > lastPrice){
return UP_COLOR;
}
// 下方下跌的数值为绿色
if(value < lastPrice){
return DOWN_COLOR;
}
}
},右上方的y轴的设置：
axisLabel:{
fontSize:10,
margin:0,
// y轴的数值向内显示
align:"right",
formatter: function (value, index) {
var persent = (value - lastPrice) / lastPrice;
persent = (persent < 0) ? persent * -1 : persent;
persent = persent * 100;
return persent.toFixed(2) + '%';
},
color: function (value, index) {
// 中间基准线的数值为黑色
if(parseFloat(value).toFixed(2) == lastPrice){
return NORMAL_COLOR;
}
// 上涨区域的数字为红色
if(value > lastPrice){
return UP_COLOR;
}
// 下方下跌的数值为绿色
if(value < lastPrice){
return DOWN_COLOR;
}
}
},下方的柱状图的y轴数值则隐藏不显示，只需要把第二个第四个grid的y轴的axisLabel.show设置成false即可
axisLabel:{
//设置显示坐标轴的数值为不显示
show:false
},然后重新对x轴的时间进行格式化成HH:mm的格式，只需要对第二个跟第四个grid的x轴进行配置即可。
第二个grid的x轴的配置
axisLabel: {
fontSize:12,
show: true,
color:'#888',
formatter: function (value) {
var a = echarts.format.formatTime('hh:mm', value);
if(a == "11:30"){
return "";
}
if(a == "09:30"){
return " 09:30";
}
return a;
}
},第四个grid的x轴的配置
axisLabel: {
fontSize:12,
show: true,
showMinLabel:false,
color:'#888',
formatter: function (value) {
var a = echarts.format.formatTime('hh:mm', value);
if(a == "13:00"){
return "11:30/13:00";
}
if(a == "15:00"){
return "15:00 ";
}
return a;
}
},接下来配置一下柱状图的柱子颜色。在series里找到柱状图的配置，对itemStyle进行配置即可。
第一个柱状图的配置
itemStyle:{
normal: {
color: function (params) {
return volumeColor1[params.dataIndex];
}
}
}第二个柱状图的配置
itemStyle:{
normal: {
color: function (params) {
return volumeColor2[params.dataIndex];
}
}
}最后我们把各个坐标轴的小尖刺，就是刻度值旁边的短线去掉。把各个坐标轴的axisTick.show设置成false即可。
axisTick:{show:false}做完这一步后，我们的代码就成了这样
// 雪球json数据 https://stock.xueqiu.com/v5/stock/chart/minute.json?symbol=SH000001&period=1d
var jsonData = '';
var data = JSON.parse(jsonData); // 第一个grid的数据（折线图）
var grid1Data = [];
// 第二个grid的数据（柱状图）
var grid2Data = [];
// 第三个grid数据（折线图）
var grid3Data = [];
// 第四个grid数据（柱状图）
var grid4Data = []; // 柱状图的颜色
// 柱状图的红绿规则比较麻烦，所以本次采用的规则则是根据价格的涨跌来区分
var volumeColor1 = [];
var volumeColor2 = []; var UP_COLOR = "#E24528";
var DOWN_COLOR = "#009933";
var NORMAL_COLOR = "#33353C"; var priceMax = 0,priceMin = 0,priceInterval = 0,volumeMax = 0,volumeMin = 0,volumeInterval = 0;
var lastPrice = data.data.last_close; initData(); function initData(){ for(var i in data.data.items){
// 上午的数据
if(i < 121){
if(data.data.items[i].current > priceMax){
priceMax = data.data.items[i].current;
}
if(data.data.items[i].current < priceMin || priceMin == 0){
priceMin = data.data.items[i].current;
}
// 左上方折线图
grid1Data.push([data.data.items[i].timestamp,data.data.items[i].current]); if(data.data.items[i].volume > volumeMax){
volumeMax = data.data.items[i].volume;
}
if(data.data.items[i].volume < volumeMin ){
volumeMin = data.data.items[i].volume;
} if(i == 0){ if(data.data.items[i].current >= lastPrice){
volumeColor1.push(UP_COLOR);
}else{
volumeColor1.push(DOWN_COLOR);
} }else{
if(data.data.items[i].current >= data.data.items[i-1].current){
volumeColor1.push(UP_COLOR);
}else{
volumeColor1.push(DOWN_COLOR);
} } // 左下方柱状图
grid2Data.push([data.data.items[i].timestamp,data.data.items[i].volume]); }else{// 下午的数据 if(data.data.items[i].current > priceMax){
priceMax = data.data.items[i].current;
}
if(data.data.items[i].current < priceMin || priceMin == 0){
priceMin = data.data.items[i].current;
}
// 右上方折线图
grid3Data.push([data.data.items[i].timestamp,data.data.items[i].current]); if(data.data.items[i].volume > volumeMax){
volumeMax = data.data.items[i].volume;
}
if(data.data.items[i].volume < volumeMin){
volumeMin = data.data.items[i].volume;
} if(data.data.items[i].current >= data.data.items[i-1].current){
volumeColor2.push(UP_COLOR);
}else{
volumeColor2.push(DOWN_COLOR);
} // 右下方柱状图
grid4Data.push([data.data.items[i].timestamp,data.data.items[i].volume]); }
} // 重新计算价格的最大最小值，以达到对称的效果
if((lastPrice - priceMax) * -1 > (lastPrice - priceMin)){
priceMin = (lastPrice - ((lastPrice - priceMax)* -1));
}else{
priceMax =(lastPrice + (lastPrice - priceMin));
} priceInterval = (priceMax - lastPrice) / 4;
volumeInterval = volumeMax / 2; setOptions();
} function setOptions(){ // 初始化一个echarts的对象
var chart = echarts.init(document.getElementById('charts')); // echarts折线图的配置项
var option = {
// grid
grid:[
// 第一个grid
{
top:10,// 图表的外边距
height:200,// 图表的高度
left:'0',
width:'50%',//因为是左右各一个图表，使用百分比的方式显得更方便，
},
// 第二个grid，第二个图表是在第一个图表的下方，所以要把它定位到底部
{
top:240,//设置上方的外边距是第一个图表的高度再加10，使用top是方便我们调整下方grid的高度
left:'0',
width:'50%',// 宽度与第一个图表一个大
height:100
},
// 第三个grid，第三个图表是在第一个图表的右方，所以要把它定位到右方
{
top:10,// 图表的外边距
left:'50%',//设置右边图表的左边距是第一个图表的大小，达到定位右边的效果
width:'50%',// 宽度与第一个图表一个大
height:200
},
// 第四个grid，第四个图表是在第三个图表的下方，所以要把它定位到底部
{
top:240,//设置上方的外边距是第三个图表的高度再加10，使用top是方便我们调整下方grid的高度
left:'50%',//设置右边图表的左边距是第三个图表的大小，达到定位右边的效果
width:'50%',// 宽度与第一个图表一个大
height:100
}
],
// 多个图表则会存在对个x轴y轴，所以这里的配置我们也换成数组的方式
// x轴配置，
xAxis:[
// 第一个grid的x轴属性
{ // 告诉echarts，这个第一个grid的x轴
gridIndex:0,
// 坐标轴是否留白
boundaryGap:false,
// x轴的刻度
axisTick:{show:false},
// x轴的刻度值
axisLabel:{show:false},
max:'dataMax',
min:'dataMin',
type: 'time',
axisLine:{
lineStyle:{
color:"#ECEEF2"
}
},
splitLine:{
lineStyle:{
color:"#ECEEF2",
// 设置线条喂风格为虚线
type:"dashed"
}
},
},
// 第二个grid的x轴属性
{
// 告诉echarts，这个第一个grid的x轴
gridIndex:1,
// 坐标轴是否留白
boundaryGap:false,
// x轴的刻度
axisTick:{show:false},
max:'dataMax',
min:'dataMin',
type: 'time',
axisLabel: {
fontSize:12,
show: true,
color:'#888',
formatter: function (value) {
var a = echarts.format.formatTime('hh:mm', value);
if(a == "11:30"){
return "";
}
if(a == "09:30"){
return " 09:30";
}
return a;
}
},
axisLine:{
lineStyle:{
color:"#ECEEF2"
}
},
splitLine:{
lineStyle:{
color:"#ECEEF2",
// 设置线条喂风格为虚线
type:"dashed"
}
},
},
// 第三个grid的x轴属性
{
// 告诉echarts，这个第一个grid的x轴
gridIndex:2,
// 坐标轴是否留白
boundaryGap:false,
// x轴的刻度
axisTick:{show:false},
// x轴的刻度值
axisLabel:{show:false},
type: 'time',
max:'dataMax',
min:'dataMin',
axisLine:{
lineStyle:{
color:"#ECEEF2"
}
},
splitLine:{
lineStyle:{
color:"#ECEEF2",
// 设置线条喂风格为虚线
type:"dashed"
}
},
},
// 第四个grid的x轴属性
{
// 告诉echarts，这个第一个grid的x轴
gridIndex:3,
// 坐标轴是否留白
boundaryGap:false,
// x轴的刻度
axisTick:{show:false},
type: 'time',
max:'dataMax',
min:'dataMin',
axisLabel: {
fontSize:12,
show: true,
showMinLabel:false,
color:'#888',
formatter: function (value) {
var a = echarts.format.formatTime('hh:mm', value);
if(a == "13:00"){
return "11:30/13:00";
}
if(a == "15:00"){
return "15:00 ";
}
return a;
}
},
axisLine:{
lineStyle:{
color:"#ECEEF2"
}
},
splitLine:{
lineStyle:{
color:"#ECEEF2",
// 设置线条喂风格为虚线
type:"dashed"
}
},
}
],
// y轴配置
yAxis: [
// 第一个grid的y轴属性
{
// 去掉刻度值旁边的指示线
axisTick:{show:false},
splitNumber:9,
gridIndex:0,
interval:priceInterval,
max:priceMax,
min:priceMin,
splitLine:{
lineStyle:{
color:"#ECEEF2",
// 设置线条喂风格为虚线
type:"dashed",
}
},
axisLine:{
lineStyle:{
color:"#ECEEF2"
}
},
axisLabel:{
fontSize:10,
margin:0,
// y轴的数值向内显示
align:"left",
formatter: function (value, index) {
return value.toFixed(2);
},
color: function (value, index) { // 中间基准线的数值为黑色
if(parseFloat(value).toFixed(2) == lastPrice){
return NORMAL_COLOR;
} // 上涨区域的数字为红色
if(value > lastPrice){
return UP_COLOR;
} // 下方下跌的数值为绿色
if(value < lastPrice){
return DOWN_COLOR;
} }
},
},
// 第二个grid的y轴属性
{
// 去掉刻度值旁边的指示线
axisTick:{show:false},
splitNumber:3,
gridIndex:1,
interval:volumeInterval,
max:volumeMax,
min:0,
splitLine:{
lineStyle:{
color:"#ECEEF2",
// 设置线条喂风格为虚线
type:"dashed"
}
},
axisLine:{
lineStyle:{
color:"#ECEEF2"
}
},
axisLabel:{
//设置显示坐标轴的数值为不显示
show:false
},
},
// 第三个grid的y轴属性
{
// 去掉刻度值旁边的指示线
axisTick:{show:false},
splitNumber:9,
position:'right',
gridIndex:2,
interval:priceInterval,
max:priceMax,
min:priceMin,
splitLine:{
lineStyle:{
color:"#ECEEF2",
// 设置线条喂风格为虚线
type:"dashed"
}
},
axisLine:{
lineStyle:{
color:"#ECEEF2"
}
},
axisLabel:{
fontSize:10,
margin:0,
// y轴的数值向内显示
align:"right",
formatter: function (value, index) {
var persent = (value - lastPrice) / lastPrice;
persent = (persent < 0) ? persent * -1 : persent;
persent = persent * 100; return persent.toFixed(2) + '%';
},
color: function (value, index) { // 中间基准线的数值为黑色
if(parseFloat(value).toFixed(2) == lastPrice){
return NORMAL_COLOR;
} // 上涨区域的数字为红色
if(value > lastPrice){
return UP_COLOR;
} // 下方下跌的数值为绿色
if(value < lastPrice){
return DOWN_COLOR;
} }
},
},
// 第四个grid的y轴属性
{
// 去掉刻度值旁边的指示线
axisTick:{show:false},
splitNumber:3,
position:'right',
gridIndex:3,
interval:volumeInterval,
max:volumeMax,
min:0,
axisLabel:{
//设置显示坐标轴的数值为不显示
show:false
},
splitLine:{
lineStyle:{
color:"#ECEEF2",
// 设置线条喂风格为虚线
type:"dashed"
}
},
axisLine:{
lineStyle:{
color:"#ECEEF2"
}
},
}
],
// 数据可以通过xAxisIndex，yAxisIndex属性，来指定是哪个grid的数据
series: [
// 第一个图表的数据
{
// 平滑曲线
smooth:true,
// 是否显示折线上的圆点
symbol:'none',
// 线条颜色
lineStyle:{
color:"#0481F8",
width:1
},
xAxisIndex:0,
yAxisIndex:0,
data: grid1Data,
type: 'line',
},
// 第二个图表的数据
{
xAxisIndex:1,
yAxisIndex:1,
// 柱状图柱子宽度
barWidth:1,
data: grid2Data,
type: 'bar',
// 设置柱状图颜色
itemStyle:{
normal: {
color: function (params) {
return volumeColor1[params.dataIndex];
}
}
}
},
// 第三个图表的数据
{
// 平滑曲线
smooth:true,
// 是否显示折线上的圆点
symbol:'none',
// 线条颜色
lineStyle:{
color:"#0481F8",
width:1
},
xAxisIndex:2,
yAxisIndex:2,
data: grid3Data,
type: 'line',
},
// 第四个图表的数据
{
xAxisIndex:3,
yAxisIndex:3,
// 柱状图柱子宽度
barWidth:1,
data: grid4Data,
type: 'bar',
// 设置柱状图颜色
itemStyle:{
normal: {
color: function (params) {
return volumeColor2[params.dataIndex];
}
}
}
}
]
}; chart.setOption(option); }
效果图如下：
我们的分时图已经基本完成了，但是我们还是能看到11:30/13:00这里有一段是没有连接上的，因为是两个图表的原因所以会断开，这个将在下一章修正。下一章我们将添加图表的一些指示器，修正一些小问题。