Gradient values according to different display color histograms

<! DOCTYPE HTML > 
< HTML > 
    < head > 
        < Meta charset = "UTF-. 8" > 
        < title > in numeric display different gradation color histograms </ title > 
        < style > 
            .Chart-Box { 
                width : 500px ; 
                height : 300px by ; 
                background : Linear-gradient (to Top right, 371a64 #, # 1a48ba) ; 
            } 
        </ style > 
    </ head >
    <body>
        <div class="chart-box" id="chart_box"></div>
    </body>    
    <script src="js/echarts.min.js"></script>
    <script>
        f_chart();

        function f_chart() {
            var dom = document.getElementById("chart_box");
            var myChart = echarts.init(dom);
            var app =} {;
             Var Option =  null ; 
            app.title =  ' histogram divided fraction ' ;
             var namedate = [ ' item 1 ' , ' item 2 ' , ' item 3 ' , ' item 4 ' , ' item 5 ' , ' item 6 ' , ' item. 7 ' ];
             var numDate = [ 50 , 40 ,80, 70, 80, 100, 130];
            var colorlist = [];
            numdate.forEach(element => {
                if (element <= 50) {
                    colorlist.push(["#386ffd", "#74b3ff"])
                } else if (element > 50 && element < 100) {
                    colorlist.push(["#1aa8ce", "#49d3c6"])
                } else {
                    colorlist.push(["#fc7095", "#fa8466"])
                }
            });
            option = {
                title: {
                    text: '渐变柱状图',
                    textStyle: {
                        color: '#0bccde',
                        fontSize: 16
                    },
                    top: '10px',
                    left: '10px'
                },
                tooltip: {
                    trigger: 'item'
                },
                xAxis: [{
                    type: 'category',
                    data: namedate,
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#0bccde",
                            width: 1
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#0bccde'
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}',
                        show: true,
                        textStyle: {
                            color: '#0bccde'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#0bccde",
                            width: 1
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(255,255,255,0.1)'
                        }
                    }
                }],
                series: [{
                    name: '数据',
                    type: 'bar',
                    barWidth: '40%',
                    data: numdate,
                    itemStyle: {
                        normal: {                            
                            color: function(params) {
                                var colorList = colorlist
                                var index = params.dataIndex;
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                    [{
                                            offset: 1,
                                            color: colorList[index][0]
                                        },
                                        {
                                            offset: 0,
                                            color: colorList[index][1]
                                        }
                                    ]);
                            }
                        },
                    },
                }]
            };

            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        }
    </script>
</html>
Gradient values according to different display color histograms

Guess you like
