Echarts 折线图增加颜色渐变

优雅格子衫

于 2024-08-17 10:34:34 发布

阅读量65

点赞数 2

分类专栏： Echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_61869009/article/details/141276891

版权

Echarts 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

记录Echarts图表折线图增加颜色渐变


<div id="echarts1"></div>
<style>
 #echarts1 {
        width: 100%;
        height: 400px;
 }
</style>

 
methods:{
                 eacharts1() {
 let chartDom = document.getElementById('echarts1');
                    let myChart = echarts.init(chartDom);
                    let option = {
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '7%',
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: this.datas1.map(item => item.month_date + '月')
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: this.datas1.map(item => item.class_hour),
                                type: 'line',
                                areaStyle: {},
                                lineStyle: {
                                    color: '#4286FF'
                                },
                                //字体颜色
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            position: "top",
                                            textStyle: {
                                                fontWeight: "bolder",
                                                fontSize: "12",
                                                color: "#4286FF"
                                            }
                                        }
                                    }
                                },
                                //渐变颜色
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#2A77FF'
                                    }, {
                                        offset: 1,
                                        color: '#E5EFFF'
                                    }])
                                }
                            }
                        ]
                    };
                    myChart.setOption(option);
                    window.addEventListener('resize', function () {
                        // 改变图表尺寸，在容器大小发生改变时需要手动调用
                        myChart.resize();
                    });
                },
}