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 ...
随机推荐
- 02-2设置第一启动项--进入Bios界面设置U盘为第一启动项
进入Bios界面设置U盘为第一启动项: 开机,当电脑处于启动状态,屏幕显示电脑LOGO时,按下F2键.(根据电脑的不同,进入BIOS的功能键也不同,可根据自己电脑的型号百度搜索相关功能键) 按电脑方向 ...
- nodeJS 中关于 promise 的使用
var readInfo = function (fileName) { var defer = q.defer(); fs.readFile(fileName, {encoding:'utf-8'} ...
- SPI协议介绍
一.概述 SPI, Serial Perripheral Interface, 串行外围设备接口, 是 Motorola 公司推出的一种同步串行接口技术. SPI 总线在物理上是通过接在外围设备微控制 ...
- “-Xmx1024m -Xms1024m -Xmn512m -Xss256k”——Java运行参数
[JAVA学习]“-Xmx1024m -Xms1024m -Xmn512m -Xss256k”——Java运行参数 转载 2016年06月13日 19:33:38 2792 年轻代 年老代概念 htt ...
- Linux与本地上传下载文件
当出于安全原因,客户的服务器不允许使用windows第三方插件连接的时候,本地windows跟远程的linux服务器进行文件的上下传受到了限制,此时可以在linux服务器上安装一个工具:lrzsz.安 ...
- python入门课程 第3章 Python变量和数据类型
第3章 Python变量和数据类型3-1 Python中数据类型计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形 ...
- 关于IIS上Yii2的Url路由美化
Yii2默认的路由是酱紫的 http://.../admin/web/index.php?r=site/login 心中理想的美化Url应该这样 http://.../admin/web/site/ ...
- 【很强大的Android图表引擎 - AChartSDK】
在手机移动App开发中,图表在app中越来越占领举足轻重的地图.而在Android领域.AchartEngine 图表引擎可谓无人不知无人不晓. 可是今天就给各位推荐更为强大的图表引擎. 为什么说更为 ...
- 纯JS实现动态时间
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- com.netflix.hystrix.contrib.javanica.exception.FallbackDefinitionException: fallback method wasn't found: serviceError([class java.lang.String]) 异常
在使用spring cloud 的 Hystrix 后可能会遇到 如下截图错误: 后台代码如下: 找了好一会经过分析参数方法和原方法参数步一致造成: 修改后代码如下: