您的位置：首页 > 其它

ECharts图表组件入门教程之Theme：ECharts图表的皮肤是什么？如何给图表换主题（皮肤）Theme？

2014-10-09 15:37 811 查看

[摘要]：一、什么是ECharts图表的皮肤（主题）？ 针对这个问题我只能这样回答，ECharts图表的主题（皮肤）就犹如人的衣服一样，是用来衬托和渲染主体，使其变得更加美观好看的目的。你去过ECharts图表组件的官网应该都看到每一个示例都支持皮肤切换的。我们更深入的理解，皮肤其实就是一些样式的定义集合。
图表有很多部分组成，比如：标题、坐标轴、Series数据、Legend图例等。每一个部分我们可以为其设置style样式，形如：字体颜色、字体大小、旋转角度、背景图片、背景颜色、是否渐变等。 二、如何将其皮肤（主题）应用到ECharts图表上去？ 犹如一件衣服我们设计和裁剪缝制好了，那么好不好还得找个人穿上才能够有所体现。ECharts图表也是如此，这里我们定义了一套纯绿色的皮肤option集合，示例代码如下所示： ...

一、什么是ECharts图表的皮肤（主题）？

针对这个问题我只能这样回答，ECharts图表的主题（皮肤）就犹如人的衣服一样，是用来衬托和渲染主体，使其变得更加美观好看的目的。你去过ECharts图表组件的官网应该都看到每一个示例都支持皮肤切换的。我们更深入的理解，皮肤其实就是一些样式的定义集合。

图表有很多部分组成，比如：标题、坐标轴、Series数据、Legend图例等。每一个部分我们可以为其设置style样式，形如：字体颜色、字体大小、旋转角度、背景图片、背景颜色、是否渐变等。

二、如何将其皮肤（主题）应用到ECharts图表上去？

犹如一件衣服我们设计和裁剪缝制好了，那么好不好还得找个人穿上才能够有所体现。ECharts图表也是如此，这里我们定义了一套纯绿色的皮肤option集合，示例代码如下所示：

view sourceprint?

001.
//定义一套绿色的皮肤

002.
var

