echarts高级
常用,待续...
♣tooltip自动轮播


♣ 实现数据自动轮播

原理:其实就是timeline,获取某几段(时间)的数据,然后隐藏timeline

♣ legend自动轮播


♣ 左侧多字出省略号

formatter: (item, index) =>{
let icon = item.length > 5 ? item.substring(0, 5) + '...' : item;
}
♣ 自定义lengend

利用rich


♣ 获取多个数据最大值

// 所有数据最大值
let itemData = [784, 6854, 58, 365];
let maxValue = Math.max.apply(null, itemData);
♣ 对象按某个字段降序

chartData.sort((a, b) => {
return a.value - b.value
})
♣ 给pie加复杂背景图
给pie加复杂背景图,并且浏览器resize不会变形
最简单最粗暴的方法,是给父div加背景图

.circle1 {
background: url("~assets/images/pieBg2.png") 0 0 / 100% 100% no-repeat;
background-size: contain;
background-position: center;
}
这篇文章,css处理方法也非常赞
http://zihua.li/2013/12/keep-height-relevant-to-width-using-css/
echarts高级的更多相关文章
- ECharts一个强大的商业产品图表库
Architecture ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表库,底层基于ZRender,创建了坐标系,图例,提示,工具箱等基础组件,并在此上构 ...
- 开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts
开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts 本人项目中最近有需要图表的地方,偶然发现一款超级漂亮的动态图标js图表控件,分享给大家,觉得好用的就看一下.更多更漂亮的演示大家可 ...
- react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
- Vue如何使用动态刷新Echarts组件
这次给大家带来Vue如何使用动态刷新Echarts组件,Vue使用动态刷新Echarts组件的注意事项有哪些,下面就是实战案例,一起来看一下. 需求背景:dashboard作为目前企业中后台产品的“门 ...
- 开源的数据可视化JavaScript图表库:ECharts
ECharts (Enterprise Charts 商业产品图表库)是基于HTML5 Canvas的一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽 ...
- 【推荐】开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts
本人项目中最近有需要图表的地方,偶然发现一款超级漂亮的动态图标js图表控件,分享给大家,觉得好用的就看一下.更多更漂亮的演示大家可以参考下面两个网址:ECharts官方网址:http://ecomfe ...
- 图表制作工具之ECharts
简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...
- 流量分析系统----讲解-echarts模拟迁移(结合china.js)
百度 Echarts 地图->模拟迁徙,实现自动切换地图 小航哥注释: 1.本文主要是把模拟迁移的流程讲了一遍,讲的很好.具体实现参考航哥这篇随笔“流量分析系统----实现-echarts模拟迁 ...
- echarts学习笔记(部分angular及ant-design)
1.在项目中修改ng-zorro组件默认样式的一些方法: 类名等 前加::ng-deep: 类名等 前加:root: 类名等 前加:host /deep/: 2.echarts横轴自定义时间粒度 两种 ...
随机推荐
- Day 7 :一句话Python(匿名函数-lambda,三元运算,列表表达式,生成器表达式)
注意: 1.所有的列表表达式都可以转换成生成器表达式 2.经量让标傲世简化你得操作,增加代码可读性 3.如果代码过于复杂,应该转换成普通代码 4.再代码中尽可能多使用生成器表达式. 三元运算符:简化代 ...
- 【工具原则】5W2H法学习笔记
目录 问题描述 事件(原因)描述 任务描述 方案决策 小结 5W2H法又叫七问分析法,是二战中美国陆军兵器修理部首创.按事务构成要素,从规范的七个方面思考,避免疏忽遗漏. 可以应用在:问题描述.事件描 ...
- SparkListener监听使用方式及自定义的事件处理动作
本文针对spark 2.0+版本 概述 spark 提供了一系列整个任务生命周期中各个阶段变化的事件监听机制,通过这一机制可以在任务的各个阶段做一些自定义的各种动作.SparkListener便是这些 ...
- nginx代理配置备份
补充: 代理对文件大小的限制, server {client_max_body_size 100M;listen 9096;server_name gate.chaohuoyy.com; locati ...
- boost multi_index 插入返回值
boost multi_index 对象插入函数emplace() 的返回值,是一个std::pair<iterator, bool>该pair 的first 是一个插入成功的位置,第二个 ...
- ERROR 1872
解决 > start slave; ERROR (HY000): Slave failed to initialize relay log info structure from the rep ...
- Altera的primary register和secondary register
在Altera的一些IP文档上,提到IP的资源使用情况时,会有primary logic register和secondary logic register这样的术语. 那么什么是primary/se ...
- jupyter|魔法函数问题| UsageError: Line magic function `%` not found
问题: jupyter notebook 使用魔法函数% matplotlib inline,报错:UsageError: Line magic function `%` not found 解决: ...
- git使用过程中问题
git提交文件命令顺序 fetch merge add commit pull push 取消已add文件 git reset HEAD 文件名 覆盖本地文件 git checkout 文件名 $ g ...
- AFO成功
在dcoi一年多,还是发生了不少事情. 过程中也有些小遗憾,有做错的事情,有搞砸的事情,有没办法挽回的事情,这种没法读档的辣鸡游戏也是无可奈何的.对所有被我搞砸的事情说声对不起啦,至少在下一次的时候, ...