How to use echarts to display dynamic data on nodes and add prompt text

This time I will show you how to use echarts to display dynamic data and add prompt text on nodes. What are the precautions on how to use echarts to display dynamic data and add prompt text on nodes. The following is a practical case. Let’s take a look.

1. Each node displays dynamic data. This can actually be completed through configuration items. In seriesData binding, it can be completed using the label formatting in the original configuration item itemStyle. As follows:

The code is as follows. If you need to modify the text display style, you need to configure additional items (such as font-style, font-weigth, etc.) Complete

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

2. Some customers will put forward other requirements. While the polyline displays the highest value and the lowest value, the meaning of the polyline needs to be added to the end of the polyline. This can also be done through itemStyle, but When formatter formats text prompts, you need to write a function yourself to perform formatting judgment and then display

.

The code is as follows:

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

I believe you have read the case in this article After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!

Recommended reading:

How to use Vue to implement a countdown button

How to use Vue to write a two-way data binding

The above is the detailed content of How to use echarts to display dynamic data on nodes and add prompt text. For more information, please follow other related articles on the PHP Chinese website!