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

介于上一次本菜鸟的代码过low,现在更新，可能还是low,望见谅
<!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,0000”形式，所以要做以下处理
                                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[0], myColor[1], myColor[2], myColor[3], myColor[4], myColor[5], myColor[6], myColor[7], myColor[8], myColor[9]]
                    }
                },
                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));//get()方法作用：将jQuery对象转Dom对象
            myChart.setOption(option);
        });
    </script>
</head>
<body>
<div id="myChart"></div>
</body>

</html>
Echarts 折线图 炫酷实现y轴自定义色阶

猜你喜欢

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