ECharts的简单使用

ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。 ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。

一、 echarts下载

下载页:http://echarts.baidu.com/download.html

二、使用三步走

  1. 在页面中指定一个div并指定宽高:<div style="width:100%;height:500px;" id="map_charts"></div>
  2. 页面中引用js<script type="text/javascript" src="echarts.min.js"></script>
  3. 页面加载完毕后调用代码初始化 option参数配置见文档:http://echarts.baidu.com/option.html
     var myChart = echarts.init(document.getElementById('map_charts'));//一个div只能有一个实例
     var option={}//..图表的配置
     myChart.setOption(option);

关于地图图表

需要引用中国区域的js或者使用json初始化地图 下载中国/世界地图的js或者json 文档:http://echarts.baidu.com/download-map.html 文档底部有js和json的使用示例

JavaScript 引入示例 <script src="echarts.js"></script> <script src="map/js/china.js"></script> <script> var chart = echarts.init(document.getElementById('main')); chart.setOption({ series: [{ type: 'map', map: 'china' }] }); </script> JSON 引入示例 $.get('map/json/china.json', function (chinaJson) { echarts.registerMap('china', chinaJson); var chart = echarts.init(document.getElementById('main')); chart.setOption({ series: [{ type: 'map', map: 'china' }] }); });

效果预览

demo地址:http://runjs.cn/detail/gkxnlkgy

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Ryan Miao

sublime Text3使用笔记

转载:http://blog.csdn.net/u012771929/article/details/30030249 目录: 1.setting   安装插件...

36211
来自专栏逆向技术

winhex十六进制常用快捷键

Winhex 是一个专门用来对付各种日常紧急情况的工具。它可以用来检查和修复各种文件、恢复删除文件、硬盘损坏造成的数据丢失等。同时它还可以让你看到其他程序隐藏起...

4072
来自专栏听雨堂

CSS实现按钮的两张图片的同步出现

      通过图片交换实现了按钮图片,但是存在一个问题,老是先加载一个图片,另外一个却加载得慢,效果反而不好。这是网上的解决方法,实现css图片的预加载: <...

2069
来自专栏生信宝典

CIRCOS圈图绘制 - circos安装

Circos是绘制圈图的神器,在http://circos.ca/images/页面有很多CIRCOS可视化的示例。 ? ? Circos可以在线使用,在线使用...

2198
来自专栏与神兽党一起成长

使用echarts问题1

如果如果你是这样使用echarts的,那请注意了。 刚开始我用页面的DOM去做echarts.init(dom);

1954
来自专栏上善若水

vscode 常用快捷键

Visual Studio Code是个牛逼的编辑器,启动非常快,完全可以用来代替其他文本文件编辑工具。又可以用来做开发,支持各种语言,相比其他IDE,轻量级完...

8837
来自专栏君赏技术博客

Xcode8时代让我们一起继续使用我们的插件吧

第一步复制一份你从AppStore下载最新Xcode8。正版授权的我们命名为Xcode_Release用于我们发版本使用。复制出来的一份我们改成Xcode.

913
来自专栏破晓之歌

AI-icon制作 原

825
来自专栏知道一点点

webstorm快捷键收集【转发】 WebStorm快捷键收集

1132
来自专栏前端杂谈

.vue文件在webstorm中es6语法报错解决方法

35912

扫码关注云+社区

领取腾讯云代金券