关于 Echarts K线图 tooltip '指示器'

• 我今天的工作内容中有一项是渲染k线图的真实数据。
• 其中有一项确实困扰了我很久,就是--我不知道怎么设置它的--指示器--tooltip--,它的 series 字段中的 data 是数组套数组,也就是二维数组。data数组中的每一项都有至少4个。
• 跟我工作相关的是： -开盘 -最高价 -最低价 - 收盘 -销量 ；它的 xAxis 中的data是与 系列中的数据对应的小标题。
• 本人还是很乐意学一些新东西的,但是一看要想配置指定的样式,它的示例图里面竟然还有函数,瞬间头大 , 眼花,行吧,还能怎么办呢,逼自己看咯。

我的难点指的是如何配置指示器 tooltip :

• 啊哈! 就是将上面白色的且是英文的标题,显示为上面的-日期:...开盘:...等等;

它的配置项名称是 formatter

• 它可以接受 字符串 或者 函数 作为它的参数, 像我这么懒得人,第一时间看字符串

formatter 的字符串参数 [k线图]

• 如下表,他确实有{a}, {b}, {c}...

• 我在编辑的时候是按照这样写的:

       title:{
           text:'大标题',
           subtext:'小标题/副标题'
       },// 等等很多,不写也可以
       xAxis:{
           data:['2013-1','2013-2','...']
       },
       series:{
           type:'',
           data:[
               [23,65,85,96],
               [66,88,99,369],
               ['....']
           ],
           //....
       },
       tooltip:{
           trigger:'axis',// 决定指示器类型的,有些类型要配合一定的图表才能展示
           formatter:` 名字:{a}<br/>
                       类目值:{b}<br/>
                       数值:{c}<br/>
                       `,// 类目值/小标题或者说分布在x轴上值的名称 {d}没有实验
       }
   }

----它呈现出来的效果是-

• 这样子的,就-不理想, 我在意的点是数值是一并现实的,虽然他下面又说可以写 {c0} --{c1 }的方式用数字表示索引,但是我只能显示一串,而非一个, {c0}显示 23,65,85,96 {c1}显示 1 23,65,85,96,也就是他没有识别出来1,因此将1当做字符串而非 代号(或者关键字);

formatter 函数写法:

    option:{
        title:{
            text:'大标题',
            subtext:'小标题/副标题'
        },// 等等很多,不写也可以
        xAxis:{
            data:['2013-1','2013-2','...']
        },
        series:{
            type:'',
            data:[
                [23,65,85,96],
                [66,88,99,369],
                ['....']
            ],
            //....
        },
        tooltip:{
            trigger:'axis',// 决定指示器类型的,有些类型要配合一定的图表才能展示
            formatter(params){
                // return `
                //  开盘:${params[0]}
                // `
                return `
                    开盘:${params[1]}<br/>
                    最高值:${params[2]}<br/>
                    最低值:${params[3]}<br/>
                    收盘:${params[4]}<br/>
                `
            },  // 按一般规律来说params[0]应该是
                // series.data每一项数组里的第一个
                // 但它是索引
        }
    }

好了! 是不是很简单呢,嘿嘿..

我忘记函数写法是不是要开启 HTML 字段了,写好不出效果可以设置一下 renderMode 为 ' html '--它是 tooltip 的子级 .