转:ECharts图表组件入门教程之Theme:ECharts图表的皮肤是什么?如何给图表换主题(皮肤)Theme?
2014-11-21 14:57
921 查看
一、什么是ECharts图表的皮肤(主题)?
针对这个问题我只能这样回答,ECharts图表的主题(皮肤)就犹如人的衣服一样,是用来衬托和渲染主体,使其变得更加美观好看的目的。你去过ECharts图表组件的官网应该都看到每一个示例都支持皮肤切换的。我们更深入的理解,皮肤其实就是一些样式的定义集合。
图表有很多部分组成,比如:标题、坐标轴、Series数据、Legend图例等。每一个部分我们可以为其设置style样式,形如:字体颜色、字体大小、旋转角度、背景图片、背景颜色、是否渐变等。
二、如何将其皮肤(主题)应用到ECharts图表上去?
犹如一件衣服我们设计和裁剪缝制好了,那么好不好还得找个人穿上才能够有所体现。ECharts图表也是如此,这里我们定义了一套纯绿色的皮肤option集合,示例代码如下所示:
这样看代码就应该很清楚了,的确就是一些样式的定义。
皮肤我们定义好了,那么我们接下来要如何应用到图表中去呢?针对这样一个问题,ECharts图表组件给我们提供了一个方法init(dom,[theme]) 和setTheme(theme)方法
从上方的方法描述看不难看出我们要应用皮肤至图表内就需要通过这个方法接口去实现。
view sourceprint?
这样我们的皮肤配置就应用到图表对象中去了,只要我们为其设置好数据即可完美呈现出来了的。
完整示例代码如下所示:
可以将上方的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文件内部包含了皮肤渲染这个动作的。
针对这个问题我只能这样回答,ECharts图表的主题(皮肤)就犹如人的衣服一样,是用来衬托和渲染主体,使其变得更加美观好看的目的。你去过ECharts图表组件的官网应该都看到每一个示例都支持皮肤切换的。我们更深入的理解,皮肤其实就是一些样式的定义集合。
图表有很多部分组成,比如:标题、坐标轴、Series数据、Legend图例等。每一个部分我们可以为其设置style样式,形如:字体颜色、字体大小、旋转角度、背景图片、背景颜色、是否渐变等。
二、如何将其皮肤(主题)应用到ECharts图表上去?
犹如一件衣服我们设计和裁剪缝制好了,那么好不好还得找个人穿上才能够有所体现。ECharts图表也是如此,这里我们定义了一套纯绿色的皮肤option集合,示例代码如下所示:
//定义一套绿色的皮肤 var theme = { // 默认色板 color: [ '#408829', '#68a54a', '#a9cba2', '#86b379', '#397b29', '#8abb6f', '#759c6a', '#bfd3b7' ], // 图表标题 title: { itemGap: 8, 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: 0 }, // 类目轴 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: 1, 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: 4, itemStyle: { normal: { lineStyle: { width: 1, color: 'rgba(128, 128, 128, 0.5)' }, chordStyle: { lineStyle: { width: 1, color: 'rgba(128, 128, 128, 0.5)' } } }, emphasis: { lineStyle: { width: 1, color: 'rgba(128, 128, 128, 0.5)' }, chordStyle: { lineStyle: { width: 1, color: 'rgba(128, 128, 128, 0.5)' } } } } }, gauge: { startAngle: 225, endAngle: -45, axisLine: { // 坐标轴线 show: true, // 默认显示,属性show控制显示与否 lineStyle: { // 属性lineStyle控制线条样式 color: [[0.2, '#86b379'], [0.8, '#68a54a'], [1, '#408829']], width: 8 } }, axisTick: { // 坐标轴小标记 splitNumber: 10, // 每份split细分多少段 length: 12, // 属性length控制线长 lineStyle: { // 属性lineStyle控制线条样式 color: 'auto' } }, axisLabel: { // 坐标轴文本标签,详见axis.axisLabel textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE color: 'auto' } }, splitLine: { // 分隔线 length: 18, // 属性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为可选的主题,内置主题(暂无)直接传入名称,自定义扩展主题可传入主题对象 |
view sourceprint?
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: 8, 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: 0 }, // 类目轴 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: 1, 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: 4, itemStyle: { normal: { lineStyle: { width: 1, color: 'rgba(128, 128, 128, 0.5)' }, chordStyle: { lineStyle: { width: 1, color: 'rgba(128, 128, 128, 0.5)' } } }, emphasis: { lineStyle: { width: 1, color: 'rgba(128, 128, 128, 0.5)' }, chordStyle: { lineStyle: { width: 1, color: 'rgba(128, 128, 128, 0.5)' } } } } }, gauge: { startAngle: 225, endAngle: -45, axisLine: { // 坐标轴线 show: true, // 默认显示,属性show控制显示与否 lineStyle: { // 属性lineStyle控制线条样式 color: [[0.2, '#86b379'], [0.8, '#68a54a'], [1, '#408829']], width: 8 } }, axisTick: { // 坐标轴小标记 splitNumber: 10, // 每份split细分多少段 length: 12, // 属性length控制线长 lineStyle: { // 属性lineStyle控制线条样式 color: 'auto' } }, axisLabel: { // 坐标轴文本标签,详见axis.axisLabel textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE color: 'auto' } }, splitLine: { // 分隔线 length: 18, // 属性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: 24
},
//副标题样式
subtextStyle: {
fontSize: 12,
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?
- ECharts图表组件入门教程:如何动态读取数组内的数据至echarts图表且动态更新图表Y轴刻度单位
- highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度
- 如何在网页中显示数据图表--Echarts入门教程
- ECharts图表组件中级入门(Axis-axisLabel):图表坐标刻度过多如何设置刻度间隔(interval)以及配置说明
- ECharts图表组件中级入门篇:如何通过Ajax异步获取图表数据赋值于图表并渲染呈现
- ECharts图表入门:如何配置ECharts图表相关文件以及基本配置呈现最基本线性图表
- vs2005入门视频教程 之 主题和皮肤使用一 [视频]
- ECharts图表初级入门篇:如何配置ECharts图表相关文件以及基本配置呈现最基本线性图表
- vs2005入门视频教程 之 主题和皮肤使用二
- Drupal Theme 主题系统:入门与进阶教程
- ECharts图表组件之简单关系图:如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转
- ECharts官方教程(六)【在图表中加入交互组件】
- vs2005入门教程 之 主题和皮肤概述 [视频]
- liferay6.2 theme开发教程-第一节liferay theme主题开发系列教程第一讲-什么是theme
- 转:ECharts图表组件之简单关系图:如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转
- Drupal Theme 主题系统:入门与进阶教程
- ECharts图表组件之简单关系图:如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转
- 如何使用一个不错的图表组件WebChart(免费) 用c#编写
- 入门代码教程第一节 如何:定义服务协定