Echart自定義y軸刻度信息1

本文轉載自查看原文 2018-03-22 17:21 2223 腳本jQuery

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.common.min.js"></script>
</head>
<body>
    <!-- 為ECharts准備一個具備大小（寬高）的Dom -->
    <div id="container" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基於准備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById('container'));

        // 指定圖表的配置項和數據
        var option = {
            title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            legend: {
                data:['銷量1']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {
                min:0,
                max:4,
                axisLabel:{
                    formatter: function (value) {
                    var texts = [];
                        if(value==0){
                            texts.push('woo');
                        }
                        else if (value <=1) {
                            texts.push('好');
                        }
                        else if (value<= 2) {
                            texts.push('很好');
                        }
                        else if(value<= 3){
                            texts.push('非常好');
                        }
                        else{
                            texts.push('完美');
                        }
                        return texts;
                    }
                }
                },
            series: [{
                name: '銷量1',
                type: 'bar',
                data: [1,4,2,3,2,0]
            }
            ]
        };

        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>

效果圖：

關鍵是定義一個在 yAxis - axisLabel 中重寫formatter 的方法，設置index的取值范圍，對應到一個固定的刻度值。特殊情況：如果series中只有一個值，圖中會封頂展示；此時需要設置max的值，才能讓這個單個柱子也能出現在預期的刻度高度。

原鏈接：https://www.cnblogs.com/conserdao/p/6911048.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Echart自定義y軸刻度信息2 QCustomPlot自定義Y軸數字格式 WPF C# 自定義坐標軸（X軸，Y軸）自定義刻度的SeekBar R graph：如何自定義坐標軸刻度標示(tick label) Matplotlib基礎--自定義刻度 echart去掉x軸外圍的刻度線 echarts Y軸刻度保留幾位小數 echart 圖例設置自定義圖標？坐標軸刻度取值算法-基於魔數數組-源於echarts的y軸刻度計算需求