## 前言
最近, 工作中要做类似这种的项目. 用到了百度的 [echarts](http://echarts.baidu.com) 这个开源的数据可视化的框架.
[![安全态势感知](https://z3.ax1x.com/2021/09/10/hOfNgf.jpg)](https://imgtu.com/i/hOfNgf)
因为投屏项目不像PC端的WEB, 它不允许用户用鼠标键盘等交互. 有些图表只能看到各部分的占比情况, 不能显示具体的数值.
比如:
![设计图1](http://wx3.sinaimg.cn/mw690/0060lm7Tly1fwf1gxza98j3076078412.jpg)
![设计图2](http://wx1.sinaimg.cn/mw690/0060lm7Tly1fwf3zn3wmvj30cx0870yw.jpg)
得让页面的数据(即tootips)自动轮播数据,效果是这样的.
![最终效果图1](http://wx1.sinaimg.cn/mw690/0060lm7Tly1fwf1iy6gh9g30ae06t0ul.gif)
![最终效果图2](http://wx2.sinaimg.cn/mw690/0060lm7Tly1fwf1iyqmpmg30bw06rq51.gif)
所以 echarts-auto-tooltips 就应运而生.
[博客地址](http://www.cnblogs.com/liuyishi/)
## 使用方法
1. 引入ehcrts-auto-tooltips
```html
<script type="text/javascript" src="js/echarts-auto-tooltip.js"></script>
```
2. 在初始化 echarts 实例并通过 setOption 方法生成图表的代码下添加如下代码
```js
// 使用指定的配置项和数据显示图表
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|
实例代码
```javascript
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 轮播
共57个文件
js:29个
html:14个
md:4个
需积分: 3 0 下载量 159 浏览量
2023-12-23
10:42:43
上传
评论
收藏 1.69MB 7Z 举报
温馨提示
echarts 甘特图,tooltip 轮播
资源推荐
资源详情
资源评论
收起资源包目录
Echarts设备状态甘特图.7z (57个子文件)
echarts-auto-tooltip.js 6KB
Index.html 9KB
examples - 副本.html 14KB
htmlpage - 副本 (2).html 18KB
echarts.js 3.19MB
dataTool.js 14KB
案例三
LICENSE 11KB
demo
data_simple.js 118B
demo_base.html 6KB
demo_theme.html 822B
data_profession.js 139B
jquery-1.9.1.min.js 90KB
pie-simple.html 2KB
theme
infographic.js 14KB
wonderland.js 14KB
chalk.js 14KB
walden.js 14KB
dark.js 14KB
shine.js 14KB
halloween.js 30KB
vintage.js 14KB
macarons.js 14KB
roma.js 14KB
essos.js 14KB
purple-passion.js 14KB
westeros.js 14KB
echarts.min.js 648KB
demo_ajax.html 6KB
echarts-auto-tooltip.js 6KB
echarts.helper.js 34KB
.gitignore 242B
demo.html 5KB
README.md 5KB
echarts-tooltip-carousel.js 7KB
案例二
examples.html 14KB
bar.gif 109KB
lib
echarts-3.7.2
dist
echarts.js 2.42MB
echarts.min.js 651KB
新建文本文档.txt 56B
.github
ISSUE_TEMPLATE
feature_request.md 595B
bug_report.md 834B
.gitattributes 105B
LICENSE 1KB
echarts-auto-tooltip.js 6KB
examples - 副本.html 14KB
echarts-tooltip-carousel.js 7KB
.gitignore 7B
scatter.gif 138KB
README.md 3KB
update.gif 108KB
line.gif 301KB
柱子闪烁.html 18KB
箱线图.html 6KB
Index1.html 41KB
jquery.js 281KB
jquery.min.js 87KB
htmlpage.html 25KB
共 57 条
- 1
资源评论
YANG-Live
- 粉丝: 1104
- 资源: 15
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功