echarts 实现数据(tooltip)自动轮播插件

当前位置:首页ballbet贝博APP >

ballbet贝博APP

echarts 实现数据(tooltip)自动轮播插件

时间:2019-06-10本站浏览次数:82

       

前言

最近, 工作中要做类似这种的项目. 用到了百度的 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
loopSeriestrue表示循环所有series的tooltip,false则显示指定seriesIndex的tooltipboolean类型,默认为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});}




公司地址:浙江杭州市拱墅区祥园路中国(杭州)智慧信息产业园3号楼11楼
联系人:练华思 13612614397
陶英林 15143036567
电话:15177641524 传真:rc23smg5z@sina.com
邮箱:t6f06fihz@gmail.com

粤公网安备 44030702001579号

ballbet贝博APP@