一、什么是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?的更多相关文章

  1. HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID

    HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID HealthKit开发准备工作 在开发一款HealthKit应用程序时,首先需要讲解HealthKit中有哪些类,在i ...

  2. HealthKit开发快速入门教程之HealthKit数据的操作

    HealthKit开发快速入门教程之HealthKit数据的操作 数据的表示 在HealthKit中,数据是最核心的元素.通过分析数据,人们可以看到相关的健康信息.例如,通过统计步数数据,人们可以知道 ...

  3. HealthKit开发快速入门教程之HealthKit开发概述简介

    HealthKit开发快速入门教程之HealthKit开发概述简介 2014年6月2日召开的年度开发者大会上,苹果发布了一款新的移动应用平台,可以收集和分析用户的健康数据.该移动应用平台被命名为“He ...

  4. highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度

    highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小  大] | ...

  5. nodejs入门教程之http的get和request简介及应用

    nodejs入门教程之http的get和request简介及应用 前言 上一篇文章,我介绍了nodejs的几个常用的模块及简单的案例,今天我们再来重点看一下nodejs的http模块,关于http模块 ...

  6. github 入门教程之 github 访问速度太慢怎么办

    github 是全世界最流行的开源项目托管平台,其代表的开源文化从根本上改变了软件开发的方式. 基本上所有的需求都能从 github 上或多或少找到现成的实现方案,再也不用重头开始造轮子而是自定义轮子 ...

  7. C++入门教程之二:变量

    C++入门教程之二:变量 变量,顾名思义,意思是变化的量.变量的定义是计算机语言中能储存计算结果或能表示值的抽象概念.一个基本的程序需要变量,因此变量是程序设计中的一大重点. 变量基本结构 var_t ...

  8. 微信小程序入门教程之二:页面样式

    这个系列的上一篇教程,教大家写了一个最简单的 Hello world 微信小程序. 但是,那只是一个裸页面,并不好看.今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的 ...

  9. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

随机推荐

  1. JAVA设计模式——第 2 章 代理模式【Proxy Pattern】(转)

    什么是代理模式呢?我很忙,忙的没空理你,那你要找我呢就先找我的代理人吧,那代理人总要知道被代理人能做哪些事情不能做哪些事情吧,那就是两个人具备同一个接口,代理人虽然不能干活,但是被代理的人能干活呀. ...

  2. JERSEY中文翻译(第三章、JAX-RS Application, Resources and Sub-Resources)

    JAX-RS Application Resource and Sub-Resource 本章要介绍的是JAX-RS的核心概念——Resouce.Sub-Resource JAX-RS的2.0的jav ...

  3. Eclipse远程连接Hadoop

    Windows下面调试程序比在Linux下面调试方便一些,于是用Windows下的Eclipse远程连接Hadoop. 1. 下载相应版本的hadoop-eclipse-plugin插件,复制到ecl ...

  4. VB 求余求整

    可以直接用函数来实现: 1.用CInt()函数的范围在-32,768 至 32,767,对于小数部分四舍五入 . 2.用Int()函数和Fix()函数都会删除参数的小数部份而返回剩下的整数, 不同之处 ...

  5. java.lang.AbstractStringBuilder.enlargeBuffer

    04-18 10:22:08.585 3653-3653/com.tongyan.lanzhou.rv I/dalvikvm: "main" prio=5 tid=1 RUNNAB ...

  6. 分布式锁和Redisson实现

    http://thoreauz.com/2017/08/20/language/java/%E5%9F%BA%E7%A1%80/%E5%88%86%E5%B8%83%E5%BC%8F%E9%94%81 ...

  7. Knockoutjs之observable和applyBindings的使用

    observable在Knockoutjs中属于一个核心功能,在做监控数据的改变时,必须要用到Knockoutjs的监控属性——observable. ko.observable()的简单使用 首先来 ...

  8. notepad++插件实现json、xml格式化

    notepad++比较出色的免费的数据编辑.格式化工具... 现在json.xml文件很流行.格式化也是必须的,方便查看关键信息! 01.下载notepad++及相关插件 npp_7.5.5-x86: ...

  9. Redis C客户端Hiredis代码分析

    初始化 redisContext - Redis连接的上下文 /* Context for a connection to Redis */ typedef struct redisContext { ...

  10. MATLAB 的输入输出命令

    MATLAB 的输入输出命令: >> A='woshi'; >> disp(A) woshi fscanf和fprintf命令的行为像C scanf和printf函数.他们支持 ...