ecahrt 能否只在最高的那个柱子上显示数字 并且把这个最高的柱子改变颜色

小胡同学114
  • 41

ecahrt 能否只在最高的那个柱子上显示数字 并且把这个最高的柱子改变颜色

回复
阅读 58
1 个回答
✓ 已被采纳

预处理一下 data:

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
    <style>
        a {
            background: #FFC0CB;
        }
    </style>
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/echarts.min.js"></script>

    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};

        var option;
        var data = [150, 80, 70, 110, 130, 20, 90]

        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: filterMaxData(data),
                type: 'bar'
            }]
        };

        // 找出最大值并处理 
        function filterMaxData(data) {
            var maxValue = Math.max.apply(this, data)
            data.map(function (e, i) {
                if (e === maxValue) {
                    data[i] = {
                        value: maxValue,
                        itemStyle: {
                            color: '#a90000'
                        },
                        label: {
                            show: true,
                            position: 'top'
                        }
                    }
                }
            })
            return data
        }

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    </script>



</body>

</html>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