图片.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. 洛谷P3403跳楼机（最短路构造/同余最短路）

    题目-> 解题思路: 最短路构造很神啊. 先用前两个值跑在第三个值模意义下的同余最短路(这步贪心可以证明,如果第三步长为z,那么如果n+z可以达到,n+2z同样可以达到) 最后计算与楼顶差多少个 ...

  2. Vijos——T 1164曹冲养猪

    https://vijos.org/p/1164 描述 自从曹冲搞定了大象以后,曹操就开始捉摸让儿子干些事业,于是派他到中原养猪场养猪,可是曹冲满不高兴,于是在工作中马马虎虎,有一次曹操想知道母猪的数 ...

  3. [React] Render Text Only Components in React 16

    In this session we create a comment component to explore how to create components that only render t ...

  4. Lamp(linux+apache+mysql+php)环境搭建

    Lamp(linux+apache+mysql+php)环境搭建 .安装apache2:sudo apt-get installapache2 安装完毕后.执行例如以下命令重新启动apache:sud ...

  5. 洛谷 P1097 统计数字

    P1097 统计数字 题目描述 某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*10^9).已知不相同的数不超过10000个,现在需要统计这些自然数各自出现的次数,并按照自 ...

  6. Android 获取联系人手机号码、姓名、地址、公司、邮箱、生日

    public void testGetAllContact() throws Throwable { //获取联系人信息的Uri Uri uri = ContactsContract.Contacts ...

  7. UVA 10391 - Compound Words 字符串hash

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  8. javascript面对对象编程 之继承

    上一篇博客中为大家介绍了javascript面向对象编程原则的封装,今天为大家介绍继承.在javascript中没有类的概念,全部不能像c#.java语言那样.直接的用类去继承类.比方如今有比方.如今 ...

  9. HttpClient请求发送的几种用法二：

    public class HttpClientHelper    {        private static readonly HttpClientHelper _instance = new H ...

  10. Spring的资源抽象Resource2实体类

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA0UAAAGkCAIAAABxYhnsAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWX ...