ホームページ >ウェブフロントエンド >jsチュートリアル >echarts ダッシュボード設定グラフィックの例

echarts ダッシュボード設定グラフィックの例

零下一度
零下一度オリジナル
2017-06-26 10:06:596162ブラウズ

echarts チャートでは、さまざまな意味を識別するためにさまざまな色の凡例を設定する必要がありますが、ダッシュボード上のポインターには 1 つの値しかありません。公式 Web サイトの設定項目にはこの機能がありません。さまざまなセグメント用に設定されています

axisLine->lineStyle->color; 多くの情報を検索しましたが、各色のセグメントを識別するために使用される凡例が見つかりませんでした。何度も繰り返しますが、凡例を使用できますか? 画像に凡例を強制的に追加するにはどうすればよいですか?

ここで echart に慣れている子供たちは解決策を思いついたかもしれません

それでは、「花を移して新しいアイデアを接ぎ木する」というトリックを使ってみましょう

主なアイデア: バーの凡例を使用します。グラフのレベルを設定し、ヒストグラムを非表示にし、凡例のクリック イベントを無効にします。

1.series には両方の設定項目があります。 'gauge' タイプと 'bar' タイプの設定項目、および 'bar' タイプの設定項目は凡例の色に注意するだけで済みます

2. のために非表示にする項目がたくさんあります。ヒストグラム、軸や分割線なども含めてすべて表示されないように設定する必要があります。

3. 奇妙な体験を防ぐには、凡例のクリックイベントを無効にするのが最善です。

最終的なレンダリングは次のとおりです、とてもシンプルですか?

以上がecharts ダッシュボード設定グラフィックの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。