图片.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. mobx项目创建 + mobx项目流程代码

    一. 安装mobx 1. react 安装并 reject抽离配置 1. 全局安装 create-react-app 这个脚手架 npm/cnpm i create-react-app -g yarn ...

  2. 父子margin塌陷

    1.使用padding 2.给父级使用border 3.给父级添加属性 overflow:hidden 4.浮动 5.定位{absolute,fixed} 6.伪元素代码 .parent:before ...

  3. python学习三：列表，元组

    1.列表: 1.列表的定义方式: list1 = [1,2,3,4,"hello","world"] 如上所示,list1就是一个列表,列表的内容以中括号包含起 ...

  4. Android学习路线（十四）Activity生命周期——停止和重新启动(Stopping and Restarting)一个Activity

    正确地停止和重新启动你的activity在activity的生命周期中是一个非常重要的过程.这样可以确保你的用户感觉到你的应用一直都活着而且没有丢失进度.你的activity的停止和重新启动时有几个重 ...

  5. Python *的下载、安装和使用

    最近正在学习机器学习和深度学习,需要python,大家都知道,它是这些领域的入门语言,不多说,直接上干货!突然发现python比java好玩多了 下面就开始python的安装以及测试,python2. ...

  6. 方正飞越 A600硬改BIOS激活win7的工具与方法。

    硬件:方正飞越A600-4E57:主板,H61 IPISB-VR:BIOS版本,方正A007SB0(AMI) 软件:Win7专业版 目标:修改BIOS,添加SLIC2.1,硬激活win7 OEM版 具 ...

  7. JavaScript 倒计时器，闹钟功能

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 我在世界最热创业孵化器YC学到的58件事

    Amir Elaguizy是网络扑克游戏平台MarketZero创始人,2011年,他创立的这家公司被Zynga收购,后在Zynga担任HTML5扑克游戏的CTO.目前他同时是社会化点评网站lark. ...

  9. winedt （latex 编译器）解决中文的问题（CJK & CTEX）

    主要是导入相关的库支持: 1. CJK \usepackage{CJK}:CJK,是中日韩的英文首字母的组合,处理中文需要先导入这个包: \begin{CJK*}{GBK}{song}:默认句式,表示 ...

  10. C++组合数（combination）的实现

    实现: (nm) 既需要计算组合的总数 (32)=3: 也需要分别获得每一种组合的情形,用于穷举搜索: 1, 2; 1, 3; 2, 3 1. 递归实现 // picked + toPick == m ...