网址：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. Jackson将json字符串转换成泛型List

    Jackson,我感觉是在Java与Json之间相互转换的最快速的框架,当然Google的Gson也很不错,但是参照网上有人的性能测试,看起来还是Jackson比较快一点 Jackson处理一般的Ja ...

  2. Apple Watch的课表应用iOS源码项目

    源码Class-Timetable,小清新风格的课表应用,可以按周或按天显示课表.按天显示时,左右滑动屏幕可以查看前一天或后一天的课表.功能:可以双模式切换(按天显示,按周显示,可以和 Apple W ...

  3. linux中的权限对于文件和目录的重要性

    对于文件 r 可以读取文件的实际内容 w 可以编辑文件的内容 x 文件可以被系统执行 对于目录 r 具有读取目录的结构列表,也就是说你可以用ls命令查看目录下的内容列表 w 可以建立新的文件,删除文件 ...

  4. 【读书笔记《Bootstrap 实战》】1.初识Bootstrap

    作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址 http://getbootstrap.com/ 进 ...

  5. Linux 之 GCC 和 GDB

    1  GCC = GNU C Compiler 1)  pre-processing (预处理) $ gcc -E -o hello.i hello.c // -E 预处理后停止 2)  compil ...

  6. POJ1061青蛙的约会[扩展欧几里得]

    青蛙的约会 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 108911   Accepted: 21866 Descript ...

  7. 关于webpack编译scss文件

    css加载器文件通常和extract-text-webpack-plugin一块使用,我们可以在源文件src目录下写scss文件,然后通过webpack编译成css文件到输出目录public,这个目录 ...

  8. JS判断字符串长度的5个方法

    这篇文章主要介绍了JS判断字符串长度的5个方法,并且区分中文和英文,需要的朋友可以参考下 目的:计算字符串长度(英文占1个字符,中文汉字占2个字符)   方法一:    代码如下: String.pr ...

  9. WPF MultiRangeSlider 简单实现

    WPF 多滑块Slider简单实现(MultiRangeSlider) WPF中的MultiRangeSlider,网上有商业的,有开源的,找了几个都不太理想,那就自己写 一个吧,给大家提供点思路. ...

  10. 年底发福利了——分享一下我的.NET软件开发资源

    最近建了一个.NET软件开发资源的360网盘共享群,把收集的一些.NET软件开发资源分享给大家,也欢迎大家把好的东东分享一下. 资源主要有:开发工具.控件资源.书籍教程.网页设计.源码资源几大类,也希 ...