我的编程空间，编程开发者的网络收藏夹
学习永远不晚
位置：首页-资讯-前端开发

echart实现大屏动效示例详解

2022-11-13 14:31

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号
获取短信验证
立即预约

请填写图片验证码后获取短信验证码

看不清楚，换张图片

免费获取短信验证码

echart实现大屏动效示例详解

1.通过dataZoom实现柱状图动态前移效果

最近做大屏相关需求，产品说需要炫酷一点的效果，于是做了一些echart相关的动效

设置dataZoom当前缩放值，加定时器，实现轮播效果。

示例：

option = {
  color: ['#1E90FF', '#FFA500'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {}
  },
  grid: {
    left: 20,
    right: 20,
    bottom: 0,
    containLabel: true
  },
  legend: {
    data: [
      {
        name: '负载电量',
        itemStyle: {
          color: '#FAAD14'
        }
      },
      {
        name: '中央空调冷量',
        itemStyle: {
          color: '#01E6F5'
        }
      }
    ],
    textStyle: {
      color: '#fff'
    }
  },
  dataZoom: {
    type: 'inside'
  },
  xAxis: [
    {
      type: 'category',
      axisLabel: {
        margin: 20,
        textStyle: {
          color: '#fff'
        }
      },
      data: [
        '11:00',
        '12:00',
        '13:00',
        '14:00',
        '15:00',
        '16:00',
        '17:00',
        '18:00',
        '19:00',
        '20:00',
        '21:00',
        '22:00',
        '23:00',
        '00:00',
        '01:00',
        '02:00',
        '03:00',
        '04:00',
        '05:00',
        '06:00',
        '07:00',
        '08:00',
        '09:00',
        '10:00'
      ],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'kWh',
      nameTextStyle: {
        color: '#fff'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      },
      axisLabel: {
        margin: 20,
        textStyle: {
          color: '#fff'
        }
      }
    },
    {
      type: 'value',
      name: 'kWh',
      nameTextStyle: {
        color: '#fff'
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      },
      axisLabel: {
        margin: 20,
        textStyle: {
          color: '#d1e6eb'
        }
      }
    }
  ],
  series: [
    {
      name: '负载电量',
      type: 'bar',
      yAxisIndex: 0,
      itemStyle: {
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(250,173,20, 1)' },
            { offset: 0.5, color: 'rgba(250,173,20, 0.8)' },
            { offset: 1, color: 'rgba(250,173,20,0.5)' }
          ]
        }
      },
      tooltip: {
        valueFormatter(value) {
          if (typeof value === 'number') return value.toFixed(2) + 'kWh';
          else return '-';
        }
      },
      data: [
        0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
        0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0
      ]
    },
    {
      name: '中央空调冷量',
      type: 'bar',
      yAxisIndex: 1,
      itemStyle: {
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(1,230,245, 1)' },
            { offset: 0.5, color: 'rgba(1,230,245, 0.8)' },
            { offset: 1, color: 'rgba(1,230,245,0.5)' }
          ]
        }
      },
      tooltip: {
        valueFormatter(value) {
          if (typeof value === 'number') return value.toFixed(2) + 'kWh';
          else return '-';
        }
      },
      data: [
        0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.10333333333333333, 0.0, 0.0, 0.0,
        3.5133333333333336, 6.2, 6.2, 6.2, 6.2, 6.2, 6.2, 6.2, 6.2, 6.2, 6.2,
        2.2733333333333334, 0.0
      ]
    }
  ],
  func: (myChart, option) => {
    let start = 0,
        end = 7;
    option.dataZoom.startValue = option.xAxis[0].data[start]; //
    option.dataZoom.endValue = option.xAxis[0].data[end];
    myChart.setOption(option);
    if (this.electInterval) {
      clearInterval(this.electInterval);
    }
    this.electInterval = setInterval(function () {
      option.dataZoom.startValue = option.xAxis[0].data[start];
      option.dataZoom.endValue = option.xAxis[0].data[end];
      myChart.setOption(option);
      start += 1;
      end += 1;
      if (end >= option.xAxis[0].data.length) {
        end = 7;
        start = 0;
      }
    }, 5000);
  },
};
option.func(myChart, option)

2.叠加流光效果

多条曲线叠加，但注意，需要监听legendselectchanged事件，

