点会转的折线图还带着柱子

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);
    }
});

标签：柱子,false,color,lineStyle,true,点会,offset,折线图,type
来源： https://www.cnblogs.com/llcdbk/p/15802771.html