Echarts之柱狀圖獲取點擊柱子事件&自定義柱子顏色&類目軸縱向排列

這裏寫圖片描述

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

    <head>
        <meta charset="utf-8">
    </head>

    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 90%"></div>
        <p id="p">1001</p>
        <script type="text/javascript" src="js/echarts3.js"></script>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('container'));
            var see;
            var option = {
                color: ['#3398DB'],
                title:{
                    text:'1001',//${HunitID}
                    show:false
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 座標軸指示器,座標軸觸發有效
                        type: 'shadow' // 默認爲直線,可選爲:'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: deal(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']),
                    axisTick: {
                        alignWithLabel: true
                    }
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    name: '直接訪問',
                    type: 'bar',
                    barWidth: '60%',
                    data: [25, 10,30, 334, 390, 330, 220],
                    itemStyle:{
                        normal: {
                            color: function(params) {
                            var key = params.name.replace(/<\/?.+?>/g,"").replace(/[\r\n]/g, "");
                        if(key  == 'Sun'){
                            see =params.dataIndex;
                            return "#FE8463";   
                        }else{
                            return "#9BCA63";   
                        }
                            }
                        }
                    }
                }]
            };
            myChart.on('click', function(param) {
                if(param.dataIndex == see){
                    console.log(param.dataIndex);
                }
        });
        myChart.setOption(option);
        function deal(x_catalog){
                var list = [];
                for (var i = 0; i < x_catalog.length; i++) {
                    var s = "";
                    for(var j = 0; j < x_catalog[i].length; j++){
                        s += x_catalog[i][j]+"\r\n";
                    }
                    list.push(s);
                }
                return list;
            }
        </script>
    </body>

</html>
發佈了154 篇原創文章 · 獲贊 41 · 訪問量 63萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章