echarts.js 这么调成反方向动画
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echarts.js 这么调成反方向动画相关的知识,希望对你有一定的参考价值。
参考技术A p>Echarts是前端的图表,只要从后台向前台传递json数据,解析下绑定到Echarts上,百度上有Demo的;前台获取到json,即可显示效果。步骤,改写Echarts调用的js,转化为json:后台取到数据追问运动轨迹能不能换一个方向跑
百度ECharts大数据统计流量波浪动画效果
百度ECharts大数据统计流量波浪动画效果
使用前请先引用百度ECharts插件JS包,echarts.js ,官网获取最新的即可。
var value = 0.2; var data = [value, value, value, ]; option = { backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{ offset: 0, color: ‘#431ab8‘ }, { offset: 1, color: ‘#471bba‘ }]), title: { text: (value * 100).toFixed(0) + ‘{a|%}‘, textStyle: { fontSize: 50, fontFamily: ‘Microsoft Yahei‘, fontWeight: ‘normal‘, color: ‘#bcb8fb‘, rich: { a: { fontSize: 28, } } }, x: ‘center‘, y: ‘35%‘ }, graphic: [{ type: ‘group‘, left: ‘center‘, top: ‘60%‘, children: [{ type: ‘text‘, z: 100, left: ‘10‘, top: ‘middle‘, style: { fill: ‘#aab2fa‘, text: ‘流量统计‘, font: ‘20px Microsoft YaHei‘ } }] }], series: [{ type: ‘liquidFill‘, radius: ‘80%‘, center: [‘50%‘, ‘50%‘], // shape: ‘roundRect‘, data: data, backgroundStyle: { color: { type: ‘linear‘, x: 1, y: 0, x2: 0.5, y2: 1, colorStops: [{ offset: 1, color: ‘rgba(68, 145, 253, 0)‘ }, { offset: 0.5, color: ‘rgba(68, 145, 253, .25)‘ }, { offset: 0, color: ‘rgba(68, 145, 253, 1)‘ }], globalCoord: false }, }, outline: { borderDistance: 0, itemStyle: { borderWidth: 20, borderColor: { type: ‘linear‘, x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: ‘rgba(69, 73, 240, 0)‘ }, { offset: 0.5, color: ‘rgba(69, 73, 240, .25)‘ }, { offset: 1, color: ‘rgba(69, 73, 240, 1)‘ }], globalCoord: false }, shadowBlur: 10, shadowColor: ‘#000‘, } }, color: { type: ‘linear‘, x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 1, color: ‘rgba(58, 71, 212, 0)‘ }, { offset: 0.5, color: ‘rgba(31, 222, 225, .2)‘ }, { offset: 0, color: ‘rgba(31, 222, 225, 1)‘ }], globalCoord: false }, label: { normal: { formatter: ‘‘, } } }, ] };
以上是关于echarts.js 这么调成反方向动画的主要内容,如果未能解决你的问题,请参考以下文章