Sandbox::https://github.com/WaitAndSee-Rabbit/echarts/blob/master/index.html

Repository navigation

History

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

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

<!DOCTYPE html>

<head>

<title>ECharts</title>

</head>

<body>

<!-- NAVBAR

================================================== -->

</button>

<a class="brand" href="index.html">ECharts</a>

<a id="forkme_banner" href="https://github.com/ecomfe/echarts">View on GitHub</a>

<li><a href="doc/example.html" class="active">Example</a></li>

<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-download-alt icon-white"></i>Download <b class="caret"></b></a>

<li><a href="https://github.com/ecomfe/echarts/archive/master.zip">ZIP (Latest)</a></li>

</ul>

</li>

<li><a href="http://fe.baidu.com/doc/ecom/tech/topic/dv/index.html" target="_blank">Data Visualization</a></li>

<li><a href="http://ecomfe.github.io/zrender/index.html" target="_blank">ZRender</a></li>

</ul>

</li>

</ul>

</div>

</div>

</div>

</div>

<!-- Carousel

================================================== -->

<h1>ECharts</h1>

<h6>（1.4.1 <a href="doc/changelog.html" target="_blank" class="link">Changelog</a>）</h6>

<p>基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。</p>

<p style="text-align: right;"><strong>———— 大数据时代，重新定义数据图表的时候到了</strong></p>

</div>

<h1>ZRender</h1>

<p>一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同~~</p>

<br/>

</div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>

<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>

</div>

</div>

<!-- Marketing messaging and featurettes

================================================== -->

<h2 class="featurette-heading">Architecture</h2>

</div>

<p class="lead">ECharts (Enterprise Charts 商业产品图表库)</p>

<p>提供商业产品常用图表，底层基于<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a>（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图以及力导向布局图，同时支持任意维度的堆积和多图表混合展现。</p>

<div>

<p style="float:right;text-align:right;padding-top:20px;"><strong>———— 开源来自百度商业前端数据可视化团队</strong><br/><span><a href="http://im.baidu.com/" target="_blank">Baidu Hi</a> : 1379172 | <a href="mailto:echarts@baidu.com">echarts@baidu.com</a></span></p>

<div>

<small>  支持IE6/7/8/9+，chrome、firefox、safari、opera <i>(IE8- power by <a href="https://code.google.com/p/explorercanvas/" target="_blank">excanvas</a> )</i></small>

</div>

<p>我们诚挚邀请你翻阅这份在线文档《 <a href="doc/slide/whyEcharts.html" target="_blank">Why ECharts ?</a> 》你可以从中更直观的体验到ECharts的特性以及快速浏览到所有图表类型。<br/>

<small>*文档中展现的个别特性在IE8-中并没有得到支持，所以建议使用IE9+、chrome、safari、firefox或opera等现代浏览器阅读这份文档。</small>

</p>

</div>

<p>混搭的图表会更具表现力也更有有趣味，ECharts提供的图表（共9类14种）支持任意混搭：</p>

<p>折线图（面积图）、柱状图（条形图）、散点图（气泡图）、K线图、<br/>饼图（环形图）、雷达图、地图、和弦图、力导布局图。</p>

<p>混搭情况下一个标准图表：包含唯一图例、工具箱、数据区域缩放、值域漫游模块，一个直角坐标系（可包含一条或多条类目轴线，一条或多条值轴线，最多上下左右四条）</p>

</div>

</div>

<h2 class="featurette-heading">拖拽重计算</h2>

<p>拖拽重计算特性（专利）带来了数据统计图表从未有过的用户体验，允许用户对统计数据进行有效的提取、整合，甚至在多个图表间交换数据，赋予了用户对数据进行挖掘、整合的能力。</p>

</div>

</div>

<p>如果你所呈现的数据足够让用户所关心，那么他们将不满足于查看可视化的图表，要去逐一迎合他们下载保存，数据分享，加工整合已有数据等等需求？</p>

<p>或许你只要给予一个“,”分隔的数据文本他们就懂了，这就是ECharts的数据视图！当然，你可以重载数据视图的输出方法，用你独特的方式去呈现数据。</p>

<p>如果你的用户足够的高端，你甚至可以打开数据视图的编辑功能，跟拖拽重计算相比，这可是批量的数据修改！</p>

</div>

</div>

<h2 class="featurette-heading">动态类型切换</h2>

<p>很多图表类型本身所表现的能力是相似的，但由于数据差异、表现需求和个人喜好的不同导致最终图表所呈现的张力又大不一样，比如折线图和柱状图的选择,系列数据是堆叠还是平铺总是让人头疼。</p>

<p>ECharts提供了动态类型切换，让用户随心所欲的切换到他所需要的图表类型和堆叠状态。</p>

</div>

</div>