option = {
  tooltip: {
    trigger: 'axis',
    show: true,
  },
  grid: {
    left: 20,
    right: 20,
    bottom: 0,
   containLabel: true,
  },
  dataZoom: {
       type: 'inside',
  },  legend: {
    textStyle: {
      color: '#fff',
      borderColor: '#fff'
    }
  },
 func: (myChart, option) => {
    // 修复无图表数据切换bug
    if (option.series[0].data.length <= 0 && option.series[1].data.length <= 0) {
      return;
    }
    option.series[2].data = option.series[0].data;
    option.series[3].data = option.series[0].data;
    option.series[4].data = option.series[1].data;
    option.series[5].data = option.series[1].data;
    // setTimeout修复初始加载动效没生效bug
    setTimeout(() => {
      myChart.clear();
      myChart.setOption(option);
    }, 100)
   
    if (this.loadInterval) {
      clearInterval(this.loadInterval);
    }
    this.loadInterval = setInterval(() => {
      myChart.clear();
      myChart.setOption(option);
    }, 6000);

    myChart.on('legendselectchanged', function (params) {
      let selectArr = Object.values(params.selected);

      option.series[2].data = option.series[0].data;
      option.series[3].data = option.series[0].data;
      option.series[4].data = option.series[1].data;
      option.series[5].data = option.series[1].data;

      if (!selectArr[0]) {
        option.series[2].data = [];
        option.series[3].data = [];
      }
      if (!selectArr[1]) {
        option.series[4].data = [];
        option.series[5].data = [];
      }
      myChart.setOption(option);
    });
  },  xAxis: [
    {
      type: 'category',
      boundaryGap: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      },
      axisLabel: {
        textStyle: {
          color: '#fff',
          margin: 15
        }
      },
      axisTick: {
        show: false
      },
      data: ['10:55','11:00','11:05','11:10','11:15','11:20','11:25','11:30','11:35','11:40','11:45','11:50','11:55','12:00','12:05','12:10','12:15','12:20','12:25','12:30','12:35','12:40','12:45','12:50','12:55','13:00','13:05','13:10','13:15','13:20','13:25','13:30','13:35','13:40','13:45','13:50','13:55','14:00','14:05','14:10','14:15','14:20','14:25','14:30','14:35','14:40','14:45','14:50','14:55','15:00','15:05','15:10','15:15','15:20','15:25','15:30','15:35','15:40','15:45','15:50','15:55','16:00','16:05','16:10','16:15','16:20','16:25','16:30','16:35','16:40','16:45','16:50','16:55','17:00','17:05','17:10','17:15','17:20','17:25','17:30','17:35','17:40','17:45','17:50','17:55','18:00','18:05','18:10','18:15','18:20','18:25','18:30','18:35','18:40','18:45','18:50','18:55','19:00','19:05','19:10','19:15','19:20','19:25','19:30','19:35','19:40','19:45','19:50','19:55','20:00','20:05','20:10','20:15','20:20','20:25','20:30','20:35','20:40','20:45','20:50','20:55','21:00','21:05','21:10','21:15','21:20','21:25','21:30','21:35','21:40','21:45','21:50','21:55','22:00','22:05','22:10','22:15','22:20','22:25','22:30','22:35','22:40','22:45','22:50','22:55','23:00','23:05','23:10','23:15','23:20','23:25','23:30','23:35','23:40','23:45','23:50','23:55','00:00','00:05','00:10','00:15','00:20','00:25','00:30','00:35','00:40','00:45','00:50','00:55','01:00','01:05','01:10','01:15','01:20','01:25','01:30','01:35','01:40','01:45','01:50','01:55','02:00','02:05','02:10','02:15','02:20','02:25','02:30','02:35','02:40','02:45','02:50','02:55','03:00','03:05','03:10','03:15','03:20','03:25','03:30','03:35','03:40','03:45','03:50','03:55','04:00','04:05','04:10','04:15','04:20','04:25','04:30','04:35','04:40','04:45','04:50','04:55','05:00','05:05','05:10','05:15','05:20','05:25','05:30','05:35','05:40','05:45','05:50','05:55','06:00','06:05','06:10','06:15','06:20','06:25','06:30','06:35','06:40','06:45','06:50','06:55','07:00','07:05','07:10','07:15','07:20','07:25','07:30','07:35','07:40','07:45','07:50','07:55','08:00','08:05','08:10','08:15','08:20','08:25','08:30','08:35','08:40','08:45','08:50','08:55','09:00','09:05','09:10','09:15','09:20','09:25','09:30','09:35','09:40','09:45','09:50','09:55','10:00','10:05','10:10','10:15','10:20','10:25','10:30','10:35','10:40','10:45','10:50','10:55',]
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'kW',
      nameTextStyle: {
        color: '#fff'
      },
      splitNumber: 7,
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        margin: 20,
        textStyle: {
          color: '#d1e6eb'
        }
      },
      axisTick: {
        show: false
      }
    },
    {
      type: 'value',
      name: 'kW',
      splitNumber: 7,
      nameTextStyle: {
        color: '#fff'
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        margin: 20,
        textStyle: {
          color: '#d1e6eb'
        }
      },
      axisTick: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '电负荷',
      type: 'line',
      smooth: true,
      symbol: 'none',
      animation: false,
      areaStyle: {
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(250,173,20, 1)'
            },
            {
              offset: 0.5,
              color: 'rgba(250,173,20, 0.8)'
            },
            {
              offset: 1,
              color: 'rgba(250,173,20,0.5)'
            }
          ]
        }
      },
      color: '#FAAD14',
      tooltip: {
        trigger: 'axis',
        show: true,
        valueFormatter(value) {
          if (typeof value === 'number') return value.toFixed(2) + 'kW';
          else return '-';
        },
      },
      data: [0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,]
    },
     {
      name: '空调负荷',
      type: 'line',
      smooth: true,
      symbol: 'none',
      yAxisIndex: 1,
      animation: false,
      areaStyle: {
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(1,230,245, 1)'
            },
            {
              offset: 0.5,
              color: 'rgba(1,230,245, 0.8)'
            },
            {
              offset: 1,
              color: 'rgba(1,230,245,0.5)'
            }
          ]
        }
      },
      color: '#01E6F5',
      tooltip: {
        trigger: 'axis',
        show: true,
        valueFormatter(value) {
          if (typeof value === 'number') return value.toFixed(2) + 'kW';
          else return '-';
        },
      },
      data: [0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,6.2,6.2,6.2,6.2,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,6.2,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,6.2,0.0,0.0,0.0,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,3.634,6.2,6.2,6.2,6.2,6.2,]
    },
    {
      type: 'line',
      smooth: true,
      lineStyle: {
        color: '#FFDF6F',
        join: 'round',
        shadowColor: '#FFDF6F',
        shadowBlur: 6
      },
      tooltip: {
        trigger: 'axis',
        show: false
      },
      symbol: 'none',
      animationDelay: 50,
      animationDuration: 5000,
      data: []
    },
    {
      type: 'line',
      smooth: true,
      lineStyle: {
        color: '#FAAD14'
      },
      tooltip: {
        trigger: 'axis',
        show: false
      },
      symbol: 'none',
      animationDelay: 700,
      animationDuration: 5000,
      data: []
    },
    {
      type: 'line',
      smooth: true,
      yAxisIndex: 1,
      lineStyle: {
        color: '#88F8FF',
        join: 'round',
        shadowColor: '#88F8FF',
        shadowBlur: 6
      },
      tooltip: {
        trigger: 'axis',
        show: false
      },
      symbol: 'none',
      animationDelay: 50,
      animationDuration: 5000,
      data: []
    },
    {
      type: 'line',
      smooth: true,
      yAxisIndex: 1,
      lineStyle: {
        color: '#01E6F5'
      },
      tooltip: {
        trigger: 'axis',
        show: false
      },
      symbol: 'none',
      animationDelay: 700,
      animationDuration: 5000,
      data: []
    }
  ]
}

