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


    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: {
                     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);
        }
    });
    积累小的知识,才能成就大的智慧,希望网上少一些复制多一些原创有用的答案
  • 相关阅读:
    每天一个linux命令(25):linux文件属性详解
    每天一个linux命令(24):Linux文件类型与扩展名
    每天一个linux命令(23):Linux 目录结构
    每天一个linux命令(22):find 命令的参数详解
    每天一个linux命令(21):find命令之xargs
    每天一个linux命令(20):find命令之exec
    每天一个linux命令(19):find 命令概览
    Unity3D自己常用代码
    Unity导入FBX自动进行动画切分
    Unity和虚幻的比较
  • 原文地址:https://www.cnblogs.com/llcdbk/p/15802771.html
Copyright © 2020-2023  润新知