echarts使用macarons主题

echarts的macarons主题线条比较柔和,柱形也不尖锐,使用方法如下链接页面:

http://my.oschina.net/u/130139/blog/288620

1、创建macarons.js文件

2、页面添加script标签

3、初始化引用e_macarons

创建macarons.js文件,粘贴以下内容


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

var e_macarons = {

    // 默认色板

    color: [

        ‘#2ec7c9‘,‘#b6a2de‘,‘#5ab1ef‘,‘#ffb980‘,‘#d87a80‘,

        ‘#8d98b3‘,‘#e5cf0d‘,‘#97b552‘,‘#95706d‘,‘#dc69aa‘,

        ‘#07a2a4‘,‘#9a7fd1‘,‘#588dd5‘,‘#f5994e‘,‘#c05050‘,

        ‘#59678c‘,‘#c9ab00‘,‘#7eb00a‘,‘#6f5553‘,‘#c14089‘

    ],

    // 图表标题

    title: {

        itemGap: 8,

        textStyle: {

            fontWeight: ‘normal‘,

            color: ‘#008acd‘          // 主标题文字颜色

        }

    },

    

    // 图例

    legend: {

        itemGap: 8

    },

    

    // 值域

    dataRange: {

        itemWidth: 15,

        //color:[‘#1e90ff‘,‘#afeeee‘]

        color: [‘#2ec7c9‘,‘#b6a2de‘]

    },

    toolbox: {

        color : [‘#1e90ff‘‘#1e90ff‘‘#1e90ff‘‘#1e90ff‘],

        effectiveColor : ‘#ff4500‘,

        itemGap: 8

    },

    // 提示框

    tooltip: {

        backgroundColor: ‘rgba(50,50,50,0.5)‘,     // 提示背景颜色,默认为透明度为0.7的黑色

        axisPointer : {            // 坐标轴指示器,坐标轴触发有效

            type : ‘line‘,         // 默认为直线,可选为:‘line‘ | ‘shadow‘

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

                color: ‘#008acd‘

            },

            crossStyle: {

                color: ‘#008acd‘

            },

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

                color: ‘rgba(200,200,200,0.2)‘

            }

        }

    },

    // 区域缩放控制器

    dataZoom: {

        dataBackgroundColor: ‘#efefff‘,            // 数据背景颜色

        fillerColor: ‘rgba(182,162,222,0.2)‘,   // 填充颜色

        handleColor: ‘#008acd‘    // 手柄颜色

    },

    // 网格

    grid: {

        borderColor: ‘#eee‘

    },

    // 类目轴

    categoryAxis: {

        axisLine: {            // 坐标轴线

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

                color: ‘#008acd‘

            }

        },

        splitLine: {           // 分隔线

            lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式

                color: [‘#eee‘]

            }

        }

    },

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

    valueAxis: {

        axisLine: {            // 坐标轴线

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

                color: ‘#008acd‘

            }

        },

        splitArea : {

            show : true,

            areaStyle : {

                color: [‘rgba(250,250,250,0.1)‘,‘rgba(200,200,200,0.1)‘]

            }

        },

        splitLine: {           // 分隔线

            lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式

                color: [‘#eee‘]

            }

        }

    },

    polar : {

        axisLine: {            // 坐标轴线

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

                color: ‘#ddd‘

            }

        },

        splitArea : {

            show : true,

            areaStyle : {

                color: [‘rgba(250,250,250,0.2)‘,‘rgba(200,200,200,0.2)‘]

            }

        },

        splitLine : {

            lineStyle : {

                color : ‘#ddd‘

            }

        }

    },

    timeline : {

        lineStyle : {

            color : ‘#008acd‘

        },

        controlStyle : {

            normal : { color : ‘#008acd‘},

            emphasis : { color : ‘#008acd‘}

        },

        symbol : ‘emptyCircle‘,

        symbolSize : 3

    },

    // 柱形图默认参数

    bar: {

        itemStyle: {

            normal: {

                borderRadius: 5

            },

            emphasis: {

                borderRadius: 5

            }

        }

    },

    // 折线图默认参数

    line: {

        smooth : true,

        symbol: ‘emptyCircle‘,  // 拐点图形类型

        symbolSize: 3           // 拐点图形大小

    },

    

    // K线图默认参数

    k: {

        itemStyle: {

            normal: {

                color: ‘#d87a80‘,       // 阳线填充颜色

                color0: ‘#2ec7c9‘,      // 阴线填充颜色

                lineStyle: {

                    width: 1,

                    color: ‘#d87a80‘,   // 阳线边框颜色

                    color0: ‘#2ec7c9‘   // 阴线边框颜色

                }

            }

        }

    },

    

    // 散点图默认参数

    scatter: {

        symbol: ‘circle‘,    // 图形类型

        symbolSize: 4        // 图形大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2

    },

    // 雷达图默认参数

    radar : {

        symbol: ‘emptyCircle‘,    // 图形类型

        symbolSize:3

        //symbol: null,         // 拐点图形类型

        //symbolRotate : null,  // 图形旋转控制

    },

    map: {

        itemStyle: {

            normal: {

                areaStyle: {

                    color: ‘#ddd‘

                },

                label: {

                    textStyle: {

                        color: ‘#d87a80‘

                    }

                }

            },

            emphasis: {                 // 也是选中样式

                areaStyle: {

                    color: ‘#fe994e‘

                },

                label: {

                    textStyle: {

                        color: ‘rgb(100,0,0)‘

                    }

                }

            }

        }

    },

    

    force : {

        itemStyle: {

            normal: {

                linkStyle : {

                    strokeColor : ‘#1e90ff‘

                }

            }

        }

    },

    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, ‘#2ec7c9‘],[0.8, ‘#5ab1ef‘],[1, ‘#d87a80‘]], 

                width: 10

            }

        },

        axisTick: {            // 坐标轴小标记

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

            length :15,        // 属性length控制线长

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

                color: ‘auto‘

            }

        },

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

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

                color: ‘auto‘

            }

        },

        splitLine: {           // 分隔线

            length :22,         // 属性length控制线长

            lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式

                color: ‘auto‘

            }

        },

        pointer : {

            width : 5,

            color : ‘auto‘

        },

        title : {

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

                color: ‘#333‘

            }

        },

        detail : {

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

                color: ‘auto‘

            }

        }

    },

    

    textStyle: {

        fontFamily: ‘微软雅黑, Arial, Verdana, sans-serif‘

    }

}

