问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
小胡同学114
    5922843

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

    echartsjavascript前端html5html
    阅读 1.5k
    1 个回答
    得票最新
    头像
    fwind
      4814
      ✓ 已被采纳

      预处理一下 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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题