转:ECharts图表组件入门教程之Theme:ECharts图表的皮肤是什么?如何给图表换主题(皮肤)Theme?
一、什么是ECharts图表的皮肤(主题)?
针对这个问题我只能这样回答,ECharts图表的主题(皮肤)就犹如人的衣服一样,是用来衬托和渲染主体,使其变得更加美观好看的目的。你去过ECharts图表组件的官网应该都看到每一个示例都支持皮肤切换的。我们更深入的理解,皮肤其实就是一些样式的定义集合。
图表有很多部分组成,比如:标题、坐标轴、Series数据、Legend图例等。每一个部分我们可以为其设置style样式,形如:字体颜色、字体大小、旋转角度、背景图片、背景颜色、是否渐变等。
二、如何将其皮肤(主题)应用到ECharts图表上去?
犹如一件衣服我们设计和裁剪缝制好了,那么好不好还得找个人穿上才能够有所体现。ECharts图表也是如此,这里我们定义了一套纯绿色的皮肤option集合,示例代码如下所示:
//定义一套绿色的皮肤
var theme = {
// 默认色板
color: [
'#408829', '#68a54a', '#a9cba2', '#86b379',
'#397b29', '#8abb6f', '#759c6a', '#bfd3b7'
], // 图表标题
title: {
itemGap: ,
textStyle: {
fontWeight: 'normal',
color: '#408829'
}
}, // 值域
dataRange: {
color: ['#1f610a', '#97b58d']
}, // 工具箱
toolbox: {
color: ['#408829', '#408829', '#408829', '#408829']
}, // 提示框
tooltip: {
backgroundColor: 'rgba(0,0,0,0.5)',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'line', // 默认为直线,可选为:'line' | 'shadow'
lineStyle: { // 直线指示器样式设置
color: '#408829',
type: 'dashed'
},
crossStyle: {
color: '#408829'
},
shadowStyle: { // 阴影指示器样式设置
color: 'rgba(200,200,200,0.3)'
}
}
}, // 区域缩放控制器
dataZoom: {
dataBackgroundColor: '#eee', // 数据背景颜色
fillerColor: 'rgba(64,136,41,0.2)', // 填充颜色
handleColor: '#408829' // 手柄颜色
}, grid: {
borderWidth:
}, // 类目轴
categoryAxis: {
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: '#408829'
}
},
splitLine: { // 分隔线
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: ['#eee']
}
}
}, // 数值型坐标轴默认参数
valueAxis: {
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: '#408829'
}
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
}
},
splitLine: { // 分隔线
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: ['#eee']
}
}
}, timeline: {
lineStyle: {
color: '#408829'
},
controlStyle: {
normal: { color: '#408829' },
emphasis: { color: '#408829' }
}
}, // K线图默认参数
k: {
itemStyle: {
normal: {
color: '#68a54a', // 阳线填充颜色
color0: '#a9cba2', // 阴线填充颜色
lineStyle: {
width: ,
color: '#408829', // 阳线边框颜色
color0: '#86b379' // 阴线边框颜色
}
}
}
}, map: {
itemStyle: {
normal: {
areaStyle: {
color: '#ddd'
},
label: {
textStyle: {
color: '#c12e34'
}
}
},
emphasis: { // 也是选中样式
areaStyle: {
color: '#99d2dd'
},
label: {
textStyle: {
color: '#c12e34'
}
}
}
}
}, force: {
itemStyle: {
normal: {
linkStyle: {
strokeColor: '#408829'
}
}
}
}, chord: {
padding: ,
itemStyle: {
normal: {
lineStyle: {
width: ,
color: 'rgba(128, 128, 128, 0.5)'
},
chordStyle: {
lineStyle: {
width: ,
color: 'rgba(128, 128, 128, 0.5)'
}
}
},
emphasis: {
lineStyle: {
width: ,
color: 'rgba(128, 128, 128, 0.5)'
},
chordStyle: {
lineStyle: {
width: ,
color: 'rgba(128, 128, 128, 0.5)'
}
}
}
}
}, gauge: {
startAngle: ,
endAngle: -,
axisLine: { // 坐标轴线
show: true, // 默认显示,属性show控制显示与否
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#86b379'], [0.8, '#68a54a'], [, '#408829']],
width:
}
},
axisTick: { // 坐标轴小标记
splitNumber: , // 每份split细分多少段
length: , // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: { // 坐标轴文本标签,详见axis.axisLabel
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto'
}
},
splitLine: { // 分隔线
length: , // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: 'auto'
}
},
pointer: {
length: '90%',
color: 'auto'
},
title: {
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#333'
}
},
detail: {
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto'
}
}
}, textStyle: {
fontFamily: '微软雅黑, Arial, Verdana, sans-serif'
}
};
这样看代码就应该很清楚了,的确就是一些样式的定义。
皮肤我们定义好了,那么我们接下来要如何应用到图表中去呢?针对这样一个问题,ECharts图表组件给我们提供了一个方法init(dom,[theme]) 和setTheme(theme)方法
名称 | 参数 | 描述 |
---|---|---|
{ECharts}init | {dom} dom, {string | Object =}theme |
初始化接口,返回ECharts实例,其中dom为图表所在节点,theme为可选的主题,内置主题(暂无)直接传入名称,自定义扩展主题可传入主题对象 |
从上方的方法描述看不难看出我们要应用皮肤至图表内就需要通过这个方法接口去实现。
1.
//图表对象渲染和皮肤的应用
2.
myChart = ec.init(document.getElementById(
'main'
), theme);
这样我们的皮肤配置就应用到图表对象中去了,只要我们为其设置好数据即可完美呈现出来了的。
完整示例代码如下所示:
<!DOCTYPE html>
<html>
<head runat="server">
<title>ECharts图表组件主题(皮肤)的应用示例 || www.stepday.com</title>
<meta charset="utf-8" />
<script src="www/js/esl.js"></script>
<script src="www/js/echarts.js" type="text/javascript"></script>
</head>
<body>
<!--定义页面图表容器-->
<!-- 必须制定容器的大小(height、width) -->
<div id="main" style="height: 400px; width:500px; border: 1px solid #ccc; padding: 10px;">
</div>
<script type="text/javascript" language="javascript">
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/line' //按需加载图表关于线性图、折线图的部分
],
DrawEChart //异步加载的回调函数绘制图表
); var myChart; //创建ECharts图表方法
function DrawEChart(ec) {
//定义一套绿色的皮肤
var theme = {
// 默认色板
color: [
'#408829', '#68a54a', '#a9cba2', '#86b379',
'#397b29', '#8abb6f', '#759c6a', '#bfd3b7'
], // 图表标题
title: {
itemGap: ,
textStyle: {
fontWeight: 'normal',
color: '#408829'
}
}, // 值域
dataRange: {
color: ['#1f610a', '#97b58d']
}, // 工具箱
toolbox: {
color: ['#408829', '#408829', '#408829', '#408829']
}, // 提示框
tooltip: {
backgroundColor: 'rgba(0,0,0,0.5)',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'line', // 默认为直线,可选为:'line' | 'shadow'
lineStyle: { // 直线指示器样式设置
color: '#408829',
type: 'dashed'
},
crossStyle: {
color: '#408829'
},
shadowStyle: { // 阴影指示器样式设置
color: 'rgba(200,200,200,0.3)'
}
}
}, // 区域缩放控制器
dataZoom: {
dataBackgroundColor: '#eee', // 数据背景颜色
fillerColor: 'rgba(64,136,41,0.2)', // 填充颜色
handleColor: '#408829' // 手柄颜色
}, grid: {
borderWidth:
}, // 类目轴
categoryAxis: {
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: '#408829'
}
},
splitLine: { // 分隔线
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: ['#eee']
}
}
}, // 数值型坐标轴默认参数
valueAxis: {
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: '#408829'
}
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
}
},
splitLine: { // 分隔线
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: ['#eee']
}
}
}, timeline: {
lineStyle: {
color: '#408829'
},
controlStyle: {
normal: { color: '#408829' },
emphasis: { color: '#408829' }
}
}, // K线图默认参数
k: {
itemStyle: {
normal: {
color: '#68a54a', // 阳线填充颜色
color0: '#a9cba2', // 阴线填充颜色
lineStyle: {
width: ,
color: '#408829', // 阳线边框颜色
color0: '#86b379' // 阴线边框颜色
}
}
}
}, map: {
itemStyle: {
normal: {
areaStyle: {
color: '#ddd'
},
label: {
textStyle: {
color: '#c12e34'
}
}
},
emphasis: { // 也是选中样式
areaStyle: {
color: '#99d2dd'
},
label: {
textStyle: {
color: '#c12e34'
}
}
}
}
}, force: {
itemStyle: {
normal: {
linkStyle: {
strokeColor: '#408829'
}
}
}
}, chord: {
padding: ,
itemStyle: {
normal: {
lineStyle: {
width: ,
color: 'rgba(128, 128, 128, 0.5)'
},
chordStyle: {
lineStyle: {
width: ,
color: 'rgba(128, 128, 128, 0.5)'
}
}
},
emphasis: {
lineStyle: {
width: ,
color: 'rgba(128, 128, 128, 0.5)'
},
chordStyle: {
lineStyle: {
width: ,
color: 'rgba(128, 128, 128, 0.5)'
}
}
}
}
}, gauge: {
startAngle: ,
endAngle: -,
axisLine: { // 坐标轴线
show: true, // 默认显示,属性show控制显示与否
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#86b379'], [0.8, '#68a54a'], [, '#408829']],
width:
}
},
axisTick: { // 坐标轴小标记
splitNumber: , // 每份split细分多少段
length: , // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: { // 坐标轴文本标签,详见axis.axisLabel
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto'
}
},
splitLine: { // 分隔线
length: , // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: 'auto'
}
},
pointer: {
length: '90%',
color: 'auto'
},
title: {
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#333'
}
},
detail: {
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'auto'
}
}
}, textStyle: {
fontFamily: '微软雅黑, Arial, Verdana, sans-serif'
}
}; //定义图表options
var options = {
//图表标题
title: {
text: "ECharts图表皮肤的应用", //正标题
link: "http://www.stepday.com", //正标题链接 点击可在新窗口中打开
x: "center", //标题水平方向位置
subtext: "From:http://www.stepday.com", //副标题
sublink: "http://www.stepday.com", //副标题链接
//正标题样式
textStyle: {
fontSize:
},
//副标题样式
subtextStyle: {
fontSize: ,
color: "red"
}
},
//数据提示框配置
tooltip: {
trigger: 'axis' //触发类型,默认数据触发,见下图,可选为:'item' | 'axis' 其实就是是否共享提示框
},
//图例配置
legend: {
data: ['蒸发量', '降水量'], //这里需要与series内的每一组数据的name值保持一致
y: "bottom"
},
//工具箱配置
toolbox: {
show: true, //是否显示工具箱
feature: {
mark: false, // 辅助线标志,上图icon左数1/2/3,分别是启用,删除上一条,删除全部
dataView: { readOnly: false }, // 数据视图,上图icon左数8,打开数据视图
magicType: ['line', 'bar'], // 图表类型切换,当前仅支持直角系下的折线图、柱状图转换,上图icon左数6/7,分别是切换折线图,切换柱形图
restore: true, // 还原,复位原始图表,上图icon左数9,还原
saveAsImage: true // 保存为图片,上图icon左数10,保存
}
},
calculable: true,
//轴配置
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
name: "月份"
}
],
//Y轴配置
yAxis: [
{
type: 'value',
splitArea: { show: true },
name: "数值"
}
],
//图表Series数据序列配置
series: [
{
name: '蒸发量',
type: 'line',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '降水量',
type: 'line',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
}; //图表对象渲染和皮肤的应用
myChart = ec.init(document.getElementById('main'), theme);
myChart.setOption(options);
}
</script>
</body>
</html>
可以将上方的HTML代码复制出来,然后下载下面的两个js修改一下内部js引入地址即可看到被绿色渲染的图表了的。
1、http://echarts.baidu.com/doc/asset/js/esl/esl.js
2、http://echarts.baidu.com/doc/example/www/js/echarts.js
扩充话题:
我们如何将其皮肤做成一个下拉切换的形式呢?其实犹如官方的例子一样,需要将每一种皮肤设置为一个js文件,切换的时候去执行这个js文件,js文件内部包含了皮肤渲染这个动作的。
myChart.setTheme(curTheme);
转:ECharts图表组件入门教程之Theme:ECharts图表的皮肤是什么?如何给图表换主题(皮肤)Theme?的更多相关文章
- HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID
HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID HealthKit开发准备工作 在开发一款HealthKit应用程序时,首先需要讲解HealthKit中有哪些类,在i ...
- HealthKit开发快速入门教程之HealthKit数据的操作
HealthKit开发快速入门教程之HealthKit数据的操作 数据的表示 在HealthKit中,数据是最核心的元素.通过分析数据,人们可以看到相关的健康信息.例如,通过统计步数数据,人们可以知道 ...
- HealthKit开发快速入门教程之HealthKit开发概述简介
HealthKit开发快速入门教程之HealthKit开发概述简介 2014年6月2日召开的年度开发者大会上,苹果发布了一款新的移动应用平台,可以收集和分析用户的健康数据.该移动应用平台被命名为“He ...
- highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度
highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小 大] | ...
- nodejs入门教程之http的get和request简介及应用
nodejs入门教程之http的get和request简介及应用 前言 上一篇文章,我介绍了nodejs的几个常用的模块及简单的案例,今天我们再来重点看一下nodejs的http模块,关于http模块 ...
- github 入门教程之 github 访问速度太慢怎么办
github 是全世界最流行的开源项目托管平台,其代表的开源文化从根本上改变了软件开发的方式. 基本上所有的需求都能从 github 上或多或少找到现成的实现方案,再也不用重头开始造轮子而是自定义轮子 ...
- C++入门教程之二:变量
C++入门教程之二:变量 变量,顾名思义,意思是变化的量.变量的定义是计算机语言中能储存计算结果或能表示值的抽象概念.一个基本的程序需要变量,因此变量是程序设计中的一大重点. 变量基本结构 var_t ...
- 微信小程序入门教程之二:页面样式
这个系列的上一篇教程,教大家写了一个最简单的 Hello world 微信小程序. 但是,那只是一个裸页面,并不好看.今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的 ...
- webpack入门教程之Hello webpack(一)
webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...
随机推荐
- Zoning and LUN Masking
In a SAN ( Storage Area Network ), if all the hosts are allowed to access all the drives in the SAN, ...
- Java中监控文件变化的多种方案
一.使用Apache.Common.io库 package yungoal.huafeng.utils.files; import com.sun.deploy.util.SyncFileAccess ...
- The ECDSA host key for XXX has changed
运行Hadoop时出现了: 导致运行失败.仔细分析后发现,这是因为以前192.168.1.201的主机名为master,后来把192.168.1.202改名为master,由于两台主机的公钥不一样,所 ...
- SSH协议
SSH是一种协议,实现计算机之间的加密登录,即使被截获,截获的也只是加密后的密文,不会泄密. 如果每次登录另外一台计算机,都需要输入密码,就显得太麻烦,所以SSH协议实现了无密码登录,即公钥登录.所谓 ...
- Jquery为动态添加的未来元素绑定事件
语法: $(selector).on(event,childSelector,data,function) event:必需.规定要从被选元素移除的一个或多个事件或命名空间.由空格分隔多个事件值,也可 ...
- Linux(centos)新建,删除,移动,重命名文件夹和文件的命令
1.新建文件夹 mkdir 文件名 新建一个名为test的文件夹在home下 view source1 mkdir /home/test 2.新建文本 在home下新建一个test.sh脚本 vi / ...
- node.js模块化写法入门
子模块的写法: function SVN(){ console.log('svn initialized'); return this; } function getInstance() { cons ...
- Selenium+TestNG+Jenkins 框架图形化UML表示
- ROS知识(15)----Actionlib的使用(一)
Actionlib是ROS非常重要的库,像执行各种运动的动作,例如控制手臂去抓取一个杯子,这个过程可能复杂而漫长,执行过程中还可能强制中断或反馈信息,这时Actionlib就能大展伸手了. 1.原理 ...
- 使用maven创建web项目【转】
1.首先新建一个maven项目,看图: 2.按照以上步骤就可以创建一个maven项目,可以看到最下图的目录结构,但是这样的目录结构是不对的,需要做一些修改. 首先为了避免乱码,我们应该将项目编码换成U ...