echarts 實現資料(tooltip)自動輪播外掛
阿新 • • 發佈:2018-11-08
前言
最近, 工作中要做類似這種的專案. 用到了百度的 echarts 這個開源的資料視覺化的框架.
因為投屏專案不像PC端的WEB, 它不允許使用者用滑鼠鍵盤等互動. 有些圖表只能看到各部分的佔比情況, 不能顯示具體的數值.
比如:
得讓頁面的資料(即tootips)自動輪播資料,效果是這樣的.
所以 echarts-auto-tooltips 就應運而生.
使用方法
- 引入ehcrts-auto-tooltips
<script type="text/javascript" src="js/echarts-auto-tooltip.js"></script>
- 在初始化 echarts 例項並通過 setOption 方法生成圖表的程式碼下新增如下程式碼
// 使用指定的配置項和資料顯示圖表
myChart.setOption(option);
tools.loopShowTooltip(myChart, option, {loopSeries: true}); // 使用本外掛
引數說明
mychart: 初始化echarts的例項
option: 指定圖表的配置項和資料
loopOption: 本外掛的配置
屬性 | 說明 | 預設值 |
---|---|---|
interval | 輪播時間間隔,單位毫秒 | 預設為2000 |
loopSeries | true表示迴圈所有series的tooltip,false則顯示指定seriesIndex的tooltip | boolean型別,預設為false |
seriesIndex | 指定某個系列(option中的series索引)迴圈顯示tooltip,當loopSeries為true時,從seriesIndex系列開始執行. | 預設為0 |
例項程式碼
function drawSensitiveFile() { let myChart = echarts.init(document.getElementById('sensitive-file')); let option = { title: { text: '敏感檔案分佈分析', x: '40', textStyle: { color: '#fff' } }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)", }, legend: { type: 'scroll', orient: 'vertical', right: 10, top: 20, bottom: 20, data: ['人事類', '研發類', '營銷類', '客戶資訊類'], textStyle: { color: '#fff' } }, series: [ { name: '敏感檔案分佈數量', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 335, name: '人事類'}, {value: 310, name: '研發類'}, {value: 234, name: '營銷類'}, {value: 1548, name: '客戶資訊類'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, labelLine: { normal: { //length:5, // 改變標示線的長度 lineStyle: { color: "#fff" // 改變標示線的顏色 } }, }, label: { normal: { textStyle: { color: '#fff' // 改變標示文字的顏色 } } }, } ] }; myChart.setOption(option); tools.loopShowTooltip(myChart, option, {loopSeries: true}); }