echarts控制柱状图加载动画

Echarts柱状图 yekong

echarts柱状图加载速度过快,客户想要让动画慢一点,这里我们可以通过设置animationDuration来控制动画的加载速度。

animationDuration: 2000,  // 这里设置动画持续时间为 3000 毫秒(3 秒)
animationEasing: "cubicOut",  // 这里设置缓动函数为 cubicOut

实例代码

option.options.push({
        series: [
          {
            name: '人数',
            data: this.list.map(obj => obj.value),
            animationDuration: 2000,  // 这里设置动画持续时间为 3000 毫秒(3 秒)
            animationEasing: "cubicOut",  // 这里设置缓动函数为 cubicOut
            barWidth: 8,
            z: 0,
            stack: "1",
            type: "pictorialBar",
            barCategoryGap: "100%",
            symbol: "path://M126,10 C59.72583,10 6,8.209139 6,6 C6,3.790861 59.72583,2 126,2 C126,6 126,6 126,10 Z",
            itemStyle: {
              color: {
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                type: 'linear',
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(230, 132, 34, 1)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(1, 15, 26, 1)',
                  },
                ],
              },
            },
            label: {
              show: false,
              position: 'top',
              distance: 10,
              color: '#fff',
              fontFamily: 'DIN-bold'
            },
          },
        ]
      });
喜欢