theme = {

003.
// 默认色板

004.
color: [

005.
'#408829'
,
'#68a54a'
,
'#a9cba2'
,
'#86b379'
,

006.
'#397b29'
,
'#8abb6f'
,
'#759c6a'
,
'#bfd3b7'

007.
],

008.

009.
// 图表标题

010.
title: {

011.
itemGap: 8,

012.
textStyle: {

013.
fontWeight:
'normal'
,

014.
color:
'#408829'

015.
}

016.
},

017.

018.
// 值域

019.
dataRange: {

020.
color: [
'#1f610a'
,
'#97b58d'
]

021.
},

022.

023.
// 工具箱

024.
toolbox: {

025.
color: [
'#408829'
,
'#408829'
,
'#408829'
,
'#408829'
]

026.
},

027.

028.
// 提示框

029.
tooltip: {

030.
backgroundColor:
'rgba(0,0,0,0.5)'
,

031.
axisPointer: {
// 坐标轴指示器，坐标轴触发有效

032.
type:
'line'
,
// 默认为直线，可选为：'line' | 'shadow'

033.
lineStyle: {
// 直线指示器样式设置

034.
color:
'#408829'
,

035.
type:
'dashed'

036.
},

037.
crossStyle: {

038.
color:
'#408829'

039.
},

040.
shadowStyle: {
// 阴影指示器样式设置

041.
color:
'rgba(200,200,200,0.3)'

042.
}

043.
}

044.
},

045.

046.
// 区域缩放控制器

047.
dataZoom: {

048.
dataBackgroundColor:
'#eee'
,

// 数据背景颜色

049.
fillerColor:
'rgba(64,136,41,0.2)'
,

// 填充颜色

050.
handleColor:
'#408829'
// 手柄颜色

051.
},

052.

053.
grid: {

054.
borderWidth: 0

055.
},

056.

057.
// 类目轴

058.
categoryAxis: {

059.
axisLine: {
// 坐标轴线

060.
lineStyle: {
// 属性lineStyle控制线条样式

061.
color:
'#408829'

062.
}

063.
},

064.
splitLine: {
// 分隔线

065.
lineStyle: {
// 属性lineStyle（详见lineStyle）控制线条样式

066.
color: [
'#eee'
]

067.
}

068.
}

069.
},

070.

071.
// 数值型坐标轴默认参数

072.
valueAxis: {

073.
axisLine: {
// 坐标轴线

074.
lineStyle: {
// 属性lineStyle控制线条样式

075.
color:
'#408829'

076.
}

077.
},

078.
splitArea: {

079.
show:
true
,

080.
areaStyle: {

081.
color: [
'rgba(250,250,250,0.1)'
,
'rgba(200,200,200,0.1)'
]

082.
}

083.
},

084.
splitLine: {
// 分隔线

085.
lineStyle: {
// 属性lineStyle（详见lineStyle）控制线条样式

086.
color: [
'#eee'
]

087.
}

088.
}

089.
},

090.

091.
timeline: {

092.
lineStyle: {

093.
color:
'#408829'

094.
},

095.
controlStyle: {

096.
normal: { color:
'#408829'
},

097.
emphasis: { color:
'#408829'
}

098.
}

099.
},

100.

101.
// K线图默认参数

102.
k: {

103.
itemStyle: {

104.
normal: {

105.
color:
'#68a54a'
, 

// 阳线填充颜色

106.
color0:
'#a9cba2'
,
// 阴线填充颜色

107.
lineStyle: {

108.
width: 1,

109.
color:
'#408829'
,
// 阳线边框颜色

110.
color0:
'#86b379'
// 阴线边框颜色

111.
}

112.
}

113.
}

114.
},

115.

116.
map: {

117.
itemStyle: {

118.
normal: {

119.
areaStyle: {

120.
color:
'#ddd'

121.
},

122.
label: {

123.
textStyle: {

124.
color:
'#c12e34'

125.
}

126.
}

127.
},

128.
emphasis: {
// 也是选中样式

129.
areaStyle: {

130.
color:
'#99d2dd'

131.
},

132.
label: {

133.
textStyle: {

134.
color:
'#c12e34'

135.
}

136.
}

137.
}

138.
}

139.
},

140.

141.
force: {

142.
itemStyle: {

143.
normal: {

144.
linkStyle: {

145.
strokeColor:
'#408829'

146.
}

147.
}

148.
}

149.
},

150.

151.
chord: {

152.
padding: 4,

153.
itemStyle: {

154.
normal: {

155.
lineStyle: {

156.
width: 1,

157.
color:
'rgba(128,128,128,0.5)'

158.
},

159.
chordStyle: {

160.
lineStyle: {

161.
width: 1,

162.
color:
'rgba(128,128,128,0.5)'

163.
}

164.
}

165.
},

166.
emphasis: {

167.
lineStyle: {

168.
width: 1,

169.
color:
'rgba(128,128,128,0.5)'

170.
},

171.
chordStyle: {

172.
lineStyle: {

173.
width: 1,

174.
color:
'rgba(128,128,128,0.5)'

175.
}

176.
}

177.
}

178.
}

179.
},

180.

181.
gauge: {

182.
startAngle: 225,

183.
endAngle: -45,

184.
axisLine: {
// 坐标轴线

185.
show:
true
,  
// 默认显示，属性show控制显示与否

186.
lineStyle: {
// 属性lineStyle控制线条样式

187.
color: [[0.2,
'#86b379'
],[0.8,
'#68a54a'
],[1,
'#408829'
]],

188.
width: 8

189.
}

190.
},

191.
axisTick: {
// 坐标轴小标记

192.
splitNumber: 10,
// 每份split细分多少段

193.
length: 12,
// 属性length控制线长

194.
lineStyle: {
// 属性lineStyle控制线条样式

195.
color:
'auto'

196.
}

197.
},

198.
axisLabel: {
// 坐标轴文本标签，详见axis.axisLabel

199.
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE

200.
color:
'auto'

201.
}

202.
},

203.
splitLine: {
// 分隔线

204.
length: 18,
// 属性length控制线长

205.
lineStyle: {
// 属性lineStyle（详见lineStyle）控制线条样式

206.
color:
'auto'

207.
}

208.
},

209.
pointer: {

210.
length:
'90%'
,

211.
color:
'auto'

212.
},

213.
title: {

214.
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE

215.
color:
'#333'

216.
}

217.
},

218.
detail: {

219.
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE

220.
color:
'auto'

221.
}

222.
}

223.
},

224.

225.
textStyle: {

226.
fontFamily:
'微软雅黑,Arial,Verdana,sans-serif'

227.
}

228.
};


这样看代码就应该很清楚了，的确就是一些样式的定义。

皮肤我们定义好了，那么我们接下来要如何应用到图表中去呢？针对这样一个问题，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);


这样我们的皮肤配置就应用到图表对象中去了，只要我们为其设置好数据即可完美呈现出来了的。



完整示例代码如下所示：

view sourceprint?

001.
<!DOCTYPE html>

002.
<
html
>

003.
<
head

runat
=
"server"
>

004.
<
title
>ECharts图表组件主题（皮肤）的应用示例 || www.stepday.com</
title
>

005.
<
meta

charset
=
"utf-8"

/>

006.
<
script

src
=
"www/js/esl.js"
></
script
>

007.
<
script

src
=
"www/js/echarts.js"

type
=
"text/javascript"
></
script
>

008.
</
head
>

009.
<
body
>

