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!