tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
borderWidth: 1,
borderColor: '#ccc',
padding: 10,
textStyle: {
color: '#000'
},
position: function (pos, params, el, elRect, size) {
const obj = {
top: 10
};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
}
// extraCssText: 'width: 170px'
},
这里 position 里 默认 字段名是 open close MA5 MA10 ,能不能自己命名,
并且加振幅字段, 振幅:hightest / lowest?
到底要怎么做?
怎么感觉是写死的
代码怎么看?
回答:数据是可以改变的,字段名字也很好改变,就是这个open、close需要花点心思实验一下,动手一下,可以看看官方文档里面的配置项和例子;
参考文章:https://www.cnblogs.com/steamed-twisted-roll/p/14368766.html
实例效果:
选择路径重写解决官方示例里jquery的跨域问题:
测试项目下载:https://gitee.com/anxwefndu/echarts-drawing-example
推荐该项目,可进行绘图学习:https://gitee.com/anxwefndu/stock-prediction-system
https://blog.csdn.net/tenc1239/article/details/131614239?spm=1001.2014.3001.5502
不知道你这个问题是否已经解决, 如果还没有解决的话:option = {
...
tooltip: {
formatter: function (params) {
var customTooltip = '<b>' + params[0].name + '</b><br>';
customTooltip += '开盘价: ' + params[0].data[0] + '<br>';
customTooltip += '收盘价: ' + params[0].data[1] + '<br>';
customTooltip += 'MA5: ' + params[0].data[2] + '<br>';
customTooltip += 'MA10: ' + params[0].data[3] + '<br>';
var highest = Math.max.apply(Math, params.map(function(o) { return o.data[1]; }));
var lowest = Math.min.apply(Math, params.map(function(o) { return o.data[0]; }));
var amplitude = highest - lowest;
customTooltip += '振幅: ' + amplitude + '<br>';
return customTooltip;
},
...
},
...
};
以上是一个vue echarts绘制k线图的示例,其中我们通过formatter函数自定义了tooltip提示框的字段名,并且计算了振幅字段。在tooltip的formatter函数中,我们首先拼接了一个包含了股票名称的标题行,然后追加了自定义的字段名和相应的数值。
对于振幅字段的计算,我们通过使用Math.max和Math.min方法遍历params数组中的所有数据项,取得最高价和最低价,然后将它们相减得到振幅。
最后,我们将拼接好的自定义tooltip返回,它将在鼠标悬浮在k线图上时显示出来。
希望以上的代码能够帮助你实现自定义字段名和添加振幅字段的需求。如果你有任何其他的问题或需要进一步的帮助,都可以随时告诉我。