网址：http://echarts.baidu.com  提示：不需要导入Jquery.js

使用:

1.导入js，echarts.js

2.创建容器

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<div id="main" style="width: 600px;height:400px;"></div>

3.创建js

<script type="text/javascript">

  // 基于准备好的dom，初始化echarts实例

  var myChart = echarts.init(document.getElementById('main'));     // a.不可缺少

  // 指定图表的配置项和数据

  var option = {

    ....具体的绘图代码.....    // b.绘图代码，不可缺少  实例演示网址：http://echarts.baidu.com/demo.html

  };

  // 使用刚指定的配置项和数据显示图表。

  myChart.setOption(option);     // c.不可缺少

</script>

详情教程地址：http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

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

</head>

<body>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例

    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据

    var option = {

        title: {

            text: 'ECharts 入门示例'

        },

        tooltip: {},

        legend: {

            data:['销量']

        },

        xAxis: {

            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

        },

        yAxis: {},

        series: [{

            name: '销量',

            type: 'bar',

            data: [, , , , , ]

        }]

    };

    // 使用刚指定的配置项和数据显示图表。

    myChart.setOption(option);

</script>

</body>

</html>

echarts统计图使用的更多相关文章

  1. echarts统计图Y轴（或X轴）文字过长问题解决

    echarts 统计图Y轴文字过长 在使用echarts时,出现数值非常大,Y轴又显示不下的情况就需要压缩Y轴数值刻度. 解决方法: yAxis: { type: 'value', axisLabel ...

  2. echarts统计图踩坑合集

    1:折线图条的颜色修改 series : [ { name : 'SBP(收缩压)', type : 'line', itemStyle : { normal : { lineStyle:{ colo ...

  3. asp.net MVC项目开发之统计图echarts柱状图（一）

    echarts统计图doc网址:http://echarts.baidu.com/echarts2/index.html 使用echarts,需要引用在js中,如果你已经下载echarts的js包,可 ...

  4. 润乾报表如何使用Echarts

     1.    润乾报表中使用Echarts统计图的步骤 2.    报表中添加echarts2统计图 选中需要设为统计图的单元格,点击 报表-第三方图形 菜单项,或者右键菜单-第三方图形,在图形编 ...

  5. arcgis api 4.x for js 结合 Echarts4 实现统计图(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  6. asp.net MVC项目开发之统计图的使用（前言）

    接触这个项目,是项目组长已经完成了多数需求,并且有2个项目需要完工的情况下,让我加入,给了我2个表格,让我去设计出统计图.      第一次做统计图,可以说没有任何经验,不知道该如何下手,表格的数据量 ...

  7. 润乾V5手机报表说明文档

    1.手机报表实例页面简要说明 index.jsp 是报表资源列表页面: mbReport.jsp 是报表展现页面: mbParam.jsp是参数报表展现页面: echarts.jsp是带有echart ...

  8. BI系统：发挥大数据的价值

    ​大数据是指大数据集,这些数据集经过计算分析以揭示与数据的某个方面相关的模式和趋势.首先,还是要重新审视大数据的定义.行业里对大数据的定义有很多,有广义的定义,也有狭义的定义. 大数据的分析与挖掘,把 ...

  9. arcgis api for js之echarts开源js库实现地图统计图分析

    前面写过一篇关于arcgis api for js实现地图统计图的,具体见:http://www.cnblogs.com/giserhome/p/6727593.html 那是基于dojo组件来实现图 ...

随机推荐

  1. dom4j读取某个元素的某个属性

    一.dom4j介绍 dom4j是一个Java的XML API,类似于jdom,用来读写XML文件的.dom4j是一个非常非常优秀的Java XML API,具有性能优异.功能强大和极端易用使用的特点, ...

  2. php使用$_SERVER["REMOTE_ADDR"]获取访问IP地址

    print "您的IP地址是:"; if(!empty($_SERVER["HTTP_CLIENT_IP"])){  $cip = $_SERVER[" ...

  3. 解密FFmpeg播放track mode控制

    上一篇文章(http://www.cnblogs.com/yangdanny/p/4421130.html)我们解决了在FFmpeg下如何处理H264和AAC的扩展数据,根据解出的NALU长度恢复了H ...

  4. 使用Struts框架，实现用户登陆功能

    前言:本篇文章是本人这周学习的一个小结,在自我总结的同时,希望也能够给其他同学带来一点帮助.本文主要知识是参照书本上的知识点以及网上其他博客文章,在上机操练后的所得,具体源码主要来自http://bl ...

  5. import com.sun.image.codec.jpeg.JPEGCodec不通过 找不到包

    import com.sun.image.codec.jpeg.JPEGCodec;   在Eclipse中处理图片,需要引入两个包: import com.sun.image.codec.jpeg. ...

  6. web前端开发分享-css,js工具篇

    web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...

  7. P1546 最短网络 Agri-Net

    题目背景 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场.当然,他需要你的帮助. 题目描述 约翰已经给他的农场安排了一条高速的网络线路,他想把这条线路共享给其 ...

  8. AI方向

    普通程序员如何转向AI方向   眼下,人工智能已经成为越来越火的一个方向.普通程序员,如何转向人工智能方向,是知乎上的一个问题.本文是我对此问题的一个回答的归档版.相比原回答有所内容增加. 一. 目的 ...

  9. 微信小程序之生命周期(三)

    [未经作者本人同意,请勿以任何形式转载] 上一篇介绍微信小程序开发工具使用和项目目录结构. 这一章节介绍微信小程序的生命周期,什么是生命周期呢? 通俗的讲,生命周期就是指一个对象的生老病死. 从软件的 ...

  10. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...