欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

echarts爬坑記錄

一、
1、echarts Y軸刻度保留小數(shù)設置，以及設置刻度間隔
默認echarts會給你把最大值，最小值之間的這段距離分為5段，所以如果你的值都在6到6.5之間的話，你就設置min為6，max為6.5就可以

創(chuàng)新互聯(lián)建站長期為1000+客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為金鳳企業(yè)提供專業(yè)的網(wǎng)站制作、做網(wǎng)站，金鳳網(wǎng)站改版等技術(shù)服務。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

2、不顯示柱狀圖上方的數(shù)據(jù)
echarts爬坑記錄
在series里面的label里面進行設置
設置label:{show: false}即可
修改掉changeChartStyle里面的series下面的label對象的normal對象下面的show屬性為false

3、tooltip表示懸浮框，
backgroundColor: "rgba(62,77,95,0.8)"：表示懸浮框的背景顏色，
shadowStyle:{color:'rgba(14,36,64,0.8)'}：表示懸浮框移入到每一列的背景顏色，需要設置type: 'shadow', 才起作用

二、柱狀圖學習

效果圖：
echarts爬坑記錄

對柱形圖各部分分析:（重點） ：
echarts爬坑記錄

實現(xiàn)：
根據(jù)柱形每個部分的專業(yè)名稱去尋找官網(wǎng)中的配置項手冊對應的屬性，然后實現(xiàn)你需要的效果
echarts爬坑記錄

代碼：

<!DOCTYPE html>
<html>
<head>
    <title>echarts</title>
</head>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>

<body ><!--  -->
    <div id="_top" >
    </div>