option.func(myChart, option)

3.柱状图光亮轮播

使用highlight， downplay

option = {
  color: '#5470c6',
  textStyle: {
    color: 'rgba(255,255,255, 0.65)'
  },
  grid: {
    containLabel: true,
    show: false,
    left: '0%',
    top: '18%',
    right: '3%',
    bottom: '4%'
  },
  xAxis: {
    type: 'category',
    data: [
      '01',
      '02',
      '03',
      '04',
      '05',
      '06',
      '07',
      '08',
      '09',
      '10',
      '11',
      '12',
      '13',
      '14',
      '15',
      '16',
      '17',
      '18',
      '19',
      '20',
      '21',
      '22',
      '23',
      '24',
      '25',
      '26',
      '27',
      '28',
      '29',
      '30',
      '31'
    ]
  },
  yAxis: {
    type: 'value',
    name: '电量 (kWh)',
    nameTextStyle: {
      padding: [0, 0, 0, 12]
    },
    axisLine: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255,255,255,0.1)'
      }
    }
  },
  series: [
    {
      data: [
        { value: 60.0, name: '01', text: 60.0, showText: '100' },
        { value: 15.96, name: '02', text: 15.96, showText: '100' },
        { value: 34.95, name: '03', text: 34.95, showText: '100' },
        { value: 30.16, name: '04', text: 30.16, showText: '100' },
        { value: 44.36, name: '05', text: 44.36, showText: '100' },
        { value: 43.99, name: '06', text: 43.99, showText: '100' },
        { value: 34.62, name: '07', text: 34.62, showText: '100' },
        { value: 106.42, name: '08', text: 106.42, showText: '100' },
        { value: 101.34, name: '09', text: 101.34, showText: '100' },
        { value: 119.57, name: '10', text: 119.57, showText: '100' },
        { value: 107.8, name: '11', text: 107.8, showText: '100' },
        { value: 112.52, name: '12', text: 112.52, showText: '100' },
        { value: 116.99, name: '13', text: 116.99, showText: '100' },
        { value: 109.11, name: '14', text: 109.11, showText: '100' },
        { value: 86.08, name: '15', text: 86.08, showText: '100' },
        { value: 95.06, name: '16', text: 95.06, showText: '100' },
        { value: 91.39, name: '17', text: 91.39, showText: '100' },
        { value: 77.3, name: '18', text: 77.3, showText: '100' },
        { value: 88.7, name: '19', text: 88.7, showText: '100' },
        { value: 116.72, name: '20', text: 116.72, showText: '100' },
        { value: 105.08, name: '21', text: 105.08, showText: '100' },
        { value: 47.76, name: '22', text: 47.76, showText: '100' },
        { value: 0.0, name: '23', text: 0.0, showText: '100' },
        { value: 0.0, name: '24', text: 0.0, showText: '100' },
        { value: 0.0, name: '25', text: 0.0, showText: '100' },
        { value: 0.0, name: '26', text: 0.0, showText: '100' },
        { value: 0.0, name: '27', text: 0.0, showText: '100' },
        { value: 0.0, name: '28', text: 0.0, showText: '100' },
        { value: 0.0, name: '29', text: 0.0, showText: '100' },
        { value: 0.0, name: '30', text: 0.0, showText: '100' },
        { value: 0.0, name: '31', text: 0.0, showText: '100' }
      ],
      type: 'bar',
      smooth: true,
      itemStyle: {
        normal: {
          color: function (params) {
            const lastIndex = 21;
            const commonColorOption = {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              global: false // 缺省为 false
            };
            if (params.dataIndex === lastIndex) {
              return Object.assign(commonColorOption, {
                colorStops: [
                  { offset: 0, color: '#FFB600' },
                  { offset: 1, color: '#ffb60021' }
                ]
              });
            }
            return Object.assign(commonColorOption, {
              colorStops: [
                { offset: 0, color: '#01E6F5' },
                { offset: 1, color: '#1890ff24' }
              ]
            });
          },
          barBorderRadius: [1, 1, 0, 0]
        }
      },
      emphasis: {
        itemStyle: {
          shadowColor: '#fff',
          shadowBlur: 10
        }
      }
    }
  ],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      label: {
        backgroundColor: '#6a7985'
      }
    },
    formatter: function (datas) {
      var res = datas[0].name + '<br/>';
      res = res + '电量 (kWh)：' + datas[0].data.text;
      return res;
    }
  },
  func: (myChart, option, isSame) => {
    this.historyTimer && clearInterval(this.historyTimer);

    const indexString = sessionStorage.getItem(
      'monitor_screen_generation_history_index'
    );
    let index = isSame && indexString ? Number(indexString) : -1; //高亮所在下标

    let dataLength = 22;

    this.historyTimer = setInterval(() => {
      index = (index + 1) % dataLength;
      const newData = option.series[0].data.map((item, i) => {
        let newItem;
        if (index === i) {
          const color = i === dataLength - 1 ? '#FAAD14' : '#01E6F5';
          newItem = Object.assign(item, {
            label: {
              show: true,
              position: 'top',
              color: color,
              fontSize: '12px',
              formatter: (params) => {
                return params.value[params.encode.x[0]];
              }
            }
          });
        } else {
          newItem = Object.assign(item, { label: null });
        }
        return newItem;
      });

      if (index > dataLength) {
        index = 0;
      }

      sessionStorage.setItem(
        'monitor_screen_generation_history_index',
        JSON.stringify(index)
      );

      option.series[0].data = newData;
      myChart.setOption(option);

      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: new Array(index + 1).fill(1).map((v, i) => i)
      });
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: index
      });
    }, 2000);
  }
};
option.func(myChart, option)

