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 条评论
登录 后参与评论

相关文章

  • 使用T4模板合并js文件

    前因:在第一个使用angularjs的项目中我将所有的controller写到一个文件里面,深知维护起来那滋味,所以再次使用angularjs的时候,我便把所有...

    易墨
  • 使用jenkins自部署Coding项目

    文档地址:http://codingcorp.coding.me/coding-openapi/ci/jenkins/

    易墨
  • iis发布后模板字体不能加载的解决方案

    3、在使用H+模板的时候又出现了问题,然后前两种都没能解决问题,因为mvc的原因,

    易墨
  • Java 并发(2)AbstractQueuedSynchronizer 源码分析之独占模式

    在上一篇《Java 并发系列(1)AbstractQueuedSynchronizer 源码分析之概要分析》中介绍了 AbstractQueuedSynchro...

    一个优秀的废人
  • 图文并茂:AQS 是怎么运行的?

    如果你想深入研究Java并发的话,那么AQS一定是绕不开的一块知识点,Java并发包很多的同步工具类底层都是基于AQS来实现的,比如我们工作中经常用的Lock工...

    Java技术栈
  • 5. 创建 Observable

    使用 RxJS 的话,创建一个 observable 来代替(基于最新的Rxjs6版本写法)

    mafeifan
  • cs230 深度学习 Lecture 2 编程作业: Logistic Regression with a Neural Network mindset

    杨熹
  • 深入浅出Logistic Regression之二分类

    ---- 概述 在深度学习笔记-神经网络基础文章里面介绍过Logistic Regression模型进行二分类和推导。比如:我们现在有一张彩色图片让计算机自己识...

    BrianLv
  • python:常见函数查询

    函数名: lstrip(),rstrip() 函数说明: 删除字符串开头(末尾)指定指定字符串

    小二哥
  • 【阿星的学习笔记(1)】如何在windows安裝Theano +Keras +Tensorflow並使用GPU加速訓練神經網路

    今天开始,Lady向各位介绍一个朋友阿星(Ashing)以及他的机器学习读书笔记! ? 阿星也是我们手撕深度学习算法微信群的热心群友!接下来,Lady我也会陆续...

    GPUS Lady

扫码关注云+社区

领取腾讯云代金券