图片.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. 新手前端笔记之--初识css

    css样式表是为了容纳与html文档分离出来的样式属性而产生的,所以她理所当然的包含两个部分:1.样式的表示,使用{属性1:属性值:属性2:属性值:...},2.样式与标签的对应(如何找的对应标签), ...

  2. POJ Fence Repair(优先队列）

    Fence Repair Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 51346   Accepted: 16857 De ...

  3. angular 子组件与父组件通讯

    1. 子组件app-sidebar.compnent.html (click)="goProject()"设置点击事件 <mat-list-item [routerLink] ...

  4. 洛谷 P2873 [USACO07DEC]泥水坑Mud Puddles

    P2873 [USACO07DEC]泥水坑Mud Puddles 题目描述 Farmer John is leaving his house promptly at 6 AM for his dail ...

  5. UVa 11015 - 05-2 Rendezvous

    題目:有一個班級的學生要一起寫作業,所以他們要到一個統一的地點.現在給你他們各自的位置, 問集合地點定在哪,能够讓全部人走的總路徑長度最小. 分析:圖論.最短路.直接利用Floyd計算最短路,找到和值 ...

  6. 转换PHP脚本成为windows的执行程序

    转换PHP脚本成为windows的执行程序 Convert a PHP script into a stand-alone windows executable I want to automate ...

  7. 12、python单步调试工具pdb

    pdb 第4种方式是启动Python的调试器pdb,让程序以单步方式运行,可以随时查看运行状态.我们先准备好程序: # err.py s = '0' n = int(s) print(10 / n) ...

  8. 对于学习apache软件基金会顶级项目源码的一点思路（转）

    ASF的开源项目,为软件行业贡献了太多好的产品和软件思维.学习ASF的项目源码能很大的提升自身的能力.程序运行在服务器上的流程:执行启动脚本(start.sh) -> 指向程序的主方法 -> ...

  9. 【Android开发经验】我们要友好的告诉用户，程序要崩溃了

        转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992     尽管我们的程序在正式上线之前,都会经过严格的測试.从而保证程序的健壮性和良好的用户体验,可是 ...

  10. 语言模型（Language Modeling）与统计语言模型

    1. n-grams 统计语言模型研究的是一个单词序列出现的概率分布(probability distribution).例如对于英语,全体英文单词构成整个状态空间(state space). 边缘概 ...