以上就是echart实现大屏动效示例详解的详细内容，更多关于echart大屏动效的资料请关注编程网其它相关文章！

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

echart大屏动效echart动效
阅读原文内容投诉

echart实现大屏动效示例详解

下载Word文档到电脑，方便收藏和打印～

下载Word文档

相关文章

猜你喜欢

echart实现大屏动效示例详解

这篇文章主要为大家介绍了echart实现大屏动效示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-13

AndroidFlutter实现3D动画效果示例详解

2024-04-02

Vue+Echart实现利用率表盘效果的示例代码

这篇文章主要为大家详细介绍了Vue如何利用Echart实现利用率表盘的效果，文中的示例代码讲解详细，具有一定的借鉴价值，需要的可以参考一下
2023-05-18

android实现Splash闪屏效果示例

本文实例讲述了android实现Splash闪屏效果的方法。分享给大家供大家参考，具体如下： Java代码：public class Splash extends Activity{private final int SPLASH_DISP
2022-06-06

jQuery实现大屏滚动播放效果

2024-04-02

Unity实现卡片循环滚动效果的示例详解

这篇文章主要为大家详细介绍了如何利用Unity实现卡片循环滚动的效果，文中的实现步骤讲解详细，具有一定的借鉴价值，需要的可以参考一下
2022-12-09

Vue3+vueuse实现放大镜示例详解

2024-04-02

python可视化大屏库big_screen示例详解

2024-04-02

JavaScript实现点击关闭全屏示例详解

2024-04-02

fullPage.js和CSS3实现全屏滚动效果的示例分析

2024-04-02

Vue使用Echarts实现大屏可视化布局示例详细讲解

这篇文章主要介绍了Vue使用Echarts实现大屏可视化布局示例，本文通过实例代码图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-09

react native reanimated实现动画示例详解

这篇文章主要为大家介绍了react native reanimated实现动画示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-06

vue3实现数字滚动特效实例详解

2024-04-02

QtC++实现录屏录音功能的示例详解

实现一个录屏+录音的功能且需要快速开发，Qt无疑是一个非常好的选择。他有丰富的类库和接口可以很好的满足开发需求。本文就来和大家聊聊具体的实现方法吧
2023-03-08

Vue联动Echarts实现数据大屏展示

2024-04-02

JS实现大数相加大数相乘示例详解

这篇文章主要为大家介绍了JS实现大数相加大数相乘示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-13

Android 动态加载 so实现示例详解

2024-04-02

Vue Echarts实现实时大屏动态数据显示

同大多数的前端框架一样，先读官网的使用方法。学会基本使用后，在实例中找到自己想要demo。拿过来改一改，一个echarts图表就形成，毕竟人家做就是为了方便使用，这篇文章主要介绍了Vue Echarts实现实时大屏动态数据显示
2022-11-13

Python实现动态绘图的示例详解

matplotlib中的animation提供了动态绘图功能，这篇文章主要为大家详细介绍了Python如何利用matplotlib实现动态绘图，感兴趣的可以了解一下
2023-05-19

JS实现微信播音效果示例详解

这篇文章主要为大家介绍了JS实现微信播音效果示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-21

热门标签

Linux(148)PHP(127)Java(102)正则表达式(101)JavaScript(69)最佳实践(67)jQuery(44)MySQL(39)Docker(37)C语言(36)性能优化(34)Python(34)XML(28)string(27)第三方库(23)回调函数(23)ZIP(22)数组(22)可扩展性(22)字符串比较(21)find(20)RPM(20)Go(20)grep(19)ASP.NETCore(19)XML解析器(19)事件(19)事件处理程序(19)StringBuilder(18)Nginx(18)

编程热搜

查看更多

编程资源站

  • 资料下载
  • 历年试题
2021年下半年软考高级信息系统项目管理师高频考点精选资料
2021下半年软考高级信息系统技术知识点记忆口诀精选资料
2021下半年软考《信息系统项目管理师》考试真题及答案精选资料
2021下半年软考高级考试备考攻略精选资料
2021年软考高级《信息系统项目管理师》巩固练习题汇总精选资料
2021下半年软考高级信息系统项目管理师30个易考知识点汇总精选资料
2021下半年软考高级知识点这样记，还担心记不住吗精选资料
2021年下半年软考高级考试重点汇总精选资料
2021下半年软考高级信息系统项目管理师计算公式汇总精选资料
2021年下半年软考高级《信息系统项目管理师》模拟试题精选资料
查看更多
信息系统项目管理师选择题每日一练（2024）历年试题
2023年下半年信息系统项目管理师综合知识真题演练历年试题
查看更多

目录

本网页已闲置超过3分钟，按键盘任意键或点击空白处，即可回到网页
最新资讯更多
    友情链接编程网

    反馈

    我要
    反馈