折线图带渐变加滚动条

Vue3+vite

1.安装 yarn add echarts
2.引入  import * as echarts from 'echarts';

js

const  chainEcharts = () =>{
    var time = state.timeList;
    var max = state.maxValueData;
    var min = state.minValueData;
    var mean = state.meanValueData;
    var chartDom = document.getElementById('chainEcharts');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        color:['#68BBA0','#E6A939','#E63939'],
        legend: {
            data: ['最低值', '平均值','最高值'],
            top: '16',
            right: '4%',
            itemWidth: 13,
            itemHeight: 13,
            textStyle: {
                color: "rgba(222, 235, 255, 1)"
            },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            showDelay: 0,
            backgroundColor: '#272B35',
            borderColor: '#65717D',
            textStyle: {
                color: '#DEEBFF',
                fontStyle: 'normal',
                fontWeight: 'normal',
                fontSize: '16',
            },
        },
        xAxis: {
            data: time,
            axisLine:{
                show:false
            },
            axisLabel: {
                color: 'rgba(186, 195, 207, 1)'
            },
            splitLine:{
                show:false,
            },
            axisTick: {
                show: false
            },
        },
        yAxis: {
            axisTick: {
                show: false
            },
            axisLine:{
                lineStyle:{
                    color:'#0B2063',
                },
            },
            splitLine:{
                show:true,
                lineStyle:{
                    color:'rgba(56, 68, 85, 1)',
                    type:'dashed',
                }
            },
            axisLabel: {
                color: 'rgba(186, 195, 207, 1)'
            },
        },
        dataZoom: [
            {
                type: 'slider',
                start: 0,
                end: 50
            },
        ],
        grid: {
            left: '3%',
            right: '10',
            bottom: '16%',
            containLabel: true
        },
        series: [
            {
                name: '最低值',
                type: 'line',
                symbolSize: 8,
                symbol: "circle",
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#526A59'
                        },
                        {
                            offset: 1,
                            color: '#223239'
                        }
                    ])
                },
                stack: 'Total',
                data: min
            },
            {
                name: '平均值',
                type: 'line',
                symbolSize: 8,
                symbol: "circle",
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#734E34'
                        },
                        {
                            offset: 1,
                            color: '#514133'
                        }
                    ])
                },
                stack: 'Total',
                data: mean
            },
            {
                name: '最高值',
                type: 'line',
                symbolSize: 8,
                symbol: "circle",
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#402430'
                        },
                        {
                            offset: 1,
                            color: '#2E2531'
                        }
                    ])
                },
                stack: 'Total',
                data: max
            },
        ]
    };
    option && myChart.setOption(option);
}

onMounted(()=>{
    chainEcharts()
})