option = {
tooltip: {
trigger: 'axis',
},
xAxis: [
{
type: 'category',
data: ['2016', '2017', '2018', '2019'],
axisLine: {
lineStyle: {
color: '#999',
},
},
},
],
yAxis: [
{
type: 'value',
splitNumber: 5,
splitLine: {
lineStyle: {
type: 'dashed',
color: '#DDD',
},
},
axisLine: {
show: false,
lineStyle: {
color: '#333',
},
},
nameTextStyle: {
color: '#999',
},
splitArea: {
show: false,
},
},
],
series: [
{
name: 'Ⅳ~Ⅴ类',
type: 'line',
data: [6.3, 16, 31.1, 42.7],
z: 5,
symbol: 'circle',
symbolSize: 30,
symbolRotate: num,
// clip: true,
lineStyle: {
width: 10,
color: {
type: 'linear',
colorStops: [
{
offset: 0,
color: '#cbcbcb', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(72,216,191, 0.1)', // 100% 处的颜色
},
],
// globalCoord: false, // 缺省为 false
},
// type: 'dashed',
// shadowColor: 'rgba(72,216,191, 0.1)',
// shadowBlur: 5,
// shadowOffsetY: 20,
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#fff',
},
{
offset: 1,
color: 'blue',
},
]),
borderWidth: 0,
// borderWidth: 4,
// shadowColor: 'red',
// shadowBlur: 5,
// borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(58,77,233,0.8)'
// }, {
// offset: 1,
// color: 'rgba(58,77,233,0.3)'
// }])
},
},
smooth: true,
},
{
name: 'Ⅳ~Ⅴ类',
type: 'bar',
data: [6.3, 16, 31.1, 42.7],
barWidth: 10,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#D6F823',
},
{
offset: 1,
color: '#C20BDE',
},
]),
},
z: 2,
},
{
effect:{
trailLength: 0.5,
}
}
],
};
var num = 0; //旋转的点
var firstLoad = false; //是否初次加载
//放旋转
function rotate() {
// debugger;
num += 3;
myChart.setOption({
series: [
{
symbolRotate: num,
},
],
});
window.requestAnimationFrame(rotate);
}
//加飞线
function addLines() {
var chartsOption = myChart.getOption();
chartsOption.series.push({
name: 'Ⅳ~Ⅴ类',
type: 'lines',
coordinateSystem: 'cartesian2d',
// symbolSize: 30,
polyline: true,
lineStyle: {
opacity: 0,
},
effect: {
show: true,
trailLength: 0.5,
symbol: 'pin',
period: 4, //光点滑动速度
symbolSize: 30,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#C20BDE',
},
{
offset: 1,
color: '#0BDEC5',
},
]),
},
z: 99,
data: [
{
coords: [
['2016', 6.3],
['2017', 16],
['2018', 31.1],
['2019', 42.7],
],
},
],
});
myChart.setOption(chartsOption);
}
//第一步加载好骨架以后就开始运行一次动画
myChart.on('finished', () => {
//这里只判断第一次加载才调用一下,如果不写完成监听会导致刷新选项的时候柱状体也跟着渲染
//如果不加第一次加载判断会导致渲染卡死
if (!firstLoad) {
firstLoad = true;
addLines();
window.requestAnimationFrame(rotate);
}
});