Echarts 动态加载数据,自定义提示框

最新推荐文章于 2024-03-21 14:45:39 发布

原创最新推荐文章于 2024-03-21 14:45:39 发布 · 626 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何在Echarts中实现动态加载数据以及自定义提示框的功能。首先，讲解了自定义提示框的配置与实现，接着详细探讨了动态加载数据的两种方式，包括数据加载格式和动态数据加载的具体步骤，为Echarts图表的实时更新提供了实用指南。

1.自定義提示框

tooltip: {
          // 触发器
          trigger: "axis",
          axisPointer: {
            type: 'shadow',
        },
        formatter:function(params){
          console.log(params,"43434343")
          let a=[];
          for(let i=0;i<params.length;i++){
            // console.log(params[i].seriesName,"5555555333333333")
            a.push(params[i].color,params[i].seriesName+": "+params[i].data+"%"+"<br>");
          }
          return a;
        }
        },

2.動態加載數據

1.數據的加載格式

series: 
        [
          {
            label: {
              normal: {
                  show: true,
                  formatter:"{c}%",
                  textStyle: {
                    color: 'black'
                  }
              }
          },
            name: group[0],
            type: "line",
            data: data2,
          },
          {
            label: {
              normal: {
                  show: true,
                  formatter:"{c}%",
                  textStyle: {
                    color: 'black',
                  }
              }
          },
            name: group[1],
            type: "line",
            data: data3,
          },
          {
            label: {
              normal: {
                  show: true,
                  formatter:"{c}%",
                  textStyle: {
                    color: 'black',
                  }
              }
          },
            name: group[2],
            type: "line",
            data: data5,
          },
        ],

2.動態數據加載

series: function () {
          var series = [];
          for (var i = 0; i < group.length; i++) {
            var item = {
              label: {
                normal: {
                  // show: true,
                  formatter: "{c}%",
                  textStyle: {
                    color: 'black'
                  }
                }
              },
              itemStyle:{
                normal : {
                  lineStyle:{
                      width:1,//折线宽度
                  }
              }
              },
              name: group[i],
              type: "line",
              data: a[i],
              symbolSize: 6,
            }
            series.push(item);
          };
          return series;
        }()

3.數據的加載格式

 series: [{
          name: "人力佔比",
          // 图表类型
          type: "pie", // 饼图
          radius:'58%',
          // 图表的中心坐标
          center: ["50%", "50%"],
          data: [
            {
              value: a[1],
              name: "A"
            },
            {
              value: a[3],
              name: "S"
            },
            {
              value: a[4],
              name: "D"
            },
          ],
          color: ['#67e2dd','#49a1ff','#6c77f6'],
          itemStyle: {
            normal: {
              label: {
                show: true,
                formatter: '({d}%) \n'
              },
              labelLine: {
                show: true
              }
            },
            emphasis: {
              shadowBlur: 20,
              // 陰影的橫向偏移
              shadowOffsetX: 0,
              // 阴影颜色
              shadowColor:"rgba(0, 0,0, 0.2)"
            }
          },
          // 动画效果
          animationType: "scale",
          animationEasing: "elasticOut",
          animationDelay: function (idx) {
            return Math.random() * 200;
          }
        }]

4.動態數據加載

  series: function () {
         var gd1=["A","s","D","F"];
          var series = [];
          var w=[];
            for (var i = 0; i < _this.aa.gd1.length; i++) {
              var item = {
                // 图表类型
          type: "pie", // 饼图
          radius:'50%',
          // 图表的中心坐标
          center: ["48%", "50%"],
          data: [],
          color:["#ff4c4a","#b28850","#0cc888","#f19ec2","#ff9018","#9257ff","#1bd4cd","#ffc016","#0ea7ff","#5650d5"],
          itemStyle: {
            normal: {
              label: {
                show: true,
                formatter: '({d}%) \n'
              },
              labelLine: {
                show: true
              }
            },
            emphasis: {
              shadowBlur: 20,
              // 陰影的橫向偏移
              shadowOffsetX: 0,
              // 阴影颜色
              shadowColor:"rgba(0, 0,0, 0.2)"
            }
          },
          // 动画效果
          animationType: "scale",
          animationEasing: "elasticOut",
          animationDelay: function (idx) {
            return Math.random() * 200;
          }
              }
               w[i]=
              {
                value: _this.aa.total[i],
                name: dataType[i]
              },
              item.data=w;
              series.push(item);
            };
            // console.log(item.data,w,"_______________")
          
          return series;
        }()