Echarts - 不同区间段的值显示的颜色不一致

最新推荐文章于 2022-07-01 09:18:54 发布

cily_undefined

最新推荐文章于 2022-07-01 09:18:54 发布

阅读量4.1k

点赞数 2

分类专栏： eCharts

本文链接：https://blog.csdn.net/qq_29326717/article/details/91624299

版权

eCharts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天开发项目的时候，有个需求是显示一个柱状统计图，要求是：不同的区间段的值显示不同的颜色。

比如：0-59分 --> 不及格； 60-79分 --> 及格； 80-89分 --> 好样； 90-100分 --> 棒呆。

下面写一个简单的Demo：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>嘿嘿嘿~请叫我丘耳</title>
    <script src="https://echarts.baidu.com/examples/vendors/echarts/echarts.min.js?_v_=1553896255267"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            title: {
                text: 'XX班级各科平均分'
            },
            tooltip: {},
            legend: {},
            xAxis: {
                'axisLabel':{'interval':0},
                data: ["语文","数学","英语","物理","化学","生物","地理","历史","政治","体育"]
            },
            yAxis: {},
            visualMap: {
                top: 24,
                x: 'center',
                orient: 'horizontal',
                textStyle: {
                    color: '#000'
                },
                pieces: [
                    // min-不包含， max-包含
                    {min: 0, max: 59, label: '不及格', color: '#C1232B'},
                    {min: 59, max: 69, label: '及格', color: '#FE8463'},
                    {min: 69, max: 89, label: '好样', color: '#FCCE10'},
                    {min: 89, max: 100, label: '棒呆', color: '#B5C334'},
                ],
                outOfRange: {
                    color: '#999'
                }
            },
            series: [{
                type: 'bar',
                data: [60, 98, 75, 55, 86, 54, 61, 70, 34, 87],
                itemStyle: {
                    normal: {
                        color: function(params){
                            if(params.data < 60){
                                return '#C1232B';
                            }else if(params.data>=60 && params.data<70){
                                return '#FE8463';
                            }else if(params.data>=70 && params.data<90){
                                return '#FCCE10';
                            }else if(params.data>=90 && params.data<=100){
                                return '#B5C334';
                            }
                        }
                    }
                }
            }]
        };

        myChart.setOption(option);
    </script>
</body>
</html>

效果图如下：

嘿嘿嘿~完成啦...欢迎指教~

cily_undefined

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
Echarts - 不同区间段的值显示的颜色不一致

今天开发项目的时候，有个需求是显示一个柱状统计图，要求是：不同的区间段的值显示不同的颜色。比如：0-59分 --> 不及格； 60-79分 --> 及格； 80-89分 --> 好样； 90-100分 --> 棒呆。下面写一个简单的Demo：<!DOCTYPE html><html><head> ...
复制链接

扫一扫

专栏目录