Echarts_1:水平柱體 - zszs－IT工程師數位筆記本

文章出處

Echarts：http://echarts.baidu.com/index.html

這下面是我自己總結的一些配置注釋，分享~

效果圖：

小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>張賽</title>
</head>
<body>
    <div id="div_main" style="height: 800px; width: 1200px"></div>
    <script src="../js/echarts/echarts3.2.2.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("div_main"));
        //數據處理
        var orderY = ['1', '2'], contrasY = ['3', '4'], xAxisData = ['名字1', '名字2'], danWei = "個", showData = ['數量1', '數量2'], danWeiArry = ['定單數量', '合同數量'];
        var colors = ['#5793f3', '#d14a61', '#675bba'];
        // 指定圖表的配置項和數據
        var option = {
            title: {
                //標題
                text: '訂單-合同統計',
                //subtext: '張賽',
                //sublink: 'http://weibo.com/u/5688524679/home?leftnav=1'//點擊subtext跳轉地址
            },
            toolbox: {
                //設置右上角的圖標（切換折線圖，下載什么的）
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            tooltip: {
                trigger: 'axis',//當顯示的信息需要綜合的時候需添加
                showDelay: 0, // 顯示延遲，添加顯示延遲可以避免頻繁切換，單位ms
                axisPointer: {            // 坐標軸指示器，坐標軸觸發有效
                    type: 'shadow'        // 默認為直線，可選為：‘line‘ | ‘shadow‘,鼠標放上時候的樣式
                }
                //,
                //formatter: function (params) {
                //    //設置鼠標放在柱體上時的顯示內容，formatter沒有會默認
                //    //var tar0 = params[0];
                //    //var tar1 = params[1];
                //    //return tar0.name + '<br/>' + tar0.seriesName + ' : ' + tar0.value + '<br/>' + tar1.seriesName + ' : ' + tar1.value;
                //}
            },
            legend: {
                data: showData//圖標正中間上方的分類，series中的name出現在這的柱體才會顯示
            },
            dataZoom: [
                    //鼠標滾軸放大配置
                        {
                            show: true,
                            start: 94,
                            end: 100
                        },
                        {
                            type: 'inside',
                            start: 94,
                            end: 100
                        },
                        {
                            show: true,
                            yAxisIndex: 0,
                            filterMode: 'empty',
                            width: 30,
                            height: '80%',
                            showDataShadow: false,
                            left: '93%'//設置豎排放大軸
                        }
            ],
            //calculable: false,
            grid: { // 控制圖的大小，調整下面這些值就可以，
                x: 120,
                x2: 170,
                y2: 200,// y2可以控制 X軸跟Zoom控件之間的間隔，避免以為傾斜后造成 label重疊到zoom上
            },
            xAxis: {
                //x軸相關設置
                //每個柱體的名稱
                data: xAxisData,
                type: 'category',
                axisLabel: {
                    interval: 0,//坐標軸刻度標簽的顯示間隔，在類目軸中有效。默認會采用標簽不重疊的策略間隔顯示標簽。可以設置成 0 強制顯示所有標簽。如果設置為 1，表示『隔一個標簽顯示一個標簽』，如果值為 2，表示隔兩個標簽顯示一個標簽，以此類推。
                    rotate: 45,//柱體名字偏移的角度數
                    margin: 10,//柱體名字往下的距離,刻度標簽與軸線之間的距離。
                    textStyle: {
                        color: "red"
                    }
                    //,
                    //formatter: function (val) {
                    //    //文字格式化
                    //    return val.split("").join("\n");//使用這個可以是文字豎排放置，但是使用dataZoom的時候會報錯
                    //}
                },
            },
            yAxis: [
                {
                    //y軸設置
                    //設置最大最小和平均值時需要添加
                    type: 'value',
                    name: danWeiArry[0],
                    //position: 'right',//讓y軸在右邊
                    //offset: 80, //如果右邊有兩個y軸，之間的距離
                    axisLine: {
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisLabel: {
                        formatter: '{value}' + danWei
                    }
                },
                {
                    //y軸設置
                    //設置最大最小和平均值時需要添加
                    type: 'value',
                    name: danWeiArry[1],
                    //position: 'right',//讓y軸在右邊
                    //offset: 80, //如果右邊有兩個y軸，之間的距離
                    axisLine: {
                        lineStyle: {
                            color: colors[1]
                        }
                    },
                    axisLabel: {
                        formatter: '{value}' + danWei
                    }
                },
            ],
            series: [
                {
                    //數據配置
                    name: showData[0],//柱體的名稱
                    type: 'bar',//數據樣式：bar（柱狀），line（折線）
                    data: orderY,//數據數組[1,2 ,3 ,4 ,5]
                    barWidth: 80,//設置柱體的寬度
                    //stack: '堆疊柱體',//設置柱體的分類，堆疊順序按series下的數組順序
                    label: {
                        normal: {
                            show: true,//設置柱體數值是否顯示
                            position: 'top'//設置柱體數值顯示的位置：top,bottom,insideRight,insideLeft,默認是中間
                        }
                    },
                    //itemStyle: {
                    //    normal: {
                    //        barBorderColor: 'rgba(0,0,0,0)',//柱體背景色
                    //        color: '#C25552'//柱體本來的顏色
                    //    },
                    //    emphasis: {
                    //        barBorderColor: 'rgba(0,0,0,0)',//鼠標放到柱體上時柱體背景色
                    //        color: '#C25552'//鼠標放到柱體上時柱體的顏色
                    //    }
                    //},
                    markPoint: {
                        //顯示最大最小值
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                    markLine: {
                        //顯示平均值
                        data: [
                            { type: 'average', name: '平均值' }
                        ]
                    }
                }
                ,
                 {
                     //數據配置
                     name: showData[1],//柱體的名稱
                     type: 'bar',//數據樣式：bar（柱狀），line（折線）
                     yAxisIndex: 1,
                     data: contrasY,//數據數組[1,2 ,3 ,4 ,5]
                     barWidth: 80,//設置柱體的寬度
                     //stack: '堆疊柱體',//設置柱體的分類，堆疊順序按series下的數組順序
                     label: {
                         normal: {
                             show: true,//設置柱體數值是否顯示
                             position: 'top'//設置柱體數值顯示的位置：top,bottom,insideRight,insideLeft,默認是中間
                         }
                     },
                     //itemStyle: {
                     //    normal: {
                     //        barBorderColor: 'rgba(0,0,0,0)',//柱體背景色
                     //        color: '#2F4554'//柱體本來的顏色
                     //    },
                     //    emphasis: {
                     //        barBorderColor: 'rgba(0,0,0,0)',//鼠標放到柱體上時柱體背景色
                     //        color: '#2F4554'//鼠標放到柱體上時柱體的顏色
                     //    }
                     //},
                     markPoint: {
                         //顯示最大最小值
                         data: [
                             { type: 'max', name: '最大值' },
                             { type: 'min', name: '最小值' }
                         ]
                     },
                     markLine: {
                         //顯示平均值
                         data: [
                             { type: 'average', name: '平均值' }
                         ]
                     }
                 }
            ]
        };
        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>