当前位置：文江博客话题详情

JavaScript HTML HTML5 ECharts 前端

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

发布于 2022-09-13 00:08:22 字数 45 浏览 18 评论 0

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

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

萌酱 2022-09-20 00:08:22

预处理一下 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>

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

22 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

一梦浮鱼

文章 0 评论 0

mb_Z9jVigFL

文章 0 评论 0

伴随着你

文章 0 评论 0

耳钉梦

文章 0 评论 0

18618447101

文章 0 评论 0

蜗牛

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文