Echarts-样式简介
本文介绍这几种方式,他们的功能范畴可能会有交叉(即同一种细节的效果可能可以用不同的方式实现),但是他们各有各的场景偏好。
- 颜色主题(Theme)
- 调色盘
- 直接样式设置(itemStyle、lineStyle、areaStyle、label、...)
- 视觉映射(visualMap)
颜色主题(Theme),这个已经在上一篇发布了,具体引入有相关的两篇文章自己查阅
调色盘
调色盘,可以在 option 中设置。它给定了一组颜色,图形、系列会自动从其中选择颜色。 可以设置全局的调色盘,也可以设置系列自己专属的调色盘。
option = {
// 全局调色盘。
color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
series: [{
type: 'bar',
// 此系列自己的调色盘。
color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
...
}, {
type: 'pie',
// 此系列自己的调色盘。
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
...
}]
}
直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...
直接的样式设置是比较常用设置方式。纵观 ECharts 的 option 中,很多地方可以设置 itemStyle、lineStyle、areaStyle、label 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。
一般来说,ECharts 的各个系列和组件,都遵从这些命名习惯,虽然不同图表和组件中,itemStyle
、label
等可能出现在不同的地方。
直接样式设置的另一篇介绍,参见 个性化图表的样式。
高亮的样式:emphasis
在鼠标悬浮到图形元素上时,一般会出现高亮的样式。默认情况下,高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义,主要是通过 emphasis 属性来定制。emphsis 中的结构,和普通样式的结构相同,例如:
option = {
series: {
type: 'scatter',
// 普通样式。
itemStyle: {
// 点的颜色。
color: 'red'
},
label: {
show: true,
// 标签的文字。
formatter: 'This is a normal label.'
},
// 高亮样式。
emphasis: {
itemStyle: {
// 高亮时点的颜色。
color: 'blue'
},
label: {
show: true,
// 高亮时标签的文字。
formatter: 'This is a emphasis label.'
}
}
}
}
注意:在 ECharts4 以前,高亮和普通样式的写法,是这样的:
option = {
series: {
type: 'scatter',
itemStyle: {
// 普通样式。
normal: {
// 点的颜色。
color: 'red'
},
// 高亮样式。
emphasis: {
// 高亮时点的颜色。
color: 'blue'
}
},
label: {
// 普通样式。
normal: {
show: true,
// 标签的文字。
formatter: 'This is a normal label.'
},
// 高亮样式。
emphasis: {
show: true,
// 高亮时标签的文字。
formatter: 'This is a emphasis label.'
}
}
}
}
这种写法 仍然被兼容,但是,不再推荐。事实上,多数情况下,使用者只会配置普通状态下的样式,而使用默认的高亮样式。所以在 ECharts4 中,支持不写 normal
的配置方法(即本文开头的那种写法),使得配置项更扁平简单。
通过 visualMap 组件设定样式
visualMap 组件 能指定数据到颜色、图形尺寸的映射规则,详见 数据的视觉映射。
Echarts-样式简介的更多相关文章
- Echarts样式
Echarts设置样式如下 <div id="main" style="width: 250px;height:200px;"></div&g ...
- 第三篇、CSS样式简介
<!--1.行内样式 <p style="background-color:red;font-size:20px"> --> <!--2.页内样式 & ...
- Activity 模版样式简介
1:对话框样式. <activity android:theme="@android:style/Theme.Dialog"> 2:透明样式. <activity ...
- input的样式简介
<input type="text" autocomplete="off" placeholder="" x-webkit-speec ...
- 百度echarts样式开发
Echarts如何进行实例化 var a1 = null; a1= echarts.init(document.getElementById('a1')); a1.setOption({ color: ...
- CSS样式简介
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态 ...
- try{futureGirl}catch(Exception){"Kill All Trouble"}——echarts样式
首先先给未来女,解释一下题目吧.这是段代码,我再try{}括号里写了你,意思我会保护你.后面的catch(Exception)是捕捉你的所有麻烦,交给我解决. 今天收工较早,拖着疲惫是身躯回到宿舍,简 ...
- echarts使用简介
1. echarts是百度开源的一个前端图表库 2. 官网地址: https://www.echartsjs.com/zh/index.html 3. 使用介绍: 3.1. 下载echarts.js ...
- echarts样式修改
本人是查看如下链接: http://down.admin5.com/demo/code_pop/cs/dsj/doc/example/themeDesigner.html# 图示很简洁明了.
- 大数据-图表插件-echarts 样式修改(迭代)
修改折线图大小 myChart.setOption({ title:{ text:"价格指数" ...
随机推荐
- C++入门经典-例5.17-右值引用的定义
1:右值引用的定义: 类型 && i=被引用的对象: 左值与右值的区别在于,右值是临时变量,例如,函数的返回值,并且无法被改变. 当右值引用被初始化后,临时变量消失. 代码如下: // ...
- LeetCode 129. 求根到叶子节点数字之和(Sum Root to Leaf Numbers)
题目描述 给定一个二叉树,它的每个结点都存放一个 0-9 的数字,每条从根到叶子节点的路径都代表一个数字. 例如,从根到叶子节点路径 1->2->3 代表数字 123. 计算从根到叶子节点 ...
- Watir单元库
http://www.cnblogs.com/Javame/p/4045229.html test: #require 'net/http' #require 'uri' #url = URI.par ...
- for 循环 以及 for 循环的嵌套
格式:for (; ; ) 打印20遍你好 ; i <= ; i++) { Console.WriteLine("你好"); } 输入一个整数,计算从1加到这个数的结果 Co ...
- jquery 登录判断遇到的小问题
1.碰到的第一个问题是: 往body上加载check,用load不管用,可以用ready试试. 2.原来jquery里获取用的val(),我一直以为是value()... 尴尬 3.两个标志位是为了判 ...
- shell 并发进程的例子
linux shell 实现后台多进程运行的,开始和终止 原创 2014年11月21日 12:04:51 9953 linux shell 实现后台开始,和停止多进程 知识点: xxxxcmd.sh ...
- Java中的低级错误
1. 不能用“==”比较两个字符串内容相等. 2. 对list做foreach循环时,循环代码中不能修改list的结构. 3. ...
- CentOS7环境下yum方式安装MySQL5.7
这篇博文主要是从网上摘抄的,做个记录,以后如果有同样的需求,可以直接翻自己的记录.感谢两位大神: https://www.cnblogs.com/luohanguo/p/9045391.html ht ...
- python学习笔记:(十一)模块
模块是指一个包含定义的函数和变量的文件,其后缀名为.py.模块可以被别的程序引用,并使用其中的函数等功能. 1.import语句 如果需要使用模块,只需要在新模块中导入模块.使用import关键字 如 ...
- Nginx日志监控工具
ngxtop是一个基于python的程序,可以在Python上安装.ngxtop通过实时解析nginx访问日志, 并将结果(nginx服务器的有用指标)输出到终端. 主要的功能 当前有效请求 总请求计 ...