echarts怎么实现如百度股票这样的效果

Question

如何实现这样的两个提示组件，且图1一直显示，图2的详细信息只有在鼠标移动的时候显示。跪求指教

Answer 1

自问自答一波，查看了echarts 官方文档，legend不能做到实时更新数据的功能，参看了百度股票的源代码，他们直接实用的 canvas 来进行绘制的，以下为百度 MA5 那一行的绘制代码

drawCurMa: function(t, i, e) {

    t = "MA5 " + (t ? t.toFixed(2) : "--"),

    i = "MA10 " + (i ? i.toFixed(2) : "--"),

    e = "MA20 " + (e ? e.toFixed(2) : "--");

    var s = this.ctx.measureText(t).width,

        h = this.ctx.measureText(i).width,

        n = this.ctx.measureText(e).width,

        a = this.axes[0][0] + 1,

        o = this.axes[1][0] + 1,

        l = 10,

        c = s + 3 * l + 45 + h + n;

    this.ctx.fillStyle = "rgba(255, 255, 255, 0.5)",

    this.ctx.fillRect(a, o, c, 1.5 * this.conf.fontSize),

    o += .75 * this.conf.fontSize,

    this.ctx.textAlign = "left",

    this.ctx.textBaseline = "middle",

    a += l,

    

    this.ctx.fillStyle = this.conf.ma5LineColor,

    this.ctx.beginPath(),

    this.ctx.arc(a + 5, o, 5, 0, 2 * Math.PI),

    this.ctx.fill(), 

    a += 15, 

    this.ctx.fillText(t, a, o), 

    a += s + l, 

    this.ctx.beginPath(), 

    this.ctx.fillStyle = this.conf.ma10LineColor, 

    this.ctx.arc(a + 5, o, 5, 0, 2 * Math.PI), 

    a += 15, this.ctx.fill(), 

    this.ctx.fillText(i, a, o), 

    a += h + l, 

    this.ctx.beginPath(), 

    this.ctx.fillStyle = this.conf.ma20LineColor, 

    this.ctx.arc(a + 5, o, 5, 0, 2 * Math.PI), 

    a += 15, 

    this.ctx.fill(), 

    this.ctx.fillText(e, a, o)

},