Comment utiliser des graphiques électroniques pour afficher des données dynamiques sur les nœuds et ajouter un texte d'invite

Cette fois, je vais vous montrer comment utiliser les echarts pour afficher des données dynamiques sur les nœuds et ajouter un texte d'invite. Quelles sont les précautions pour utiliser des echarts pour afficher des données dynamiques sur les nœuds et ajouter un texte d'invite. cas pratiques.

1. Chaque nœud affiche des données dynamiques. Cela peut en fait être fait via des éléments de configuration en sérieliaison de données, vous pouvez utiliser le formatage de l'étiquette dans l'élément de configuration d'origine itemStyle pour compléter. le code est le suivant :

Le code est le suivant : Si vous devez modifier le style d'affichage du texte, vous devez configurer des éléments supplémentaires (tels que font-. style, poids de la police, etc.) Compléter

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

2. Certains clients mettront en avant d'autres exigences. Tandis que la polyligne affiche la valeur la plus élevée et la valeur la plus basse, la signification de la polyligne doit être définie. à ajouter à la fin de la polyligne. Cela peut également être complété via itemStyle , mais lorsque le formateur formate l'invite de texte, vous devez écrire une fonction vous-même pour effectuer un jugement de formatage, puis afficher

.

Le code est le suivant :

{
      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 '';
            }
            }
          }
        }
      }
    },

Je crois l'avoir lu Vous maîtrisez la méthode dans le cas de cet article Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site php chinois !

Lecture recommandée :

Comment utiliser Vue pour implémenter un bouton de compte à rebours

Comment utiliser Vue pour écrire un deux liaison de données -way

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!