Echarts3（百度）着色ラウンド

Question

Echarts3（百度）ツールチップに着色ラウンド

ツールヒントは、このように、グラフと同じ色のラウンドを有していますしかし、私がツールチップをカスタマイズすると、この例のように丸で色分けされたコードが削除されます：

https://ecomfe.github.io/echarts/doc/example/tooltip.html#-en

カスタムツールチップを使用して色を丸く戻す方法はありますか？ここで

それを説明する別の方法です。 このリンクにアクセス pie-simple と色のついたラウンドのないチャートが見つかります。リフレッシュするために、あなたがラウンドをバック表示されます> <运行を押し

formatter: "{a} <br/>{b} : {c} ({d}%)" 

：

は、次の行を削除します。

Answer 1

これを解決する1つの方法は、例えば、あなたのツールチップのフォーマッタでカスタムHTMLを返すことです：

var formatTooltipLine = function(color){ 
    return "<span style='display:inline-block;width:10px;height:10px;border-radius:50%;background-color:"+color+";margin-right:5px;'></span><span>line text</span>" 
} 

var formatter = function(){ 
    // custom title 
    var lines = ["<b>2016</b>"]; 

    // custom lines 
    ["red", "orange"].forEach(function(color){ 
     lines.push(formatTooltipLine(color)); 
    }); 

    return lines.join("<br>"); 
} 

例： https://cdn.datamatic.io/runtime/echarts/3.3.0_61/view/index.html#id=117670017722819924657/0B3wq5VFn9PllSEVsQTJvcnVBZU0

Answer 2

EChartsサポートユーザ定義のツールチップは、あなたが望んでいた色が含まれます。

たとえば、折れ線グラフのデモlike thisがあり、デフォルトのツールチップを変更したい場合は、%などのツールチップを追加して、デフォルトのcolorを失うことなく追加してください。ツールチップコードを下のコードに置き換えてください。このツールチップのコードで

tooltip : { 
    trigger: 'axis', 
    axisPointer: { 
     animation: true 
    }, 
    formatter: function (params) { 
     var colorSpan = color => '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + '"></span>'; 
     let rez = '<p>' + params[0].axisValue + '</p>'; 
     //console.log(params); //quite useful for debug 
     params.forEach(item => { 
      //console.log(item); //quite useful for debug 
      var xx = '<p>' + colorSpan(item.color) + ' ' + item.seriesName + ': ' + item.data + '%' + '</p>' 
      rez += xx; 
     }); 

     return rez; 
    }   
}, 

、あなたがオリジナルのツールチップcolor 邮件营销: 90がcolor 邮件营销: 90%になるでしょう、私たちは、ツールヒントに自己定義%を追加します。