网址：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. Terminate Instance 操作详解 - 每天5分钟玩转 OpenStack（33）

    本节通过日志详细分析 Nova Terminate 操作. Terminate 操作就是删除 instance,下面是 terminate instance 的流程图 向 nova-api 发送请求 ...

  2. 【转载】Markdown使用笔记

    献给写作者的 Markdown 新手指南 http://www.jianshu.com/p/q81RER 「简书」作为一款「写作软件」在诞生之初就支持了 Markdown,Markdown 是一种「电 ...

  3. c#中对txt文件的读取与写入，针对二维数组

    class Program { ; ; static string[,] str = new string[ROW, COL]; static void Main(string[] args) { R ...

  4. ANDROID STDUIO 项目里的R文件突然丢失的解决办法N种之一

    刚刚项目里的R文件突然挂了,清理项目,关闭重开Studio,都不能解决.快没折了. 然后只好在项目上右击,看看有没有解决的办法.发现有个 Make Module ,姑且试试吧. 结果,竟然修复了.这是 ...

  5. NSLogger 简单用法总结

    NSLogger 支持在同一个本地网络下,移动 App产生的日志,通过 Bonjour 网络传送到电脑上查看日志信息. 1.具体用法: 在移动App项目里,添加3个文件: LoggerCommon.h ...

  6. 使用scvmm 2012的动态优化管理群集资源

    动态优化(Dynamic Optimization)是在scvmm2012之后引入的一个新特性,简单来说,这个特性的功能就如字面意义一样,在群集范围内使用动态迁移VM的方式优化主机的资源,使主机与VM ...

  7. HTTPS简述

    Https是什么? HTTPS是Http Over SSL,简单来说就是HTTP的安全版本,在http之上使用TLS,SSL加密协议. HTTPS实质是在HTTP基础上使用非对称加密相互生成并传递对称 ...

  8. httpclient进行basic auth认证

    private HttpClientContext context = HttpClientContext.create(); public void addUserOAuth(String user ...

  9. Counting Bits -leetcode

    introduction: Given a non negative integer number num. For every numbers i in the range 0 ≤ i ≤ num  ...

  10. Redis的安装

    1. 中文官网:http://www.redis.cn/download.html 英文官网:http://www.redis.io/download 里面的内容的一样的,就是一个是中文写的,一个是英 ...