echarts基礎學習之組見tooltip筆記（三）
本次學習的是echarts的組件提示框tooltip，在echarts中很多地方都可以用到tooltip提示框，它可以設置在全局中，可設置在系列中，可設置在座標系中，也可設置在數據項中。
下面介紹提示框tooltip它主要的屬性，詳情可以去官網看點擊打開鏈接
trigger 觸發類型，默認爲item數據項觸發，值有
- item 數據項觸發，主要用於散點圖、餅圖等無類目軸圖表
- axis 座標軸觸發。主要用於柱形圖，線形圖等類目軸
- none 什麼都不觸發
axisPointer 座標軸指示器配置，其內還有一隻屬性配置 showContent 是否顯示懸浮層，默認true alwaysShowContent 是否永遠顯示懸浮層，默認false triggerOn 提示框觸發條件，默認mousemove|click。值爲
- mousemove 鼠標移動觸發
- click 鼠標點擊時觸發
- mousemove|click 鼠標移動時和點擊時觸發
- none 什麼也不觸發
showDelay 提示框顯示延遲，單位ms，默認0，在trigger爲mousemove時有效 hideDelay 提示框隱藏延遲，單位ms，默認100 enetrable 鼠標是否能進入懸浮層，默認false。根據需求，如添加鏈接，按鈕可設置true confine 是否將提示框限制在圖表的區域內 transitionDuration 提示框懸浮層移動過渡動畫時間，單位s，默認值0.4 position 提示框的定位 formatter 提示框的文字的格式器，{a}系列名，{b}數據項名，{c}數據項值，在餅圖中{d}百分比，多個系列的話可{a0}，{a1}，{a2}....，還可回調函數function backgroudColor 提示框的背景顏色 textStyle 提示框的文本顏色 extraCssText 額外附加懸浮層的css樣式 如
tooltip:{ show:true, //是否顯示，默認true trigger:'axis', //觸發類型，座標軸觸發 showContent:true, //是否顯示提示框懸浮 //座標軸指示器 axisPointer:{ //指示器類型，十字準心，默認爲line直線指示器 type:'cross', //指示器的座標軸，自動，默認是類目軸或者時間軸 axis:'x', //指示器標籤 label:{ show:true, color:'#FFC0CB', }, //十字準星的樣式 crossStyle:{ //線的顏色 color:'pink', //線的寬度 width:2, //透明度 opacity:0.8 }, }, //提示框的觸發條件，鼠標移動時 triggerOn:'mousemove', //提示框顯示延遲 showDelay:100, //提示框隱藏延遲 hideDelay:200, //鼠標是否可進去懸浮層 enterable:true, //是否將提示框顯示在圖表的區域內 confine:false, //提示框懸浮層移動過渡動畫的時間，s爲單位 transitionDuration:0.5, //提示框的定位 position:['50%','50%'], //背景顏色 backgroundColor:'#FFB6C1', //提示框文本樣式 textStyle:{ color:'yellow', fontSize:18 } },
案例全部代碼
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>echarts之組件tooltip</title> <!-- 引入echarts --> <script type="text/javascript" src="../js/echarts.js" ></script> </head> <body> <div id="title" style="width: 600px; height: 400px;"></div> <script type="text/javascript"> //初始化echarts var myChart = echarts.init(document.getElementById('title')); //配置 var option = { title:{ //是否顯示，默認true show:true, //標題文本 text:'我的主標題', textStyle:{ //主標題字體顏色 color:'green', //主標題的字體風格，斜體加粗 fontStyle:'oblique', //文字大小 fontSize:24, }, subtext:'我的副標題', //副標題樣式 subtextStyle:{ color:'#FF4500', fontSize:15 }, //距離容器左邊的距離，居中，九宮格佈局 left:'center', }, legend:{ //是否顯示，默認true show:true, //圖例類型，普通類型 type:'plain', //圖例數據與series的name對應 data:[{name:'圖例1',icon:'image://../resources/images/smartphone3.png'},{name:'圖例2'}], //離容器左邊的距離，左對齊 left:'center', //離容器頂端的距離，靠底端 top:'bottom', //圖例佈局的朝向，水平 orient:'horizontal', //圖例與文本的對齊方式，默認auto align:'right', //圖例之間的間距 itemGap:10, //圖形的寬高 itemWidth:25, itemHeight:14, symbolKeepAspect:true, //文字格式器，支持函數 formatter:'{name}數據', //圖例選擇模式，多選模式 selectMode:'multiple', //圖例關閉時的顏色，默認爲#CCC inactiveColor:'#48D1CC', //圖例選中狀態 selected:{ '圖例1':true, '圖例2':false }, //文本樣式 textStyle:{ color:'#FFD700', fontSize:16 }, //提示框，默認不顯示 tooltip:{ show:false }, }, tooltip:{ show:true, //是否顯示，默認true trigger:'axis', //觸發類型，座標軸觸發 showContent:true, //是否顯示提示框懸浮 //座標軸指示器 axisPointer:{ //指示器類型，十字準心，默認爲line直線指示器 type:'cross', //指示器的座標軸，自動，默認是類目軸或者時間軸 axis:'x', //指示器標籤 label:{ show:true, color:'#FFC0CB', }, //十字準星的樣式 crossStyle:{ //線的顏色 color:'pink', //線的寬度 width:2, //透明度 opacity:0.8 }, }, //提示框的觸發條件，鼠標移動時 triggerOn:'mousemove', //提示框顯示延遲 showDelay:100, //提示框隱藏延遲 hideDelay:200, //鼠標是否可進去懸浮層 enterable:true, //是否將提示框顯示在圖表的區域內 confine:false, //提示框懸浮層移動過渡動畫的時間，s爲單位 transitionDuration:0.5, //提示框的定位 position:['50%','50%'], //背景顏色 backgroundColor:'#FFB6C1', //提示框文本樣式 textStyle:{ color:'yellow', fontSize:18 } }, xAxis:{ type:'category', data:['小米','魅族','華爲','蘋果','一加'] }, yAxis:{ name:'銷量', axisLabel:{ formatter:'{value}萬' } }, series:[ { name:'圖例1', type:'bar', data:[15,45,78,56,45] }, { name:'圖例2', type:'line', data:[15,45,78,56,45] } ] }; //顯示 myChart.setOption(option); </script> </body> </html>效果圖