010.
<!--定义页面图表容器-->

011.
<!-- 必须制定容器的大小（height、width） -->

012.
<
div

id
=
"main"

style
=
"height: 400px; width:500px; border: 1px solid #ccc; padding: 10px;"
>

013.
</
div
>

014.
<
script

type
=
"text/javascript"

language
=
"javascript"
>

015.
// Step:4 require echarts and use it in the callback.

016.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径

017.
require(

018.
[

019.
'echarts',

020.
'echarts/chart/line' //按需加载图表关于线性图、折线图的部分

021.
],

022.
DrawEChart //异步加载的回调函数绘制图表

023.
);

024.

025.
var myChart;

026.

027.
//创建ECharts图表方法

028.
function DrawEChart(ec) {

029.
//定义一套绿色的皮肤

030.
var theme = {

031.
// 默认色板

032.
color: [

033.
'#408829','#68a54a','#a9cba2','#86b379',

034.
'#397b29','#8abb6f','#759c6a','#bfd3b7'

035.
],

036.

037.
// 图表标题

038.
title: {

039.
itemGap: 8,

040.
textStyle: {

041.
fontWeight: 'normal',

042.
color: '#408829'

043.
}

044.
},

045.

046.
// 值域

047.
dataRange: {

048.
color: ['#1f610a','#97b58d']

049.
},

050.

051.
// 工具箱

052.
toolbox: {

053.
color: ['#408829','#408829','#408829','#408829']

054.
},

055.

056.
// 提示框

057.
tooltip: {

058.
backgroundColor: 'rgba(0,0,0,0.5)',

059.
axisPointer: {            // 坐标轴指示器，坐标轴触发有效

060.
type: 'line',// 默认为直线，可选为：'line' | 'shadow'

061.
lineStyle: {          // 直线指示器样式设置

062.
color: '#408829',

063.
type: 'dashed'

064.
},

065.
crossStyle: {

066.
color: '#408829'

067.
},

068.
shadowStyle: {                     // 阴影指示器样式设置

069.
color: 'rgba(200,200,200,0.3)'

070.
}

071.
}

072.
},

073.

074.
// 区域缩放控制器

075.
dataZoom: {

076.
dataBackgroundColor: '#eee',// 数据背景颜色

077.
fillerColor: 'rgba(64,136,41,0.2)',// 填充颜色

078.
handleColor: '#408829'     // 手柄颜色

079.
},

080.

081.
grid: {

082.
borderWidth: 0

083.
},

084.

085.
// 类目轴

086.
categoryAxis: {

087.
axisLine: {            // 坐标轴线

088.
lineStyle: {       // 属性lineStyle控制线条样式

089.
color: '#408829'

090.
}

091.
},

092.
splitLine: {           // 分隔线

093.
lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式

094.
color: ['#eee']

095.
}

096.
}

097.
},

098.

099.
// 数值型坐标轴默认参数

100.
valueAxis: {

101.
axisLine: {            // 坐标轴线

102.
lineStyle: {       // 属性lineStyle控制线条样式

103.
color: '#408829'

104.
}

105.
},

106.
splitArea: {

107.
show: true,

108.
areaStyle: {

109.
color: ['rgba(250,250,250,0.1)','rgba(200,200,200,0.1)']

110.
}

111.
},

112.
splitLine: {           // 分隔线

113.
lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式

114.
color: ['#eee']

115.
}

116.
}

117.
},

118.

119.
timeline: {

120.
lineStyle: {

121.
color: '#408829'

122.
},

123.
controlStyle: {

124.
normal: { color: '#408829' },

125.
emphasis: { color: '#408829' }

126.
}

127.
},

128.

129.
// K线图默认参数

130.
k: {

131.
itemStyle: {

132.
normal: {

133.
color: '#68a54a', // 阳线填充颜色

134.
color0: '#a9cba2',// 阴线填充颜色

135.
lineStyle: {

136.
width: 1,

137.
color: '#408829',// 阳线边框颜色

138.
color0: '#86b379'   // 阴线边框颜色

139.
}

140.
}

141.
}

142.
},

143.

144.
map: {

145.
itemStyle: {

146.
normal: {

147.
areaStyle: {

148.
color: '#ddd'

149.
},

150.
label: {

151.
textStyle: {

152.
color: '#c12e34'

153.
}

154.
}

155.
},

156.
emphasis: {                 // 也是选中样式

157.
areaStyle: {

158.
color: '#99d2dd'

159.
},

160.
label: {

161.
textStyle: {

162.
color: '#c12e34'

163.
}

164.
}

165.
}

166.
}

167.
},

168.

169.
force: {

170.
itemStyle: {

171.
normal: {

172.
linkStyle: {

173.
strokeColor: '#408829'

174.
}

175.
}

176.
}

177.
},

178.

