echarts標準餅圖解讀(一)——提示框（tooltip）配置

時間 2019-11-20
標籤 echarts 標準餅圖解讀提示 tooltip 配置简体版
原文原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- jquery cdn引入 -->
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <!-- echarts 引入 -->
    <script src="echarts.js"></script>
    <style type="text/css">
    </style>
</head>
<body>
<div id="main" style="width:500px;height:500px;"></div>

<script>
    var myChart=echarts.init(document.getElementById('main'));
    //init初始化接口，返回ECharts實例，其中dom爲圖表所在節點
       
    var option = {
        //標題
        title : {
            text: '主標題',
            subtext: '副標題',
            x:'center',
        },


        //提示框，鼠標懸浮交互時的信息提示
        tooltip : {
            show: true,//默認值true，可選爲：true（顯示） | false（隱藏）
            zlevel: 1,//默認值1，一級層疊控制。每個不一樣的zlevel將產生一個獨立的canvas，相同zlevel的組件或圖標將在同一個canvas上渲染。zlevel越高越靠頂層，canvas對象增多會消耗更多的內存和性能，並不建議設置過多的zlevel，大部分狀況能夠經過二級層疊控制z實現層疊控制。
            z: 8,//默認值8，二級層疊控制，同一個canvas（相同zlevel）上z越高約靠頂層。
            showContent: true,//默認值true，tooltip主體內容顯示策略，只需tooltip觸發事件或顯示axisPointer而不須要顯示內容時可配置該項爲false，
            trigger: 'item',//默認值'item'，觸發類型，默認數據觸發，見下圖，可選爲：'item' | 'axis'
            position: null,//默認值null，位置指定，傳入{Array}，如[x, y]， 固定位置[x, y]；傳入{Function}，如function([x, y]) {return [newX,newY]}，默認顯示座標爲輸入參數，用戶指定的新座標爲輸出返回。
            formatter: '{a} < br/>{b} : {c}',//默認值null，內容格式器
            //折線（區域）圖、柱狀（條形）圖、K線圖 : a（系列名稱），b（類目值），c（數值）, d（無）
            //散點圖（氣泡）圖 : a（系列名稱），b（數據名稱），c（數值數組）, d（無）
            //地圖 : a（系列名稱），b（區域名稱），c（合併數值）, d（無）
            //餅圖、雷達圖、儀表盤、漏斗圖: a（系列名稱），b（數據項名稱），c（數值）, d（餅圖：百分比 | 雷達圖：指標名稱）
            islandFormatter: '{a} < br/>{b} : {c}',//默認值'{a} < br/>{b} : {c}'，拖拽重計算獨有，數據孤島內容格式器
            showDelay: 20,//默認值20，顯示延遲，添加顯示延遲能夠避免頻繁切換，特別是在詳情內容須要異步獲取的場景，單位ms
            hideDelay: 100,//默認值100，隱藏延遲，單位ms
            transitionDuration: 0.4,//默認值0.4，動畫變換時長，單位s，若是你但願tooltip的跟隨實時響應，showDelay設置爲0是關鍵，同時transitionDuration設0也會有交互體驗上的差異。
            enterable: false,//默認值false，鼠標是否可進入詳情氣泡中，默認爲false，如需詳情內交互，如添加連接，按鈕，可設置爲true。
            backgroundColor: 'rgba(0,0,0,0.7)',//默認值，提示背景顏色，默認爲透明度爲0.7的黑色
            borderColor: '#333',//默認值，提示邊框顏色
            borderRadius: 4,//默認值，提示邊框圓角，單位px，默認爲4
            borderWidth: 0,//默認值，提示邊框線寬，單位px，默認爲0（無邊框）
            padding: 5,//默認值，提示內邊距，單位px，默認各方向內邊距爲5，接受數組分別設定上右下左邊距，同css
            axisPointer: {//默認值，座標軸指示器，默認type爲line，可選爲：'line' | 'cross' | 'shadow' | 'none'(無)，指定type後對應style生效，見下 
            //lineStyle設置直線指示器（詳見lineStyle）, 
            //crossStyle設置十字準星指示器（詳見lineStyle）, 
            //shadowStyle設置陰影指示器（詳見shadowStyle），areaStyle.size默認爲'auto'自動計算，可指定具體寬度
                type: 'none',//默認值，可選值：'line' | 'cross' | 'shadow' | 'none'(無)，指定type後對應style生效（以下）
                lineStyle: {//默認值各異，
                    color: 'rgba(0,0,0,0.7)',//默認值各異，顏色rgba
                    type: 'solid',//默認值，
                    width: 0,//默認值，
                    shadowColor: 'rgba(0,0,0,0)',//默認值，折線主線(IE8+)有效，陰影色彩，支持rgba
                    shadowBlur: 5,//默認值，折線主線(IE8+)有效，陰影模糊度，大於0有效
                    shadowOffsetX: 3,//默認值，折線主線(IE8+)有效，陰影橫向偏移，正值往右，負值往左
                    shadowOffsetY: 3,//默認值，折線主線(IE8+)有效，陰影縱向偏移，正值往下，負值往上
                },
                crossStyle: {//默認值，
                    color: 'rgba(0,0,0,0.7)',//默認值，
                    type: 'solid',//默認值，
                    width: 0,//默認值，
                    shadowColor: 'rgba(0,0,0,0)',//默認值，
                    shadowBlur: 5,//默認值，
                    shadowOffsetX: 3,//默認值，
                    shadowOffsetY: 3,//默認值，
                },
                shadowStyle: {//默認值，
                    color: 'rgba(0,0,0,0.7)',//默認值，
                    type: 'default',//默認值，
                },
                textStyle: {//默認值，
                    fontFamily: 'Arial, Verdana, sans...',//默認值，
                    fontSize: 12,//默認值，
                    fontStyle: 'normal',//默認值，
                    fontWeight: 'normal',//默認值，
                },
            },
            textStyle: {//默認值，
                color: 'rgba(0,0,0,0.7)',//默認值各異，
                decoration: 'none',//默認值，
                align: 'rgba(0,0,0,0.7)',//默認值，
                baseline: 'rgba(0,0,0,0.7)',//默認值，
                fontFamily: 'Arial, Verdana, sans...',//默認值，
                fontSize: 12,//默認值，
                fontStyle: 'normal',//默認值，樣式，可選爲：'normal' | 'italic' | 'oblique'
                fontWeight: 'normal',//默認值，粗細，可選爲：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
            },
        },



        //圖例，每一個圖表最多僅有一個圖例
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['第一部分','第二部分','第三部分','第四部分']
        },
        // 系列列表,每一個系列經過 type 決定本身的圖表類型
        series : [
            {
                name: '訪問',
                type: 'pie',
                radius : '62%',
                center: ['50%', '65%'],
                minAngle:'15',
                data:[
                    {name:"第一部分",value:4},
                    {name:"第二部分",value:7},
                    {name:"第三部分",value:3},
                    {name:"第四部分",value:1},
                ],
                itemStyle: {
                    normal:{
                        label:{
                            show:true,
                            formatter: "{b} :\n  {c} \n ({d}%)",
                            position:"inner"
                        }
                    }
                }
            }
        ],
    };
    myChart.setOption(option);// 爲echarts對象加載數據
</script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。