使用echarts制作K线图鼠标滑过蜡烛图时候显示中文标题的最低价最高价设置

时间:2021-07-25
本文章向大家介绍使用echarts制作K线图鼠标滑过蜡烛图时候显示中文标题的最低价最高价设置,主要包括使用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版本问题,看一下版本是否支持该功能

原文地址:https://www.cnblogs.com/shanshanjiadexiaohai/p/15057311.html