营销导向的企业网站优化/网络软文营销的案例
在做项目时，当我们用到echarts图表时，大部分产品经理都会要求我们给图表加上一些动画效果，让页面看起来更加炫酷。其实给图表加上动画效果不难，如果数据是实时数据这样做动画效果会更简单点，就怕数据不是实时数据还非要加动画。
接下来我说下echarts 数据动画效果，还是老规矩，先看下效果图
这是个柱形图，我就截图放上来，大家将就的看下哈，想看实际效果可以把下面的代码复制到本地页面上去，自己运行下。接下来就是代码了。
var dom = document.getElementById("p_columnar");var myChart = echarts.init(dom);var app = {};var option;option = {grid: {top: '18%',right: '2%',bottom: '18%',left: '10%'},xAxis: {type: 'category',//boundaryGap: false,//去除图表四周留白axisTick: { //x轴刻度show: false},axisLine: { //x轴线条颜色show: true,lineStyle: {color: '#374186',width: 0.5}},axisLabel: {show: true,rotate: 40, //文字倾斜度textStyle: {color: '#b1bcff', //更改坐标轴文字颜色fontSize: 14 //更改坐标轴文字大小}},data: ['大乐透', '竞彩', '七星彩', '排3', '排5', '即开', '顶呱呱', '传足']},yAxis: {type: 'value',//interval: 100, //刻度值间隔值name: '万',nameTextStyle: {padding: [0, 30, 5, 0], // y轴name位置color: '#b1bcff', //更改单位文字颜色fontSize: 15 //更改单位文字大小},splitLine: { //网格线lineStyle: {//type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线color: '#374186', //网格线颜色width: 0.5},},axisLabel: {show: true,textStyle: {color: '#b1bcff', //更改坐标轴文字颜色fontSize: 15 //更改坐标轴文字大小}},axisLine: {//y轴线条颜色show: false,},},animationDuration: 3000,series: [{barWidth: 20, //柱形宽度showBackground: false, //柱形背景色itemStyle: { //柱形渐变色normal: {//barBorderRadius: 6, //柱形圆角color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0,color: '#188df0'},{offset: 1,color: '#36d1dc'}]),},},label: { //显示当前柱形数值show: true,position: 'top',textStyle: {color: '#15d0dd', //更改坐标轴文字颜色fontSize: 15 //更改坐标轴文字大小}},data: [49, 71, 106, 129, 144, 176, 135, 148],type: 'bar'}]};var mychart1 = echarts.init(document.getElementById("p_columnar"));//模拟实时数据var data = [[23, 42, 53, 23, 42, 47, 112, 212],[29, 64, 56, 98, 75, 67, 172, 312],[43, 82, 80, 116, 95, 367, 192, 412],[61, 105, 165, 156, 155, 500, 220, 512],[123, 234, 533, 206, 405, 667, 362, 612],];//定时器setInterval(getItem, 2000);function getItem() {var random = data[parseInt(Math.random() * data.length)];option.series[0].data = random; //获取series的第一行数据，并将模拟的数据赋值给他mychart1.setOption(option); //重新加载图表};if (option && typeof option === 'object') {myChart.setOption(option);};
以上代码就是以柱形图为例做的数据动画效果，做个笔记记录下，欢迎大家点评。