echarts を使用してノード上に動的データを表示し、プロンプト テキストを追加する方法

今回は、echarts を使用してノード上に動的データを表示し、プロンプト テキストを追加する方法を説明します。 echarts を使用してノード上に動的データを表示し、プロンプト テキストを追加する場合の 注意事項 について説明します。見て。

1. 各ノードは動的データを表示します。これは実際には構成アイテムを通じて完了できます。

データ バインディングでは、次のように元の構成アイテム itemStyle のラベルの書式設定を使用して完了できます。以下のように、テキストの表示スタイルを変更する必要がある場合は、追加の設定項目 (font-style

、font-weigth など) を完了する必要があります。

{
      name: '其中：少数民族',
      type: 'line',
      data: ssmz,
      markPoint : {
        data : [
          {type : 'max', name: '最大值'},
          {type : 'min', name: '最小值'}
        ]
      },
      itemStyle: {//节点数据显示
        normal: {
          label: {
            show: true,
            position: 'right',
            formatter: ssmz,//该值动态显示数据，若需固定的文本，则直接写入
          }
        }
      }
    },

2.ポリラインの最高値と最低値同時に、ポリラインの末尾にポリラインの意味を追加する必要があります。ただし、これは、フォーマッタがテキスト プロンプトをフォーマットするときに行うこともできます。形式を決定して

. コードを表示するには、自分で関数を作成する必要があります。次のように:

{
      name: '合计',
      type: 'line',
      data: hj,
      markPoint : {
        data : [
          {type : 'max', name: '最大值'},
          {type : 'min', name: '最小值'}
        ],
      },
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: 'right',//居右
            offset:[20,0],//横向往右20
            formatter: function(para){//格式化提示文本
            if(para.value == hj[hj.length-1]){
            return '合计';//显示文本
            }else{
            return '';
            }
            }
          }
        }
      }
    },

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、次の点に注意してください。その他の関連記事は php 中国語 Web サイトにあります。

推奨書籍:

Vue を使用してカウントダウン ボタンを実装する方法

Vue を使用して双方向データ バインディングを作成する方法

以上がecharts を使用してノード上に動的データを表示し、プロンプト テキストを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。