echarts相关设置
1.显示隐藏工具栏

注释toolbox即可
/* toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},*/
2.鼠标划过数据显示对应的数据
tooltip : {
trigger: 'axis'//设置这个即可 划过显示数据
},
3.修改不同产品分类(legend)的样式
textStyle: {
fontSize: 12,
color: '#fff'//显示的字体颜色
}
4.修改图标的位置
grid: {
show: true,
left: 35, //组件离容器左侧的距离,百分比字符串或整型数字
top: 25, //组件离容器上侧的距离,百分比字符串或整型数字
//bottom:40//组件离容器底部的距离,百分比字符串或整型数字
},
5.柱状图中的柱状样式
var labelOption = {
normal: {
show: true,
position: 'top',//数据显示在柱状体的位置
align: 'middle',
verticalAlign: 'bottom',
formatter: '{c}',
fontSize: 14,
color: '#fff',
rotate: 35,//显示数据旋转的角度
fontWeight: 'normal',
}
};
使用:
series : [
{
name:'07010011',
type:'bar',
data:[800, 530, 520, 512, 480],
color:'#7BB0E4',
label:labelOption
},
{
name:'90612011',
type:'bar',
data:[180, 460, 9.0, 26.4, 28.7],
color:'#404048',
label:labelOption
},
{
name:'07810011',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7],
color:'#8DEC6E',
label:labelOption
},
]
6.修改y坐标的数据信息
1>数据固定
在 yAxis 增加max 和min 属性
yAxis: {
type: 'value',
max:1000,
min:0,
...
}
2>数据大小不固定
在 yAxis 的 axisLabel中增加
formatter: function formatter(value, index) {
//使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
if (value >= 250) {
value = (value + "").slice(0, -3);
return value + "K";
} else {
return value;
}
},
来源:https://blog.csdn.net/sinat_32900379/article/details/85157730
echarts相关设置的更多相关文章
- Xcode 生成静态库相关设置:
Xcode 生成静态库相关设置: #Build Setting1. Architectures ------- Architectures -----> $(ARCHS_STANDARD) -- ...
- Eclipse相关设置与优化
原文:http://chaoxz2005.blog.163.com/blog/static/15036542013411105519685/ 一般在不对eclipse进行相关设置的时候,使用eclip ...
- zend studio 9.0.4 破解、汉化和字体颜色及快捷键相关设置
转载:http://www.penglig.com/post-45.html 下载:http://www.geekso.com/component/zendstudio-downloads/ 破解:h ...
- 使用VIRTUALBOX安装ANDROID系统 | 图文教程 | 相关设置
使用VIRTUALBOX安装ANDROID系统 | 图文教程 | 相关设置 http://icaoye.com/virtualbox-run-android/
- 关于myeclipse中maven项目转换相关设置
关于myeclipse中maven项目转换相关设置 在myeclipse菜单中,Configure->Convert to Maven Project 这个菜单 如果没有的话,需要做如下设置: ...
- [Other] 自定义MIME类型支持FLV的相关设置
刚测试知道为何服务器无法播放flv的原因,特此记录而已. 网络空间支持FLV的相关设置,就是自定义一个MIME类型,一般虚拟主机管理里面都有这个选项 自定义MIME类型 扩展名: .flv MIME类 ...
- NPOI 教程 - 3.2 打印相关设置
转:http://www.cnblogs.com/wolfplan/archive/2013/01/13/2858991.html NPOI 教程 - 3.2 打印相关设置 打印设置主要包括方向设 ...
- 手机3D游戏开发:自定义Joystick的相关设置和脚本源码
Joystick在手游开发中非常常见,也就是在手机屏幕上的虚拟操纵杆,但是Unity3D自带的Joystick贴图比较原始,所以经常有使用自定义贴图的需求. 下面就来演示一下如何实现自定义JoySti ...
- scale相关设置—手动设置
在ggplot2 中,可以进行手动设置的函数有: scale_colour_manual(..., values).scale_fill_manual(..., values). scale_size ...
随机推荐
- centos7 重启网卡报错
systemctl restart network 时候报错: rtnetlink answers file exists 是network和NetworkManager冲突了 一般建议直接 syst ...
- oracle字符乱码的解决方法
原因分析: 客户端字符集就是为了让数据库知道我们传递过去的字符是属于哪种字符集,以便于Oracle在存储字符时进行相应的编码映射(查看客户端字符集通过查找注册表中的NLS_LANG键).在客户端查询数 ...
- do{}while(0)与CC_BREAK_IF的绝妙搭配
从一開始认为没有必要,到认为很好用.我经历了大概两个月的时间,以下来总结一下什么情况下使用这样的结构吧. 第一种情况:当载入文件的时候,假设载入文件失败,须要报错的时候. 当前,能够用try{}cat ...
- 搜索maven的库中某个支持库的的最新版本
首先放网址(建议挂个vpn): maven库中心:http://search.maven.org/ jcenter库中心:https://bintray.com/bintray/jcenter 接下来 ...
- Android双缓冲技术
参考文章: 1.http://djt.qq.com/article/view/987 2.http://blog.csdn.net/i_lovefish/article/details/7913623 ...
- 在express项目中使用redis
在express项目中使用redis 准备工作 安装redis 安装redis桌面管理工具:Redis Desktop Manager 项目中安装redis:npm install redis 开始使 ...
- UGUI随记
<color=#ffef00ff>武器</color>:巨剑 <color=#ffef00ff>种族</color>:人族 <color=#ffe ...
- element开源框架
vue-element-admin:https://gitee.com/accest/bod-element https://gitee.com/liuyuantao/vue-element-ad ...
- BZOJ 1602 [Usaco2008 Oct]牧场行走 dfs
题意:id=1602">链接 方法:深搜暴力 解析: 这题刚看完还有点意思,没看范围前想了想树形DP,只是随便画个图看出来是没法DP的,所以去看范围. woc我没看错范围?果断n^2暴 ...
- 数据库导入Excel-从基础做起
近期一直跟着师傅做考试系统的基础.每天与大量的数据打交道.数据的导入.数据的导出.视图的导入导出.核对信息等等,收获挺多的,培养了自己的耐心和细心,也进一步了解了数据库. 一切从基础做起! 来看看近期 ...