echarts ----漸變色曲線圖表demo

效果圖如下

代碼如下：
option = {
                xAxis: {
                    //name: '日期',//y軸名稱
                    nameGap: 30,
                    type: 'category',
                    boundaryGap: false,
                    //設置x軸的刻度坐標展示數據，會覆蓋series中數據的name屬性【也是設置x軸的刻度坐標的展示數據，如果這里沒有設置data,而x軸的刻度坐標沒有展示數據的話，這里可以添加data進行覆蓋展示】
                    // data: tendencyNameData,
                    axisLabel: {//x軸文本的樣式
                        show: true,
                        textStyle: {
                            color: '#647CA7',
                            fontSize: '12',
                            left: '20'
                        }

                    },
                    axisLine: {//x軸的樣式
                        //設置箭頭方法一
                        // symbolOffset: 50,
                        // symbolSize: [35, 38],

                        // symbol: ['none', 'arrow'],    //只在末端顯示箭頭
                        
                        //設置箭頭方法二
                        symbol: ['none', 'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3,20'],
                        symbolOffset: 5,//箭頭與軸線的間距
                        symbolSize: [35, 38],
                        lineStyle: {
                            color: '#657BA7'
                        }
                    }
                },
                yAxis: {
                    name: '人次',
                    nameGap: 30,
                    type: 'value',
                    splitLine: {//去除網格線
                        show: false
                    },
                    //boundaryGap: [0, '30%'],
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#647CA7',
                            fontSize: '12'
                        }
                    },
                    axisLine: {
                        //只在末端顯示箭頭,但是箭頭的樣式、箭頭與軸線沒有連線等不可調所以用以下方法 
                        symbol: ['none', 'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3,20'],//繪制箭頭
                        symbolOffset: 5,//箭頭與軸線的間距
                        symbolSize: [35, 38],//箭頭 大小
                        
                        lineStyle: {
                            color: '#657BA7'
                        }
                    }
                },
                //設置漸變色需要去掉visualMap屬性
                // visualMap: {
                //     type: 'piecewise',
                //     show: false,
                //     dimension: 0,
                //     seriesIndex: 0,
                //     // pieces: [{
                //     //     gt: 1,
                //     //     lt: 3,
                //     //     color: 'rgba(0, 180, 0, 0.5)'
                //     // }, {
                //     //     gt: 5,
                //     //     lt: 7,
                //     //     color: 'rgba(0, 180, 0, 0.5)'
                //     // }]
                // },
                series: [
                    {
                        type: 'line',
                        smooth: true,//折點處圓滑，即折線變為圓滑的曲線
                        // symbol: 'none',
                        // lineStyle: {
                        //     color: 'green',
                        //     width: 2
                        // },

                        itemStyle: {
                            normal: { //顏色漸變函數 前四個參數分別表示四個位置依次為左、下、右、上
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0, color: '#E93CA7' // 0% 處的顏色
                                }, {
                                    offset: 0.4, color: '#EA8FC7' // 100% 處的顏色
                                }, {
                                    offset: 1, color: '#657BA7' // 100% 處的顏色
                                }]
                                ), //背景漸變色    
                                lineStyle: {        // 系列級個性化折線樣式  
                                    width: 3,
                                    type: 'solid',
                                    color: "#E93CA7" //折線的顏色
                                }
                            }
                        },//線條樣式
                        symbolSize: 10, //折線點的大小
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: 'red'
                                }
                            }
                        },
                        areaStyle: { normal: {} },
                        data: [
                            ['10.1', 200],
                            ['10.2', 400],
                            ['10.3', 650],
                            ['10.4', 500],
                            ['10.5', 250],
                            ['10.6', 300],
                            ['10.7', 450],
                            ['日期', null]
                        ]
                    }
                ]
            };

var tendencyWeekChart = echarts.init(document.getElementById("visitor"));
tendencyWeekChart.setOption(option);
 
//備注：圖表自適應窗口的大小 

window.addEventListener("resize", function () {
 tendencyWeekChart.resize(); 
});