</body>
<script type="text/javascript">
     // 基于準備好的dom，初始化echarts實例
     var myChart = echarts.init(document.getElementById('_top'));

     // 指定圖表的配置項和數(shù)據(jù)
        var option = {
            //--------------    標題 title  ----------------   
            title: {                                
                text: '主標題',                
                textStyle:{                 //---主標題內(nèi)容樣式    
                    color:'#fff'
                },

                subtext:'副標題',          //---副標題內(nèi)容樣式
                subtextStyle:{
                    color:'#bbb'                
                },

                padding:[0,0,100,100]               //---標題位置,因為圖形是是放在一個dom中,因此用padding屬性來定位

            },

            //----------------   圖例 legend  -----------------
            legend: {
                type:'plain',               //----圖例類型，默認為'plain'，當圖例很多時可使用'scroll'
                top:'1%',                   //----圖例相對容器位置,top\bottom\left\right            
                selected:{
                    '銷量':true,          //----圖例選擇,圖形加載出來會顯示選擇的圖例，默認為true
                },
                textStyle:{                 //----圖例內(nèi)容樣式
                    color:'#fff',               //---所有圖例的字體顏色
                    //backgroundColor:'black',  //---所有圖例的字體背景色
                },              
                tooltip:{                   //圖例提示框，默認不顯示
                    show:true,
                    color:'red',
                },
                data:[                      //----圖例內(nèi)容
                    {
                        name:'銷量',
                        icon:'circle',          //----圖例的外框樣式
                        textStyle:{
                            color:'#fff',       //----單獨設置某一個圖例的顏色
                            //backgroundColor:'black',//---單獨設置某一個圖例的字體背景色
                        }
                    }
                ],                      
            },

            //--------------   提示框 -----------------
            tooltip: {
                show:true,                  //---是否顯示提示框,默認為true
                trigger:'item',             //---數(shù)據(jù)項圖形觸發(fā)
                axisPointer:{               //---指示樣式
                    type:'shadow',      
                    axis:'auto',    

                },
                padding:5,
                textStyle:{                 //---提示框內(nèi)容樣式
                    color:"#fff",           
                },
            },

            //-------------  grid區(qū)域  ----------------
            grid:{
                show:false,                 //---是否顯示直角坐標系網(wǎng)格
                top:80,                     //---相對位置，top\bottom\left\right  
                containLabel:false,         //---grid 區(qū)域是否包含坐標軸的刻度標簽
                tooltip:{                   //---鼠標焦點放在圖形上，產(chǎn)生的提示框
                    show:true,  
                    trigger:'item',         //---觸發(fā)類型
                    textStyle:{
                        color:'#666',
                    },
                }
            },

            //-------------   x軸   -------------------
            xAxis: {
                show:true,                  //---是否顯示
                position:'bottom',          //---x軸位置
                offset:0,                   //---x軸相對于默認位置的偏移
                type:'category',            //---軸類型，默認'category'
                name:'月份',              //---軸名稱
                nameLocation:'end',         //---軸名稱相對位置
                nameTextStyle:{             //---坐標軸名稱樣式
                    color:"#fff",
                    padding:[5,0,0,-5], //---坐標軸名稱相對位置
                },
                nameGap:15,                 //---坐標軸名稱與軸線之間的距離
                //nameRotate:270,           //---坐標軸名字旋轉(zhuǎn)

                axisLine:{                  //---坐標軸 軸線
                    show:true,                  //---是否顯示

                    //------------------- 箭頭 -------------------------
                    symbol:['none', 'arrow'],   //---是否顯示軸線箭頭
                    symbolSize:[8, 8] ,         //---箭頭大小
                    symbolOffset:[0,7],         //---箭頭位置

                    //------------------- 線 -------------------------
                    lineStyle:{
                        color:'#fff',
                        width:1,
                        type:'solid',
                    },
                },
                axisTick:{                  //---坐標軸 刻度
                    show:true,                  //---是否顯示
                    inside:true,                //---是否朝內(nèi)
                    lengt:3,                    //---長度
                    lineStyle:{
                        //color:'red',          //---默認取軸線的顏色
                        width:1,
                        type:'solid',
                    },
                },
                axisLabel:{                 //---坐標軸 標簽
                    show:true,                  //---是否顯示
                    inside:false,               //---是否朝內(nèi)
                    rotate:0,                   //---旋轉(zhuǎn)角度   
                    margin: 5,                  //---刻度標簽與軸線之間的距離
                    //color:'red',              //---默認取軸線的顏色
                },
                splitLine:{                 //---grid 區(qū)域中的分隔線
                    show:false,                 //---是否顯示，'category'類目軸不顯示，此時我的X軸為類目軸，splitLine屬性是無意義的
                    lineStyle:{
                        //color:'red',
                        //width:1,
                        //type:'solid',
                    },
                },
                splitArea:{                 //--網(wǎng)格區(qū)域
                    show:false,                 //---是否顯示，默認false
                },              
                data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],//內(nèi)容
            },

            //----------------------  y軸  ------------------------
            yAxis: {
                show:true,                  //---是否顯示
                position:'left',            //---y軸位置
                offset:0,                   //---y軸相對于默認位置的偏移
                type:'value',           //---軸類型，默認'category'
                name:'銷量',              //---軸名稱
                nameLocation:'end',         //---軸名稱相對位置value
                nameTextStyle:{             //---坐標軸名稱樣式
                    color:"#fff",
                    padding:[5,0,0,5],  //---坐標軸名稱相對位置
                },
                nameGap:15,                 //---坐標軸名稱與軸線之間的距離
                //nameRotate:270,           //---坐標軸名字旋轉(zhuǎn)

                axisLine:{                  //---坐標軸 軸線
                    show:true,                  //---是否顯示

                    //------------------- 箭頭 -------------------------
                    symbol:['none', 'arrow'],   //---是否顯示軸線箭頭
                    symbolSize:[8, 8] ,         //---箭頭大小
                    symbolOffset:[0,7],         //---箭頭位置

                    //------------------- 線 -------------------------
                    lineStyle:{
                        color:'#fff',
                        width:1,
                        type:'solid',
                    },
                },
                axisTick:{                  //---坐標軸 刻度
                    show:true,                  //---是否顯示
                    inside:true,                //---是否朝內(nèi)
                    lengt:3,                    //---長度
                    lineStyle:{
                        //color:'red',          //---默認取軸線的顏色
                        width:1,
                        type:'solid',
                    },
                },
                axisLabel:{                 //---坐標軸 標簽
                    show:true,                  //---是否顯示
                    inside:false,               //---是否朝內(nèi)
                    rotate:0,                   //---旋轉(zhuǎn)角度   
                    margin: 8,                  //---刻度標簽與軸線之間的距離
                    //color:'red',              //---默認取軸線的顏色
                },
                splitLine:{                 //---grid 區(qū)域中的分隔線
                    show:true,                  //---是否顯示，'category'類目軸不顯示，此時我的y軸為類目軸，splitLine屬性是有意義的
                    lineStyle:{
                        color:'#666',
                        width:1,
                        type:'dashed',          //---類型
                    },
                },
                splitArea:{                 //--網(wǎng)格區(qū)域
                    show:false,                 //---是否顯示，默認false
                }                        
            },

            //------------ 內(nèi)容數(shù)據(jù)  -----------------
            series: [
                {
                    name: '銷量',             //---系列名稱
                    type: 'bar',                //---類型
                    legendHoverLink:true,       //---是否啟用圖例 hover 時的聯(lián)動高亮
                    label:{                     //---圖形上的文本標簽
                        show:false,
                        position:'insideTop',   //---相對位置
                        rotate:0,               //---旋轉(zhuǎn)角度
                        color:'#eee',
                    },
                    itemStyle:{                 //---圖形形狀
                        color:'blue',
                        barBorderRadius:[18,18,0,0],
                    },
                    barWidth:'20',              //---柱形寬度
                    barCategoryGap:'20%',       //---柱形間距
                    data: [3020, 4800, 3600, 6050, 4320, 6200,5050,7200,4521,6700,8000,5020]
                }
            ]
        };

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

