鍍金池/ 問(wèn)答/HTML/ echarts怎么實(shí)現(xiàn)如百度股票這樣的效果

echarts怎么實(shí)現(xiàn)如百度股票這樣的效果

clipboard.png
clipboard.png
如何實(shí)現(xiàn)這樣的兩個(gè)提示組件,且圖1一直顯示,圖2的詳細(xì)信息只有在鼠標(biāo)移動(dòng)的時(shí)候顯示。跪求指教

回答
編輯回答
下墜

http://echarts.baidu.com/exam... 官網(wǎng)不是有實(shí)例? 圖2就是提示的組件,也是有的,文檔都寫(xiě)得挺詳細(xì)的

2018年2月6日 10:13
編輯回答
懶洋洋

自問(wèn)自答一波,查看了echarts 官方文檔,legend不能做到實(shí)時(shí)更新數(shù)據(jù)的功能,參看了百度股票的源代碼,他們直接實(shí)用的 canvas 來(lái)進(jìn)行繪制的,以下為百度 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)
},
2018年6月25日 08:05