179.
chord: {

180.
padding: 4,

181.
itemStyle: {

182.
normal: {

183.
lineStyle: {

184.
width: 1,

185.
color: 'rgba(128,128,128,0.5)'

186.
},

187.
chordStyle: {

188.
lineStyle: {

189.
width: 1,

190.
color: 'rgba(128,128,128,0.5)'

191.
}

192.
}

193.
},

194.
emphasis: {

195.
lineStyle: {

196.
width: 1,

197.
color: 'rgba(128,128,128,0.5)'

198.
},

199.
chordStyle: {

200.
lineStyle: {

201.
width: 1,

202.
color: 'rgba(128,128,128,0.5)'

203.
}

204.
}

205.
}

206.
}

207.
},

208.

209.
gauge: {

210.
startAngle: 225,

211.
endAngle: -45,

212.
axisLine: {            // 坐标轴线

213.
show: true,  // 默认显示，属性show控制显示与否

214.
lineStyle: {       // 属性lineStyle控制线条样式

215.
color: [[0.2,'#86b379'],[0.8,'#68a54a'],[1,'#408829']],

216.
width: 8

217.
}

218.
},

219.
axisTick: {            // 坐标轴小标记

220.
splitNumber: 10,// 每份split细分多少段

221.
length: 12,  // 属性length控制线长

222.
lineStyle: {       // 属性lineStyle控制线条样式

223.
color: 'auto'

224.
}

225.
},

226.
axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel

227.
textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE

228.
color: 'auto'

229.
}

230.
},

231.
splitLine: {           // 分隔线

232.
length: 18,// 属性length控制线长

233.
lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式

234.
color: 'auto'

235.
}

236.
},

237.
pointer: {

238.
length: '90%',

239.
color: 'auto'

240.
},

241.
title: {

242.
textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE

243.
color: '#333'

244.
}

245.
},

246.
detail: {

247.
textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE

248.
color: 'auto'

249.
}

250.
}

251.
},

252.

253.
textStyle: {

254.
fontFamily: '微软雅黑,Arial,Verdana,sans-serif'

255.
}

256.
};

257.

258.
//定义图表options

259.
var options = {

260.
//图表标题

261.
title: {

262.
text: "ECharts图表皮肤的应用",//正标题

263.
link: "http://www.stepday.com",//正标题链接 点击可在新窗口中打开

264.
x: "center",//标题水平方向位置

265.
subtext: "From:http://www.stepday.com",//副标题

266.
sublink: "http://www.stepday.com",//副标题链接

267.
//正标题样式

268.
textStyle: {

269.
fontSize: 24

270.
},

271.
//副标题样式

272.
subtextStyle: {

273.
fontSize: 12,

274.
color: "red"

275.
}

276.
},

277.
//数据提示框配置

278.
tooltip: {

279.
trigger: 'axis' //触发类型，默认数据触发，见下图，可选为：'item' | 'axis' 其实就是是否共享提示框

280.
},

281.
//图例配置

282.
legend: {

283.
data: ['蒸发量','降水量'],//这里需要与series内的每一组数据的name值保持一致

284.
y: "bottom"

285.
},

286.
//工具箱配置

287.
toolbox: {

288.
show: true,//是否显示工具箱

289.
feature: {

290.
mark: false,// 辅助线标志，上图icon左数1/2/3，分别是启用，删除上一条，删除全部

291.
dataView: { readOnly: false },// 数据视图，上图icon左数8，打开数据视图

292.
magicType: ['line','bar'],// 图表类型切换，当前仅支持直角系下的折线图、柱状图转换，上图icon左数6/7，分别是切换折线图，切换柱形图

293.
restore: true,// 还原，复位原始图表，上图icon左数9，还原

294.
saveAsImage: true  // 保存为图片，上图icon左数10，保存

295.
}

296.
},

297.
calculable: true,

298.
//轴配置

299.
xAxis: [

300.
{

301.
type: 'category',

302.
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],

303.
name: "月份"

304.
}

305.
],

306.
//Y轴配置

307.
yAxis: [

308.
{

309.
type: 'value',

310.
splitArea: { show: true },

311.
name: "数值"

312.
}

313.
],

314.
//图表Series数据序列配置

315.
series: [

316.
{

317.
name: '蒸发量',

318.
type: 'line',

319.
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]

320.
},

321.
{

322.
name: '降水量',

323.
type: 'line',

324.
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]

325.
}

326.
]

327.
};

328.

329.
//图表对象渲染和皮肤的应用

330.
myChart = ec.init(document.getElementById('main'),theme);

331.
myChart.setOption(options);

332.
}

333.
</
script
>

334.
</
body
>

335.
</
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文件内部包含了皮肤渲染这个动作的。

1.
myChart.setTheme(curTheme);


相关文章链接:http://www.stepday.com/my.stepday/?echarts
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航