标签：柱子 false color lineStyle true 点会 offset 折线图 type

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。