简单介绍
工作中需要绘制公司的分时和日k，但是接口要自己找。于是我就使用了腾讯的接口调分时和日k数据，新浪的接口调股票基本信息。如股票名字、今日开盘价、昨日收盘价、当前价格等等。均价线目前还没有。
参考资料：
https://blog.csdn.net/m0_37992075/article/details/84288021
https://blog.csdn.net/luanpeng825485697/article/details/78442062?locationNum=5&fps=1
配置echarts遇到的问题
配置参数过程中，遇到的最大问题就是处理分时图的y轴坐标。如图，分时线涨幅计算是以前天收盘价为基准。为了能让前一天收盘价显示出来，折腾了我好久。
解决思路：
y轴上的数据是一个等差数列，要想让前一天收盘价展示出来，需要数列中含有它。
y轴坐标值主要与 max（y轴最大值）,min（最小值）,interval（分割间隔）有关。
所以我们根据已经有的数据赋值三个变量即可。
**已知数据：**前一天收盘价（baseNumber）
计算max、min:
通过Math.max.apply(),Math.min.apply()方法拿到已有数据中的最大最小成交价并计算出涨幅，对比最大和最小涨幅比取较大的值( handle_num() )，就可以计算出y轴目前需要的最高(max)和最低(min)范围。
var _minVal = Number(baseNumber-baseNumberhandle_num()).toFixed(2);
var _maxVal = (Number(baseNumber)+baseNumberhandle_num()).toFixed(2);
计算涨幅比后去求得的范围才是我们需要的，不直接取数组中最大最小值的原因是，最低价不一定小于baseNumber，如果今日开盘价全部高于baseNumber，图表绘制出来是错误的。用最大涨幅比计算的涵盖所有数据，较为可行。而且这样计算出来的，涨跌幅绝对值也一致。
计算interval:
interval 其实就是 折线图data的一个公差，套用an=a1+(n-1)d公式便可以计算出来。
由于y轴赋值min后，起点就会为min值，求公差时可以以 baseNumber 为 an，min 为a1，n为5。
这里n作用和splitNumber类似，但也不同，n的大小会影响y轴坐标密集程度，具体可根据数据大小调整。
yAxis 配置：
因为是双y轴，所以第二个配置中，min、max、interval 需要设置相同数值才能在同一水平线。
ps: 此图表的 双y轴，其实是绘制了两条折线，通过position偏移一条，并将折线宽度设置为0，因此两条y轴数值完全一样便于配置。涨幅比是通过axisLabel>formatter更改坐标轴的。
yAxis: [ //y轴
{
type: 'value',
min: _minVal,
max: _maxVal,
interval: _interval,
gridIndex: 0,
scale: true,
axisTick: { // 分割线 短
show: false
},
axisLine: {
lineStyle: {
color: borderColor,
}
},
axisPointer: {
show: true,
label: {
formatter: function (params) {
return (params.value).toFixed(2);
}
}
},
axisLabel: {
color:'#333',
formatter: format_y,
rich: {
red: {
color: 'red',
lineHeight: 10
},
green: {
color: 'green',
lineHeight: 10
}
}
},
z: 4,
splitLine: { //分割线设置
show: true,
lineStyle: {
type: 'dashed'
}
},
},{
scale: true,
gridIndex: 1,
min: _minVal,
max: _maxVal,
interval: _interval,
position: 'right',
z: 4,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: borderColor,
}
},
axisLabel: { //label文字设置
color: function (val) {
val = Number(val).toFixed(2)
if (val == baseNumber) {
return '#333'
}
return val > baseNumber ? upColor : downColor;
},
formatter: function (val) {
var resul = ratioCalculate(val, baseNumber);
return Number(resul).toFixed(2) + '%'
}
},
splitLine: { //分割线设置
show: false,
lineStyle: {
color: '#181a23'
}
},
axisPointer: {
show: true,
label: {
formatter: function (params) { //计算右边Y轴对应的当前价的涨幅比例
return ratioCalculate(params.value, baseNumber) + '%';
}
}
}
},{// 成交量的y轴配置
//...已省略
}
]
demo放在这里了 ❤，欢迎指正和交流。