网址：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. Windows下FFmpeg各版本库文件下载

    ffmpeg主要是基于linux开发,当然它也支持windows,不过并不支持visual studio系列IDE(因为它使用了大量C99特性,而vs不支持C99). 要想在windows上使用 一可 ...

  2. 浅谈Linux中的信号处理机制（三）

    一晃眼,已经到9月底了,都来不及去感慨时间匆匆.最近常常会想明年的今天我将会在那里干着什么样的工作?对未来又是憧憬又是担忧,压力山大.无论如何现在还是踏踏实实的学习吧,能这样安安静静学习的日子也不多了 ...

  3. Java基础知识笔记（二：泛型和枚举）

    1.泛型 与面向对象的多态性相类似,应用泛型可以提高程序的复用性.与多态性不同的是,应用泛型可以减少数据的类型转换,从而提高代码的运行效率.泛型实际上是通过给类或接口增加类型参数实现的.不带泛型的类的 ...

  4. 帆软报表FineReport中数据连接的JDBC连接池属性问题

    连接池原理 在帆软报表FineReport中,连接池主要由三部分组成:连接池的建立.连接池中连接使用的治理.连接池的关闭.下面就着重讨论这三部分及连接池的配置问题. 1. 连接池原理 连接池技术的核心 ...

  5. 【2016-10-24】【坚持学习】【Day11】【WPF】【MVVM】

    今天学习wpf的mvvm 人家说,APS.NET ===>MVC WPF===>MVVM 用WPF不用mvvm的话,不如用winform... 哈哈,题外话. 定义: MVVM: WPF的 ...

  6. 如何用python在Windows系统下，生成UNIX格式文件

    平时测试工作中,少不了制造测试数据.最近一个项目,我就需要制造一批可在UNIX下正确读取的文件.为确保这批文件能从FTP下载成功,开发叮嘱我:“文件中凡是遇到换行,换行符必须是UNIX下的LF,而不是 ...

  7. 2016.10.29 NOIP模拟赛 PM 考试整理

    300分的题,只得了第三题的100分. 题目+数据:链接:http://pan.baidu.com/s/1o7P4YXs 密码:4how T1:这道题目存在着诸多的问题: 1.开始的序列是无法消除的( ...

  8. 卡通图像变形算法（Moving Least Squares）附源码

    本文介绍一种利用移动最小二乘法来实现图像变形的方法,该方法由用户指定图像中的控制点,并通过拖拽控制点来驱动图像变形.假设p为原图像中控制点的位置,q为拖拽后控制点的位置,我们利用移动最小二乘法来为原图 ...

  9. PAT 1032. 挖掘机技术哪家强(20)

    为了用事实说明挖掘机技术到底哪家强,PAT组织了一场挖掘机技能大赛.现请你根据比赛结果统计出技术最强的那个学校. 输入格式: 输入在第1行给出不超过105的正整数N,即参赛人数.随后N行,每行给出一位 ...

  10. C#多维数组与嵌套数组

    using System; namespace abc.e.f//等价于下面分层嵌套的写法.且这种写法不管命名空间abc有没有定义过,也不管命名空间e有没有定义过 { class MYTestX { ...