echarts ノードには動的データの実装手順が表示されます

php中世界最好的语言
リリース: 2018-04-27 14:58:34
オリジナル
3013 人が閲覧しました

今回は、echarts ノードで動的データ表示を実装する手順をお届けします。動的データを表示する際の echarts ノードでの 注意事項 は何ですか? 以下は実際的なケースです。

私は echarts を使用中に 2 つの問題に遭遇しました。 1. 各ノードは実際に設定項目

データ バインディング

を使用して実行できます。以下のように itemStyle での書式設定が完了します。

コードは次のとおりです。テキストの表示スタイルを変更する必要がある場合は、追加の項目 (

font-style

、font-weigth など) を設定する必要があります。 .)

2 を完了するには、ポリラインが最高値と最低値を表示している間に他の要件を提示する場合もありますが、これはポリラインの最後に追加する必要があります。 itemStyle を使用しますが、フォーマッタがテキスト プロンプトを書式設定する場合、書式判定を行って表示する関数を自分で記述する必要があります

コードは次のとおりです:

{
      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 サイトの他の関連記事に注目してください。

推奨読書:

ツリー構造を実装するためのJSデコレーター関数の使用の詳細な説明


vue.js+element-ui

以上がecharts ノードには動的データの実装手順が表示されますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!