Echart 折线图渐变色

四喜花露水
于 2024-09-06 16:19:32 发布
阅读量162
点赞数 3
分类专栏： Echart 文章标签： javascript 前端 echarts
本文链接：https://blog.csdn.net/gaowxx/article/details/141962698
版权
Echart 专栏收录该内容
8 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <style>
        .chart-item {
            width: 50%;
            height: 400px;
            margin: 24px auto;
        }
    </style>
</head>

<body>
    <div class="chart-item" id="chart"></div>
    <script>
        var myChartArr = [];
        function drawChart(id, data) {
            var myEchart = echarts.init(document.getElementById(id));
            var option = {
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "rgba(0,0,0,0.66)",
                    borderColor: 'rgba(0,0,0,0)',
                    axisPointer: {
                        type: "shadow",
                        label: {
                            show: false,
                        },
                    },
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    },
                },
                legend: {
                    orient: "horizontal",
                    right: "1%",
                    top: "0%",
                    textStyle: {
                        color: "#333",
                        fontSize: 12,
                        padding: [15, 0, 0, 0]
                    },
                    itemWidth: 16,
                    itemHeight: 12,                   
                },
                grid: {
                    left: "3%",
                    right: "3%",
                    bottom: "3%",
                    top: "40",
                    containLabel: true,
                    z: 22,
                },
                xAxis: [{
                    type: "category",
                    gridIndex: 0,
                    data: data.xData,
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#fff",
                        },
                    },
                    axisLabel: {
                        interval: 0,
                        show: true,
                        color: "#909db0",
                        margin: 10,
                        textStyle: {
                            fontSize: 12,
                        },
                    },
                    axisPointer: {
                        type: 'shadow',
                    }
                },],
                yAxis: [{
                    type: "value",
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#19347b",
                        },
                    },
                    gridIndex: 0,
                    min: 0,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "#fff",
                        },
                    },
                    axisLabel: {
                        formatter: "{value}",
                        color: "#909db0",
                        margin: 10,
                        textStyle: {
                            fontSize: 12,
                        },
                    },
                },],
                series: [
                    {
                        name: data.data1.name,
                        type: "line",
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        symbolSize: 6,
                        symbol: "circle",
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 1,
                                    color: '#06a64a'
                                }, {
                                    offset: 0,
                                    color: '#60dc0d'
                                }], false),
                                barBorderRadius: 0,
                                label: {
                                    show: false,
                                },
                            },
                        },
                        lineStyle: {
                            width: 2,
                            color: '#349d3c',
                            /*shadowColor: 'rgba(246,104,112,0.8)',
                                    shadowBlur:6,
                                    shadowOffsetY:0*/
                        },
                        data: data.data1.value,
                        zlevel: 12
                    },
                    {
                        name: data.data2.name,
                        type: "line",
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        symbolSize: 6,
                        symbol: "circle",
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 1,
                                    color: '#338dfc'
                                }, {
                                    offset: 0,
                                    color: '#02d7f9'
                                }], false),
                                barBorderRadius: 0,
                                label: {
                                    show: false,
                                },
                            },
                        },
                        lineStyle: {
                            width: 2,
                            color: '#0d8cca',
                            /*shadowColor: 'rgba(246,104,112,0.8)',
                                    shadowBlur:6,
                                    shadowOffsetY:0*/
                        },
                        data: data.data2.value,
                        zlevel: 12,
                    }

                ],
            };
            myEchart.setOption(option)
            myChartArr.push(myEchart)
        }
        var mockData = {
            xData: [1,2,3,4,5,6,7,8,9,10],
            data1: {
                name: 'item1',
                value: [ 1.63, 1.65, 1.67, 1.69, 1.67, 1.66, 1.65, 1.64, 1.65, 1.66 ]
            },
            data2: {
                name: 'item2',
                value: [ 1.45, 1.43, 1.45, 1.43, 1.46, 1.48, 1.46, 1.43, 1.38, 1.40]
            }
        }
        drawChart('chart', mockData)

        $(window).resize(function () {
            for (var i = 0; i < myChartArr.length; i++) {
                myChartArr[i].resize();
            }
        })
    </script>
</body>

</html>