Echarts属性通过定时器实现动画效果的研究(柱图)

简介: Echarts属性通过定时器实现动画效果的研究(柱图)

Echarts组件可以通过定时器实现不同的动画效果。

正常渲染图形

 var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var option = {
        backgroundColor: '#080b30',
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            show: false,
            type: 'value'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: "30%",
            itemStyle: {
                barBorderRadius: [10, 10, 0, 0]
            }
        }]
    };
    myChart.setOption(option, true);


定时改变对应的属性

    var arr = [0, 1];
    var i = 0;
    var t = setInterval(show, 2000);
    //变色;
    var colorList = ['#ff7f50', '#87cefa'];
    function show() {
        myChart.setOption({
            series: [{
                itemStyle: {
                    color: colorList[i],//柱条的颜色
                    shadowColor: 'rgba(255,255, 255, 0.8)',//阴影颜色
                    shadowBlur: arr[i] * 30,//阴影的模糊大小
                }
            }]
        });
        i = i + 1;
        if (i == arr.length) {
            //clearInterval(t);
            i = 0;
        }
    }


Done!

相关文章
172Echarts - 象形柱图(Dotted bar)
172Echarts - 象形柱图(Dotted bar)
54 0
172Echarts - 象形柱图(Dotted bar)
ECharts 提示框组件Tooltip属性大全(包含文本注释)
ECharts 提示框组件Tooltip属性大全(包含文本注释)
421 0
|
2月前
|
XML 前端开发 数据格式
echarts柱图前后端代码SpringCloud+Vue3
echarts柱图前后端代码SpringCloud+Vue3
60 1
|
2月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
677 0
|
3月前
Echarts visualMap属性记录
这篇文章是关于ECharts中visualMap属性的详细记录。文中首先定义了visualMap的作用,即进行数据到视觉元素的映射。接着,通过一系列详细的配置参数,如类型、显示控制、数据范围、样式和格式化工具等,介绍了如何配置连续型和分段型visualMap组件。最后,作者通过具体代码示例,说明了如何将这些配置应用于实际的ECharts图表中,以实现数据的视觉编码效果。
125 0
Echarts visualMap属性记录
|
6月前
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
281 0
|
7月前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
158 0
174Echarts - 象形柱图(Wish List and Mountain Height)
174Echarts - 象形柱图(Wish List and Mountain Height)
42 0
174Echarts - 象形柱图(Wish List and Mountain Height)
Echarts tooltip配置项的属性 图表悬浮框
Echarts tooltip配置项的属性 图表悬浮框
ECharts分段型视觉映射组件的属性修改
ECharts分段型视觉映射组件的属性修改
68 0