图片.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. c#的中英文混合字符串截取指定长度,startidx从0开始

    //c#的中英文混合字符串截取指定长度,startidx从0开始 by gisoracle@126.com public string getStrLenB(string str, int start ...

  2. TypeScript深入学习

    基础类型booleannumberstringstring[]//Array<string> 数组类型(ReadonlyArray<string>数组不能修改,也不允许被赋值给 ...

  3. 妙味css3课程---1-1、css中自定义属性可以用属性选择器么

    妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...

  4. 12.模板别名以及auto定义返回值

    #include <iostream> #include <array> using namespace std; //定义返回值类型 template<class T1 ...

  5. 79.cgi硬盘查询个人信息

    运行截图: 把cgi编码转为char*类型 //把cgi编码转为char*类型 char* change(char *str) { //分配内存 ); //x是tempstr的下标,y是str的下标 ...

  6. AVCaptureSession音频视频采集

    // // AudioVideoCaptureViewController.m // live // // Created by lujunjie on 2016/10/31. // Copyrigh ...

  7. Win8.1部署 .NET Framework 3.5 安装方式

    Windows 8.1中包含.NET Framework,操作系统安装过程中默认安装 .NET Framework 4.5.1.如果程序需要.NET Framework 3.5支持,将自动启用相关功能 ...

  8. nginx源代码分析--事件模块 &amp; 琐碎

    通过HUP信息使得NGINX实现又一次读取配置文件,使用USR2信号使得NGINX实现平滑升级. 在nginx中有模块这么一说,对外全部的模块都是ngx_module_t类型,这个结构体作为全部模块的 ...

  9. amazeui学习笔记--css（常用组件16）--文章页Article

    amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...

  10. stm32单片机下载方式

    引用   编辑:什么鱼 引用地址:http://www.eeworld.com.cn/mcu/2015/1012/article_22873.html 第一种 ISP下载: 这里类似51. boot1 ...