图1和图2是手机上显示的效果，

图3是电脑浏览器显示的效果。

如何使用ECharts?

1.下载echarts.js

2.引入echarts.js

  1. <script type="text/javascript" src="../../plugin/echarts/echarts.js"></script>

3.定义div区域

  1. <div id="ec1" style="width: 100%;height:400px;"></div>
  3. <div id="ec2" style="width: 100%;height:400px;"></div>

4.初始化并关联区域

  1. // 基于准备好的dom，初始化echarts实例
  2. var myEc1 = echarts.init(document.getElementById('ec1'));

5.配置数据与参数

  1.     // 指定图表的配置项和数据
  2.     var option = {
  3.         title: {
  4.             text: 'ECharts 入门示例'
  5.         },
  6.         tooltip: {},
  7.         legend: {
  8.             data:['销量']
  9.         },
  10.         xAxis: {
  11.             data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  12.         },
  13.         yAxis: {},
  14.         series: [{
  15.             name: '销量',
  16.             type: 'bar',
  17.             data: [5, 20, 36, 10, 10, 20]
  18.         }]
  19.     };

6.填充区域

  1. // 使用刚指定的配置项和数据显示图表。
  2. myEc1.setOption(option);

tips:这里最核心的就是option这个参数了，配置不同的option，就会显示不同的图表内容。

完整案例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
  6.     <title>echarts测试</title>
  7. </head>
  9. <body style="overflow: hidden;">
  11. <header class="aui-bar aui-bar-nav">
  12.     echarts测试
  13. </header>
  15. <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  16. <div id="ec1" style="width: 100%;height:400px;"></div>
  18. <div id="ec2" style="width: 100%;height:400px;"></div>
  20. <script type="text/javascript" src="../../plugin/echarts/echarts.js"></script>
  22. <script>
  23.     // 基于准备好的dom，初始化echarts实例
  24.     var myEc1 = echarts.init(document.getElementById('ec1'));
  26.     // 指定图表的配置项和数据
  27.     var option = {
  28.         title: {
  29.             text: 'ECharts 入门示例'
  30.         },
  31.         tooltip: {},
  32.         legend: {
  33.             data:['销量']
  34.         },
  35.         xAxis: {
  36.             data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  37.         },
  38.         yAxis: {},
  39.         series: [{
  40.             name: '销量',
  41.             type: 'bar',
  42.             data: [5, 20, 36, 10, 10, 20]
  43.         }]
  44.     };
  46.     // 使用刚指定的配置项和数据显示图表。
  47.     myEc1.setOption(option);
  49.     var myEc2 = echarts.init(document.getElementById('ec2'));
  50.     option = {
  51.         tooltip : {
  52.             trigger: 'axis',
  53.             axisPointer : {            // 坐标轴指示器，坐标轴触发有效
  54.                 type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
  55.             }
  56.         },
  57. //        label:{
  58. //            normal:{
  59. //                show: true,
  60. //                position: 'inside'}
  61. //        },
  62.         legend: {
  63.             data:['直接粉丝','间接粉丝']
  64.         },
  65.         grid: {
  66.             left: '3%',
  67.             right: '4%',
  68.             bottom: '3%',
  69.             containLabel: true
  70.         },
  71.         xAxis : [
  72.             {
  73.                 type : 'category',
  74.                 data : ['一月','二月','三月','四月','五月','六月','七月']
  75.             }
  76.         ],
  77.         yAxis : [
  78.             {
  79.                 type : 'value'
  80.             }
  81.         ],
  82.         series : [
  83.             {
  84.                 name:'直接粉丝',
  85.                 type:'bar',
  86.                 data:[320, 332, 301, 334, 390, 330, 320]
  87.             },
  89.             {
  90.                 name:'间接粉丝',
  91.                 type:'bar',
  92.                 stack: '广告',
  93.                 data:[150, 232, 201, 154, 190, 330, 410]
  94.             }
  95.         ]
  96.     };
  98.     myEc2.setOption(option);
  100. </script>
  102. </body>
  103. </html>

具体使用，可以参考官方案例，http://echarts.baidu.com/examples.html

ECharts简单入门的更多相关文章

  1. ECharts简单入门demo

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. ECharts.js学习（一） 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  3. ECharts.js 超简单入门（本质canvas）

    ECharts.js 超简单入门(本质canvas) 一.总结 一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门 ...

  4. HCharts随笔之简单入门

    此处可以对比我的另一个Echars简单入门 直接上源码 <!DOCTYPE html> <html> <head> <meta http-equiv=&quo ...

  5. EChart.js 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  6. 用IntelliJ IDEA创建Gradle项目简单入门

    Gradle和Maven一样,是Java用得最多的构建工具之一,在Maven之前,解决jar包引用的问题真是令人抓狂,有了Maven后日子就好过起来了,而现在又有了Gradle,Maven有的功能它都 ...

  7. [原创]MYSQL的简单入门

    MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...

  8. Okio 1.9简单入门

    Okio 1.9简单入门 Okio库是由square公司开发的,补充了java.io和java.nio的不足,更加方便,快速的访问.存储和处理你的数据.而OkHttp的底层也使用该库作为支持. 该库极 ...

  9. emacs最简单入门，只要10分钟

    macs最简单入门,只要10分钟  windwiny @2013    无聊的时候又看到鼓吹emacs的文章,以前也有几次想尝试,结果都是玩不到10分钟就退出删除了. 这次硬着头皮,打开几篇文章都看完 ...

随机推荐

  1. 【BZOJ4826】【HNOI2017】影魔

    题意: Description 影魔,奈文摩尔,据说有着一个诗人的灵魂.事实上,他吞噬的诗人灵魂早已成千上万.千百年来,他收集了各式各样的灵魂,包括诗人.牧师.帝王.乞丐.奴隶.罪人,当然,还有英雄. ...

  2. json对象与其字符串之间的转换

    在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键.例如: JSON字符串:var str1 = '{ &qu ...

  3. hdoj-5099-Comparison of Android versions

    Comparison of Android versions Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (J ...

  4. Hdu4786

    Fibonacci Tree Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  5. Android bluetooth介绍（一）：基本概念及硬件接口

    关键词:蓝牙硬件接口 UART  PCM  blueZ 版本号:基于android4.2之前版本号 bluez内核:linux/linux3.08系统:android/android4.1.3.4作者 ...

  6. android 自己定义dialog并实现失去焦点（背景透明）的功能

    前言:因为在项目中须要用到更新显示动画的需求,所以想到了dialog,自己定义dialog不难.网上教程非常多,可是在实现dialog背景透明的需求时,遇到了一点问题.网上的一些方法在我的机器上并没有 ...

  7. Android Application 类共享全局数据

    android系统会为每一个程序执行时创建一个Application类的对象且仅创建一个.所以Application能够说是单例模式的一个类.且application对象的生命周期是整个程序中最长的, ...

  8. Android开发：getViewById返回null的原因定位

    近期在研究开发一些基于Android的App,遇到了一些问题.当中一个比較关键的是在Activity中的onCreate()方法中获取Button对象.代码大概例如以下: private Button ...

  9. blog_html

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:v ...

  10. zzulioj--1746--三角形面积(几何水题)

    1746: 三角形面积 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 100  Solved: 31 SubmitStatusWeb Board De ...