在页面中引入该js文件


1

<script src="js/macarons.js"></script>

初始化时,将主题传入


1

var myChart = echarts.init(document.getElementById(‘main‘),e_macarons);

时间: 2024-09-29 21:12:29

echarts使用macarons主题的相关文章

百度echarts自定义主题使用

1.百度echarts官网主题构建,自定义主题 主题在线构建  http://echarts.baidu.com/theme-builder/ 构建完成后下载并保存js文件 2.html导入保存的js文件 <!-- 引入 ECharts 文件 --> <script src="echarts.js"></script> <!-- 引入 自定义主题customed --> <script src="customed.js&q

转:ECharts图表组件入门教程之Theme:ECharts图表的皮肤是什么?如何给图表换主题(皮肤)Theme?

一.什么是ECharts图表的皮肤(主题)? 针对这个问题我只能这样回答,ECharts图表的主题(皮肤)就犹如人的衣服一样,是用来衬托和渲染主体,使其变得更加美观好看的目的.你去过ECharts图表组件的官网应该都看到每一个示例都支持皮肤切换的.我们更深入的理解,皮肤其实就是一些样式的定义集合. 图表有很多部分组成,比如:标题.坐标轴.Series数据.Legend图例等.每一个部分我们可以为其设置style样式,形如:字体颜色.字体大小.旋转角度.背景图片.背景颜色.是否渐变等. 二.如何将

项目整理--Echarts前端后台的贯通写法

项目整理–Echarts前端后台的贯通写法 注:下面所有内容建立在FH admin开源框架和eharts插件基础上,建议观看本案例者进行了解. 业务逻辑 绘制两张图表.分别显示城市空间库和其它数据仓库的信息(城市空间库单独绘制).要求:城市空间库显示数据库的实际使用量和剩余用量.其它库显示百分比. 效果展示 默认显示状态 鼠标指向状态 实现过程 1.后台数据处理 表结构设计 数据库数据 注:此处数据为显示数据,并不是项目使用数据,仅作測试使用. Mapper文件写法 注1:此处在前端页面须要绘制

学习笔记:ECharts

ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图.柱状图.散点图.K线图.饼图.雷达图.地图.和弦图.力导向布局图.仪表盘以及漏斗图,同时支持任意维度的堆积和多图表混合展现. http://echarts.baidu.com/doc/doc.html 文档 http://echarts.baidu.com/doc/example

Echarts个人实例

1.deviceOperateTrendIndex.jsp <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

【WEB前端】eCharts 使用笔记

记录如何在后台拼接 Json 字符串,并如何在前台解析使用,最终根据 Json 数据显示饼图 使用饼图主要为 echarts 的 pieOption 提供 legend 的 data 参数和 series 的 data 参数,而这两个 data 参数格式都被 echarts 控件设计者设置为 json 格式,即 [{xx,xx}],所以我们可以用 javascript 直接接收并重组后台传来的 json 串,从而直接使用该串内容,如下面例子中用 eval("(" + jsonStr +

android 中图表展示的实现——echarts方式实现

android 中想要实现图表的展示,非常麻烦.网上查了一下实现方案,无非三种: 1.自己写画布,慢慢实现,要求太高,很难搞定. 2.用AchartEngine实现,丑陋,而且扩展性很小. 3.采用webview加载js的方式,虽然理论上会比较耗费资源,但是效果不错,而且难度小很多. 下面以一个例子具体介绍依稀这种方式: 首先布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&quo

使用echarts画一个类似组织结构图的图表

昨天,写了一篇关于圆环进度条的博客(请移步:Vue/React圆环进度条),已经烦不胜烦,今天又遇到了需要展示类似公司的组织结构图的功能需求,要冒了!!! 这种需求,自己用div+css也是可以实现的,但是没有什么动画效果,我的css3又很差劲,而且项目中已经使用到了折线图.饼状图.柱状图之类的图表,用的还是百度的echarts,所以这个组织结构图之类的需求也就用了百度的echarts来实现了. 以前用echarts写折线图.柱状图.饼状图的较多,它的API还算比较熟悉,但是画组织结构这样的树状

根据nba数据预测17-18总冠军(转)

#coding=utf-8 import urllib import re import csv import sys #计数,初始化 count = 0 #以下定义的与之对应的是球员姓名.赛季.胜负.比赛.首发.时间.投篮命中率.投篮命中数.投篮出手数.三分命中率.三分命中数.三分出手数.罚球命中率.罚球命中数.罚球次数.总篮板数.前场篮板数.后场篮板数.助攻数.抢断数.盖帽数.失误数.犯规数.得分 list0 = [] list1 = [] list2 = [] list3 = [] lis