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!

相关文章
|
9月前
172Echarts - 象形柱图(Dotted bar)
172Echarts - 象形柱图(Dotted bar)
24 0
172Echarts - 象形柱图(Dotted bar)
|
8月前
ECharts 提示框组件Tooltip属性大全(包含文本注释)
ECharts 提示框组件Tooltip属性大全(包含文本注释)
268 0
|
2月前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
34 0
|
12月前
|
JavaScript 数据可视化 前端开发
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
196 1
|
7月前
Echarts tooltip配置项的属性 图表悬浮框
Echarts tooltip配置项的属性 图表悬浮框
|
9月前
174Echarts - 象形柱图(Wish List and Mountain Height)
174Echarts - 象形柱图(Wish List and Mountain Height)
24 0
174Echarts - 象形柱图(Wish List and Mountain Height)
|
8月前
ECharts分段型视觉映射组件的属性修改
ECharts分段型视觉映射组件的属性修改
39 0
|
8月前
echarts 仪表盘三分钟上手及属性修改示例
echarts 仪表盘三分钟上手及属性修改示例
82 0
|
8月前
|
前端开发
【前端统计图】echarts实现属性修改
【前端统计图】echarts实现属性修改
46 0
|
8月前
echarts改变颜色属性的demo
echarts改变颜色属性的demo
29 0

热门文章

最新文章