使用echarts制作K线图鼠标滑过蜡烛图时候显示中文标题的最低价最高价设置
var option = { legend: { data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'], inactiveColor: '#777', textStyle: { color: '#fff' } }, tooltip: { trigger: 'axis', axisPointer: { animation: false, type: 'cross', lineStyle: { color: '#376df4', width: 2, opacity: 1 } }, axisPointer: { type: 'cross' }, formatter: function (params) {//修改鼠标划过显示为中文 let ma5=params[1].data;//ma5的值 let ma10=params[1].data;//ma10的值 let ma20=params[1].data;//ma20的值 let ma30=params[1].data;//ma30的值 params = params[0];//开盘收盘最低最高数据汇总 let currentItemData = params.data; return params.name + '<br>' + '开盘:' + currentItemData[1] + '<br>' + '收盘:' + currentItemData[2] + '<br>' + '最低:' + currentItemData[3] + '<br>' + '最高:' + currentItemData[4] + '<br>' + 'MA5日均线:' + ma5 + '<br>' + 'MA10日均线:' + ma10 + '<br>' + 'MA20日均线:' + ma20 + '<br>' + 'MA30日均线:' + ma30 } }, xAxis: { type: 'category', data: dates, axisLine: { lineStyle: { color: '#8392A5' } } }, yAxis: { scale: true, axisLine: { lineStyle: { color: '#8392A5' } }, splitLine: { show: false } }, grid: { bottom: 80 }, dataZoom: [{ textStyle: { color: '#8392A5' }, handleSize: '80%', dataBackground: { areaStyle: { color: '#8392A5' }, lineStyle: { opacity: 0.8, color: '#8392A5' } }, handleStyle: { color: '#fff', shadowBlur: 3, shadowColor: 'rgba(0, 0, 0, 0.6)', shadowOffsetX: 2, shadowOffsetY: 2 } }, { type: 'inside' }], }
效果如下
主要要注意的就是
tooltip里的formatter配置项,如果写了还是不显示为中文的那么可能是echart版本问题,看一下版本是否支持该功能