echarts 實現資料(tooltip)自動輪播外掛程式

標籤：單位   http   數值   name   分享圖片   頁面   OLE   sha   tst   

前言

最近, 工作中要做類似這種的項目. 用到了百度的 echarts 這個開源的資料視覺效果的架構.

因為投屏項目不像PC端的WEB, 它不允許使用者用滑鼠鍵盤等互動. 有些圖表只能看到各部分的佔比情況, 不能顯示具體的數值.
比如:

得讓頁面的資料(即tootips)自動輪播資料,效果是這樣的.

所以 echarts-auto-tooltips 就應運而生.

github地址

使用方法

1. 引入ehcrts-auto-tooltips

<script type="text/javascript" src="js/echarts-auto-tooltip.js"></script>

1. 在初始化 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)自動輪播外掛程式