图片.png
<!DOCTYPE html>

<html>

     <head>

          <meta charset="utf-8">

          <title>五分钟上手之柱状图</title>

          <!-- 引入 echarts.js -->

          <script src="js/echarts.min.js"></script>

          <script src="js/jquery-1.11.3.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'));

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

              myChart.setOption({

                   title: {

                        text: '异步数据加载示例'

                   },

                   tooltip: {},

                   legend: {

                        data: ['销量']

                   },

                   xAxis: {

                        data: ["1","2","3","4","5"]

                   },

                   yAxis: {},

                   series: [{

                        name: '销量',

                        type: 'bar',

                        data: ["1","2","3","4","5"]

                   }]

              });

          </script>

     </body>

</html>

加上json数据之后，动态生成 的统计图

图片.png
<!DOCTYPE html>

<html>

     <head>

          <meta charset="utf-8">

          <title>五分钟上手之柱状图</title>

          <!-- 引入 echarts.js -->

          <script src="js/echarts.min.js"></script>

          <script src="js/jquery-1.11.3.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'));

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

              myChart.setOption({

                   title: {

                        text: '异步数据加载示例'

                   },

                   tooltip: {},

                   legend: {

                        data: ['销量']

                   },

                   xAxis: {

                        data: []

                   },

                   yAxis: {},

                   series: [{

                        name: '销量',

                        type: 'bar',

                        data: []

                   }]

              });

              // 异步加载数据

              $.get('data.json').done(function (data) {

                   // 填入数据

                   myChart.setOption({ xAxis: { data: data.categories }, series: [{

                        // 根据名字对应到相应的系列

                        name: '销量',

                        data: data.data

                   }]

                   });});

          </script>

     </body>

</html>

data.json数据

{

    "categories": [

        "苹果",

        "橘子",

        "荔枝",

        "桃子",

        "栗子",

        "梨子",

        "柿子"

    ],

    "data": [

        500,

        280,

        386,

        190,

        107,

        207,

        452

    ]

}

文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等10G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880

福利二：微信小程序入门与实战全套详细视频教程。

【领取方法】

关注 【编程微刊】微信公众号：

回复【小程序demo】一键领取130个微信小程序源码demo资源。

回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集10G资源大放送。


原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

【前端统计图】echarts实现简单柱状图的更多相关文章

  1. 前端统计图 echarts 实现简单柱状图

    前端统计图   echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...

  2. echarts之简单的入门——【二】再增加一个柱状图和图例组件

    echarts之简单的入门——[一]做个带时间轴的柱状统计图 现在需求说,我需要知道日答题总次数和活跃人数,那么我们如何在上面的图表中增加一个柱状图呢? 如果你看过简单入门中的配置项手册中series ...

  3. echarts —— 绘制横向柱状图（圆角、无坐标轴）

    UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...

  4. echarts的简单应用之（二）饼图

    接上一篇文章: echarts的简单应用之(一)柱形图:https://www.cnblogs.com/jylee/p/9359363.html 本篇文章讲述饼图,撇过折线图不说,是因为折线图与柱形图 ...

  5. 如何基于 echarts 实现区间柱状图（包括横向）？

    目录 需求 借鉴 echarts 的 demo 最终实现思路 实现效果 遇到的问题: 代码映射 源码 最后 始终如一 需求 需要利用 echarts 实现区间柱状图,效果如下: 效果来源于:g2-柱状 ...

  6. 【前端统计图】echarts多条折线图和横柱状图实现

    参考链接:echarts官网:http://echarts.baidu.com/ 原型图(效果图): 图片.png 代码: <!DOCTYPE html> <html> < ...

  7. 【前端统计图】echarts实现属性修改

    原图: 原代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  8. 【前端统计图】echarts改变颜色属性的demo

    一:柱状图改变颜色 图片.png 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

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

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

随机推荐

  1. RecyclerView 展示多种类型Item数据

    一.多Item布局实现(MultipleItem) 如果之前你用过ListView实现过此功能,那么你一定对下面这两个方法并不陌生 @Override public int getItemViewTy ...

  2. Codefroces 760 B. Frodo and pillows

    B. Frodo and pillows time limit per test 1 second memory limit per test 256 megabytes input standard ...

  3. BZOJ2565: 最长双回文串（Manacher）

    Description 顺序和逆序读起来完全一样的串叫做回文串.比如acbca是回文串,而abc不是(abc的顺序为“abc”,逆序为“cba”,不相同).输入长度为n的串S,求S的最长双回文子串T, ...

  4. 5.Zookeeper的两种安装和配置（Windows）：单机模式与集群模式

    转自:https://blog.csdn.net/a906998248/article/details/50815031

  5. 为什么选择Solr？

    在大型的SQL数据库上很难执行高速的查询有Solr是Apache 下的一个开源项目,使用Java基于Lucene开发的全文检索服务: 它是一个独立的企业级搜索应用服务器,它对外提供类似于Web-ser ...

  6. JQuery 各节点获取函数：父节点，子节点，兄弟节点

    jQuery.parent(expr)           //找父元素 jQuery.parents(expr)          //找到所有祖先元素,不限于父元素 jQuery.children ...

  7. SQL server 错误代码对比表

    0  操作成功完毕.    1  功能错误.    2  系统找不到指定的文件.    3  系统找不到指定的路径.    4  系统无法打开文件.    5  拒绝訪问.    6  句柄无效.   ...

  8. input选中 和 select点击下拉选择获取选中选项的值

    1.input选中$('#checkBox').find('input').each(function(i){ if($(this).prop('checked')){//获取是否选中 并判断 $(t ...

  9. （转）c运行库、c标准库、windows API的区别和联系

    C运行时库函数C运行时库函数是指C语言本身支持的一些基本函数,通常是汇编直接实现的.  API函数API函数是操作系统为方便用户设计应用程序而提供的实现特定功能的函数,API函数也是C语言的函数实现的 ...

  10. php课程 10-35 php实现文件上传的注意事项是什么

    php课程 10-35 php实现文件上传的注意事项是什么 一.总结 一句话总结:记得限制大小和类型,还有就是用move_uploaded_file($sfile,$dfile);函数把上传到php临 ...