1. 程式人生 > >echarts折線圖背景漸變以及常用配置項

echarts折線圖背景漸變以及常用配置項

 let myChart = this.$echarts.init(document.getElementById('plant-charts'));
                // 繪製圖表
                myChart.setOption({
                    tooltip: {
                        formatter: '{c}' //設定單位
                    },
                    grid: {  //設定圖示距離父級div的間距
                        top: "10",
                        left: "0",
                        right: "15",
                        bottom: "10",
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['2015','2016','2017','2018','2019','2020','2021'],
                        axisLabel: {
                            interval: '0', //類目軸(category)中用數值表示顯示間隔,0為顯示所有,1為隔一個顯示一個,以此類推
                            textStyle: {  //文字樣式
                                color: '#62799C',
                                fontSize: '12'
                            },
                        },

                        axisTick: {       //y軸刻度線不顯示
                            show: false
                        },
                    },
                    yAxis: {
                        type: 'value',
                        //show: false,
                        axisLabel: {
                            textStyle: {  //文字樣式
                                color: '#62799C',
                                fontSize: '12'
                            },

                        },
                        // 控制網格線
                        splitLine: {
                            //  改變軸線顏色
                            lineStyle: {
                                color: '#2a2a2d'
                            }
                        },
                        axisTick: {       //y軸刻度線
                            show: false
                        },
                    },
                    series: [{
                        data: [5000,6000,7000,4400,3200,4500,6800],
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: 'rgba(62,139,222,1)'//線顏色
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //折線圖顏色漸變
                                    offset: 0,
                                    color: 'rgba(62,139,222,0.6)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(62,139,222,0.01)'
                                }])
                            }
                        },
                    }]
        });