Echarts柱狀圖折線圖混合使用

時間 2021-08-15

標籤 javascript css html 前端 java jquery ajax 編程 json echarts 欄目 JavaScript 简体版

原文原文鏈接

前面用到的更多的是單個統計圖，有些統計圖裏面，使用柱狀圖折線圖混合使用的，下面寫的是用ajax+json本地模擬數據，發送請求，渲染出一個柱狀圖折線圖混合圖表。javascript

一個練手的小demo，僅供參考：css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>柱狀圖折線圖混合使用</title>
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    </head>
    <style>
        .charts6 {
            background: #0d1c2e;
        }
    </style>
    <body>
        <div class="row">
            <div class="col-md-12  col-sm-12  col-xs-12 charts6">
                <div id="main3" style="height: 200px;"></div>
            </div>
        </div>
    </body>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        // 折線圖
        $.ajax({
            url: "test.json",
            data: {},
            type: 'GET',
            success: function(data) {
                console.log(JSON.stringify(data))
                dFun(data.echatX, data.echatY, data.echatY2);

            },
        });
        
        // 基於準備好的dom，初始化echarts實例
        var dChart = echarts.init(document.getElementById('main3'));
        // 指定圖表的配置項和數據
        function dFun(x_data, y_data, y2_data) {
            dChart.setOption({
                title: {
                    left: 'left',
                    text: '機率',
                    show: false
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{a}:{c}',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                grid: {
                    show: false,
                    top: '30',
                    bottom: '60',
                    right: '60',
                    left: '60'
                },
                legend: {
                    show: true,
                    selectedMode: 'single', // 設置顯示單一圖例的圖形，點擊可切換
                    bottom: 10,
                    left: 50,
                    textStyle: {
                        color: '#666',
                        fontSize: 12
                    },
                    itemGap: 20,
                    inactiveColor: '#ccc'
                },
                xAxis: {
                    splitLine: {　　　　 show: false　　 },
                    type: 'category',
                    data: x_data,
                    axisPointer: {
                        type: 'shadow'
                    },
                    // 改變x軸顏色
                    axisLine: {
                        lineStyle: {
                            color: '#00a2e2',
                            width: 1, // 這裏是爲了突出顯示加上的
                        }
                    },
                    axisTick: {
                        show: true,
                        interval: 0
                    },
                },
                // 設置兩個y軸，左邊顯示數量，右邊顯示機率
                yAxis: [{
                        splitLine: {　　　　 show: false　　 },
                        type: 'value',
                        name: '數量',
                        max: 1000,
                        min: 0,
                        show: true,
                        interval: 500,
                        // 改變y軸顏色
                        axisLine: {
                            lineStyle: {
                                color: '#00a2e2',
                                width: 1, // 這裏是爲了突出顯示加上的
                            }
                        },
                    },

                    // 右邊顯示機率
                    {
                        splitLine: {　　　　 show: false　　 },
                        type: 'value',
                        name: '機率',
                        min: 0,
                        max: 100,
                        interval: 10,
                        // 改變y軸顏色
                        axisLine: {
                            lineStyle: {
                                color: '#00a2e2',
                                width: 1, // 這裏是爲了突出顯示加上的
                            }
                        },
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    }

                ],

                // 每一個設備分數量、機率2個指標，只要讓他們的name一致，便可經過，legeng進行統一的切換
                series: [{
                        name: '',
                        type: 'bar',
                        symbol: 'circle', // 折線點設置爲實心點
                        symbolSize: 6, // 折線點的大小

                        data: y_data,
                        barWidth: '50%',

                    },
                    {
                        //折線
                        name: '',
                        type: 'line',
                        symbol: 'circle', // 折線點設置爲實心點
                        symbolSize: 6, // 折線點的大小

                        yAxisIndex: 1, // 這裏要設置哪一個y軸，默認是最左邊的是0，而後1，2順序來。
                        data: y2_data,
                        symbolSize: 10,
                        itemStyle: {
                            normal: {
                                color: "#DDA0DD"
                            }

                        }

                    },

                ]

            });
        }
    </script>
</html>

本身寫的一個test.json模擬數據：html

{
    "echatX": [
        "2019-07-02",
        "2019-07-03",
        "2019-07-04",
        "2019-07-05",
        "2019-07-06",
        "2019-07-07",
        "2019-07-08",
        "2019-07-09",
        "2019-07-10",
        "2019-07-11",
        "2019-07-12",
        "2019-07-13",
        "2019-07-14",
        "2019-07-15"
    ],
    "echatY": [
        501,210,123,333,445,157,151,369,101,101,350,435,153,100
    ],
    "echatY2": [
      80,40,13,36,57,77,41,39,61,31,60,73,33,50
    ],
    "peopleTotal":15,"peopleOnline":4,"peopleOutline":12,"ranges":[]
}