Echarts 折线图炫酷实现y轴自定义色阶

最新推荐文章于 2024-08-06 12:00:00 发布

早晨阳光一般暖

最新推荐文章于 2024-08-06 12:00:00 发布

阅读量2.3k

点赞数 3

分类专栏： echarts javascript 文章标签： Echarts 自定义y轴炫酷折线图

本文链接：https://blog.csdn.net/LZY_1993/article/details/78630582

版权

javascript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

echarts

3 篇文章 0 订阅

订阅专栏

代码如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            background-color: gray;
        }

        #myChart {
            width: 80%;
            height: 70%;
            position: fixed;
            top: 15%;
            left: 10%;
        }
    </style>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="echarts3.2.2/echarts.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            var myColor = ['#45fda5', '#3ffd55', '#11da01', '#118b43', '#c3eb18',
                '#dfde14', '#eac736', '#ed5501', '#9d0700', '#e80c00'
            ];

            var option = {
                backgroundColor: 'black',
                grid: {
                    top: 15,
                    left: 15,
                    right: 15,
                    bottom: 15,
                    containLabel: true //轴上的数值
                },
                xAxis: {
                    type: 'category',
                    splitLine: false,
                    boundaryGap: false,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: myColor[0]
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: myColor[0]
                        }
                    },
                    data: [
                        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 
                        11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 
                        21, 22, 23, 24, 25, 26, 27, 28, 29, 30
                    ]
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    splitLine: false,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    interval: 10,
                    axisLabel: {
                        formatter: function (value) {
                            return value + " 个  -";
                        },
                        textStyle: {
                            color: function (value) {
                                //注意：当值大于999(三位)时，会以“1,000”形式，所以要做以下处理
                                value = parseInt(value.replace(/,/g, ""));
                                var idx = parseInt(value / 10);
                                return myColor[idx > 9 ? 9 : idx];
                            }
                        }
                    }
                },
                visualMap: {
                    show: false,
                    calculable: true,
                    min: 0,
                    max: 100,
                    inRange: { 
                        color: myColor 
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        label: {
                            textStyle: {
                                color: "white"
                            }
                        }
                    }
                },
                series: [{
                    name: '人',
                    type: 'line',
                    symbol: 'none', //这句就是去掉折线上的点的
                    smooth: true, //这句就是让曲线变平滑的
                    hoverAnimation: true,
                    lineStyle: {
                        normal: {
                            width: 5
                        }
                    },
                    itemStyle: {
                        normal: {
                            opacity: 0
                        }
                    },
                    data: [
                        54, 86, 46, 45, 77, 96, 89, 88, 23, 38,
                        3, 66, 98, 43, 73, 76, 44, 16, 21, 14,
                        71, 8, 61, 65, 1, 68, 33, 69, 49, 24
                    ]
                }]
            };

            var myChart = echarts.init($("#myChart").get(0));
            myChart.setOption(option);
        });
    </script>
</head>
<body>
<div id="myChart"></div>
</body>

</html>