本文介绍这几种方式,他们的功能范畴可能会有交叉(即同一种细节的效果可能可以用不同的方式实现),但是他们各有各的场景偏好。

  • 颜色主题(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 中,很多地方可以设置 itemStylelineStyleareaStylelabel 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。

一般来说,ECharts 的各个系列和组件,都遵从这些命名习惯,虽然不同图表和组件中,itemStylelabel 等可能出现在不同的地方。

直接样式设置的另一篇介绍,参见 个性化图表的样式

高亮的样式: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-样式简介的更多相关文章

  1. Echarts样式

    Echarts设置样式如下 <div id="main" style="width: 250px;height:200px;"></div&g ...

  2. 第三篇、CSS样式简介

    <!--1.行内样式 <p style="background-color:red;font-size:20px"> --> <!--2.页内样式 & ...

  3. Activity 模版样式简介

    1:对话框样式. <activity android:theme="@android:style/Theme.Dialog"> 2:透明样式. <activity ...

  4. input的样式简介

    <input type="text" autocomplete="off" placeholder="" x-webkit-speec ...

  5. 百度echarts样式开发

    Echarts如何进行实例化 var a1 = null; a1= echarts.init(document.getElementById('a1')); a1.setOption({ color: ...

  6. CSS样式简介

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态 ...

  7. try{futureGirl}catch(Exception){"Kill All Trouble"}——echarts样式

    首先先给未来女,解释一下题目吧.这是段代码,我再try{}括号里写了你,意思我会保护你.后面的catch(Exception)是捕捉你的所有麻烦,交给我解决. 今天收工较早,拖着疲惫是身躯回到宿舍,简 ...

  8. echarts使用简介

    1. echarts是百度开源的一个前端图表库 2. 官网地址: https://www.echartsjs.com/zh/index.html 3. 使用介绍: 3.1. 下载echarts.js ...

  9. echarts样式修改

    本人是查看如下链接: http://down.admin5.com/demo/code_pop/cs/dsj/doc/example/themeDesigner.html# 图示很简洁明了.

  10. 大数据-图表插件-echarts 样式修改(迭代)

    修改折线图大小   myChart.setOption({             title:{                     text:"价格指数"          ...

随机推荐

  1. C++入门经典-例5.17-右值引用的定义

    1:右值引用的定义: 类型 && i=被引用的对象: 左值与右值的区别在于,右值是临时变量,例如,函数的返回值,并且无法被改变. 当右值引用被初始化后,临时变量消失. 代码如下: // ...

  2. LeetCode 129. 求根到叶子节点数字之和(Sum Root to Leaf Numbers)

    题目描述 给定一个二叉树,它的每个结点都存放一个 0-9 的数字,每条从根到叶子节点的路径都代表一个数字. 例如,从根到叶子节点路径 1->2->3 代表数字 123. 计算从根到叶子节点 ...

  3. Watir单元库

    http://www.cnblogs.com/Javame/p/4045229.html test: #require 'net/http' #require 'uri' #url = URI.par ...

  4. for 循环 以及 for 循环的嵌套

    格式:for (; ; ) 打印20遍你好 ; i <= ; i++) { Console.WriteLine("你好"); } 输入一个整数,计算从1加到这个数的结果 Co ...

  5. jquery 登录判断遇到的小问题

    1.碰到的第一个问题是: 往body上加载check,用load不管用,可以用ready试试. 2.原来jquery里获取用的val(),我一直以为是value()... 尴尬 3.两个标志位是为了判 ...

  6. shell 并发进程的例子

    linux shell 实现后台多进程运行的,开始和终止 原创 2014年11月21日 12:04:51 9953 linux shell 实现后台开始,和停止多进程 知识点: xxxxcmd.sh ...

  7. Java中的低级错误

    1.              不能用“==”比较两个字符串内容相等. 2.              对list做foreach循环时,循环代码中不能修改list的结构. 3.            ...

  8. CentOS7环境下yum方式安装MySQL5.7

    这篇博文主要是从网上摘抄的,做个记录,以后如果有同样的需求,可以直接翻自己的记录.感谢两位大神: https://www.cnblogs.com/luohanguo/p/9045391.html ht ...

  9. python学习笔记:(十一)模块

    模块是指一个包含定义的函数和变量的文件,其后缀名为.py.模块可以被别的程序引用,并使用其中的函数等功能. 1.import语句 如果需要使用模块,只需要在新模块中导入模块.使用import关键字 如 ...

  10. Nginx日志监控工具

    ngxtop是一个基于python的程序,可以在Python上安装.ngxtop通过实时解析nginx访问日志, 并将结果(nginx服务器的有用指标)输出到终端. 主要的功能 当前有效请求 总请求计 ...