三、修改懸浮框tooltip里面的文字顯示
在tooltip里面，定義
formatter:function(params){
return params[0].axisValue.slice(1)+ " 火警數(shù)："+params[0].value
}
params表示每一條數(shù)據(jù)的對象
echarts爬坑記錄

怎么給列表添加數(shù)字排序呢
echarts爬坑記錄
在yAxis里面添加

axisLabel:{
interval: 0,
margin: 225,
            textStyle: {
                    align: 'left',
                    fontSize: 13
            },
            rich: {
                    a: {
                            color: '#fff',
                            backgroundColor: '#FAAA39',
                            width: 20,
                            height: 20,
                            align: 'center',
                            borderRadius: 2
                    },
                    b: {
                            color: '#fff',
                            backgroundColor: '#4197FD',
                            width: 20,
                            height: 20,
                            align: 'center',
                            borderRadius: 2
                    }
            },
            formatter: function(params) {
                    if (parseInt(params.slice(0, 1)) < 3) {
                            return [
                                    '{a|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
                            ].join('\n')
                    } else {
                            return [
                                    '{b|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)
                            ].join('\n')
                    }
            }
}

然后，在給yAxis賦值的時候，添加數(shù)字序號

var nxData = [];
for (var i = xData.length-1; i >=0; i--) {
        nxData.push(i + xData[i]);  //nxData這里面就包含了數(shù)字序號
}
CHART["_topUnitResult"].setOption({
    yAxis: {
        type: 'category',
        data: nxData,
    },
    series: [{
        name: '報警數(shù)',
        type: 'bar',
        data: yData
    }]
});

文章名稱：echarts爬坑記錄
URL分享：http://chinadenli.net/article38/gichsp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供域名注冊、網(wǎng)站內(nèi)鏈、微信小程序、品牌網(wǎng)站設計、網(wǎng)站收錄、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應式網(wǎng)站建設