echarts 實現數據(tooltip)自動輪播插件
阿新 • • 發佈:2018-10-21
mat inter n) itl com header end label function
前言
最近, 工作中要做類似這種的項目. 用到了百度的 echarts 這個開源的數據可視化的框架.
因為投屏項目不像PC端的WEB, 它不允許用戶用鼠標鍵盤等交互. 有些圖表只能看到各部分的占比情況, 不能顯示具體的數值.
比如:
得讓頁面的數據(即tootips)自動輪播數據,效果是這樣的.
所以 echarts-auto-tooltips 就應運而生.
github地址
使用方法
- 引入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}); }
echarts 實現數據(tooltip)自動輪播插件