<p>多系列数据的同时展现呈现出丰富内容，但如何让用户切换到他所关心的个别系列上？</p>

<p>ECharts提供了方便快捷的多维度图例开关，可以随时切换到你所关心的数据系列。</p>

</div>

</div>

<h2 class="featurette-heading">数据区域选择</h2>

<p>数据可以是无限的，但显示空间总是有限的，数据区域选择组件提供了大数据量中漫游的能力，让用户选择并呈现他所关心的数据区域。</p>

<p>配合随动的均值（极值）标线，标注展现强大的数据剖析能力。 try <a href="./doc/example/mix10.html" target="_blank">this 》</a></p>

</div>

</div>

<p>多系列数据在同一个直角系内同时展现有时候会产生混乱，但他们又存在极强的关联意义不可分离？</p>

<p>ECharts提供了多图联动的能力（connect），能做的可不仅仅是鼠标划过的详情显示，连接的多个图表会共享组件事件并且实现了保存图片时的自动拼接。 try <a href="./doc/example/mix8.html" target="_blank">this 》</a></p>

</div>

</div>

<p>基于坐标的图表（如地图、散点图）通过色彩变化表现数值的大小能直观形象的展示数据分布。</p>

<p>但如何聚焦到我所关心的数值上？我们创造了称为值域漫游的功能，让你可以轻松进行数值筛选。</p>

</div>

</div>

<p>我们知道，很多时候我们需要一些吸引眼球的能力。</p>

<p>ECharts支持标注标线的<a href="./doc/example/map12.html" target="_blank">炫光特效</a>，特别用在地图上轻松实现<a href="./doc/example/map11.html" target="_blank">百度迁徙数据可视化特效</a></p>

</div>

</div>

<h2 class="featurette-heading">大规模散点图</h2>

<p>如何展现成千上百万的离散数据从而找出他们的分布和聚类？貌似除了用专业的统计工具（如MATLAB）外别无选择？</p>

<p>不，ECharts发明了基于像素的大规模散点图（专利），一个900 x 400的散点区域就能够毫不重复的呈现36万组数据，这对于常规的应用，用现代浏览器就足以轻松展现百万级的散点数据！</p>

</div>

</div>

</div>

<h2 class="featurette-heading">动态数据添加</h2>

<p>如果你需要展示有实时变化的数据，相信这个动态接口会对你很有帮助。</p>

</div>

</div>

<p>趋势线？平均线？上升通道？支持位？专业的你自然知道该怎么用</p>

<p>提供标线辅助在K线图中可是必要的功能！当然，ECharts中的任何图表都可以使用。</p>

</div>

</div>

<h2 class="featurette-heading">多维度堆积</h2>

<p>支持多系列，多维度的数据堆积，配合自动伸缩的图形实体和直角坐标系，能呈现出更有内涵的统计图表~</p>

</div>

</div>

<h2 class="featurette-heading">子区域地图模式</h2>

<p>地图类型支持world，china及全国34个省市自治区。同时支持子区域模式，通过主地图类型扩展出所包含的子区域地图，轻易输出全球176个国家地区和全国600多个省市区域简图， try <a href="./doc/example/map8.html" target="_blank">this 》</a></p>

</div>

</div>

<h2 class="featurette-heading">GeoJson地图扩展</h2>

<p>内置地图由标准GeoJson地理数据并经过高效的压缩算法压缩生成的地图数据（大小仅为标准geoJson的30%左右）驱动而来。如果内置地图类型或数据如果并未满足你的项目需要，可通过简单动态注册产生你所需要的新类型， try <a href="./doc/example/map7.html" target="_blank">this 》</a></p>

</div>

</div>

</div>

<p>添加额为的标注内容是常用的功能，如地图上标注某些特定位置，折线图上标注极值点或者柱形图里标线出变化趋势，ECharts全系列图表支持标注标线功能，并且与生俱来的可以响应图例开关、值域漫游等组件的交互功能。</p>

</div>

</div>

</div>

<h2 class="featurette-heading">个性化定制</h2>

<p>超过500个可配置选项结合多级控制设计满足高度定制的个性化需求。</p>

</div>

</div>

<p>可以捕获的用户交互和数据变化事件实现图表间或者与外界的联动。<a href="doc/example/mix3.html" target="_blank">try this »</a></p>

</div>

<hr>

<p>© 2014 <a href="http://efe.baidu.com" target="_blank">EFE</a> · <a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">License</a> · <a href="doc/changelog.html" target="_blank">Changelog</a></p>

</footer>

</div>

<!-- Le javascript

================================================== -->

!function ($) {

$(function(){

// carousel demo

// $('#myCarousel').carousel()

})

}(window.jQuery)

</script>

</body>

</html>

FilesExpand file tree

index.html

Latest commit

History

index.html

File metadata and controls