一：先在官网下载

https://www.echartsjs.com/zh/download.html

然后再建立工程，导入这两个包：

写代码：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>ECharts</title>

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

     <!-- 这里是加载刚下好的echarts.min.js，注意路径 -->

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

 </head>

 <body>

     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

     <div id="main" style="width: 1000px;height:600px;"></div>

     <script type="text/javascript">

         // 基于准备好的dom，初始化echarts实例

         var myChart = echarts.init(document.getElementById('main'));

         var option = {

                 title : {

                     text: '某地区蒸发量和降水量',

                     subtext: '纯属虚构'

                 },

                 tooltip : {

                     trigger: 'axis'

                 },

                 legend: {

                     data:['蒸发量','降水量']

                 },

                 toolbox: {

                     show : true,

                     feature : {

                         dataView : {show: true, readOnly: false},

                         magicType : {show: true, type: ['line', 'bar']},

                         restore : {show: true},

                         saveAsImage : {show: true}

                     }

                 },

                 calculable : true,

                 xAxis : [

                     {

                         type : 'category',

                         data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']

                     }

                 ],

                 yAxis : [

                     {

                         type : 'value'

                     }

                 ],

                 series : [

                     {

                         name:'蒸发量',

                         type:'bar',

                         data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],

                         markPoint : {

                             data : [

                                 {type : 'max', name: '最大值'},

                                 {type : 'min', name: '最小值'}

                             ]

                         },

                         markLine : {

                             data : [

                                 {type : 'average', name: '平均值'}

                             ]

                         }

                     },

                     {

                         name:'降水量',

                         type:'bar',

                         data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],

                         markPoint : {

                             data : [

                                 {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},

                                 {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}

                             ]

                         },

                         markLine : {

                             data : [

                                 {type : 'average', name : '平均值'}

                             ]

                         }

                     }

                 ]

             };

        // 使用刚指定的配置项和数据显示图表。

         myChart.setOption(option);

         myChart.on('click', function (params) {

             window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));

         });

     </script>

 </body>

 </html>

Echarts案例-柱状图的更多相关文章

  1. Echarts调整图表上下左右的间距，Echarts调整柱状图左右的间距

    Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...

  2. Echarts堆积柱状图排序问题

    Echarts堆积柱状图排序是按照堆积柱状图的柱子高度进行从大到小(或者从小到大)进行排序,方便查阅各坐标情况.以下是我自己研发的方法,有不对的地方敬请谅解,随时欢迎指教. 排序后效果如下图: (1) ...

  3. ECharts案例教程1

    原文:http://blog.csdn.net/whqet/article/details/42703973 简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,是百度的 ...

  4. Thinkphp+ECharts生成柱状图

    1.首先进ECharts官网下载echarts.js 点击下载,结合TP5讲解,主要代码在js里面,更多请到ECharts官网 2.引进echarts.js <!DOCTYPE html> ...

  5. echarts彩虹柱状图 每个bar显示不同颜色， 标题在不同位置 ，工具中有可以直接保存为图片下载，平均线的添加

    可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...

  6. echarts分组柱状图的前后台处理 带平均线显示

    原生的echarts使用: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g ...

  7. ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决

    1. 我们在日常的开发中使用Echarts时,不像在学习的过程中是自己在option中的配置项填写图表需要的参数,而是通过ajax请求后台,获取数据后,使用javascript来动态的修改数据,但是有 ...

  8. echarts使用——柱状图

    开发中,做报表统计的时候,很容易用到echarts实现折线图.饼状图.柱状图的绘制,使用echarts插件很简单,官网有教程实例,但主要是这些图需要的数据格式的转换. 我的柱状图实现效果: 第一部分 ...

  9. echarts 堆叠柱状图 ＋ 渐变柱状图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 13-MySQL DBA笔记-迁移、升级、备份、恢复数据库

    第13章 迁移.升级.备份.恢复数据库本章将为读者讲述数据库的各种维护任务:迁移.升级.备份和恢复.因为每个人熟悉的工具不同,其对应的迁移.升级.备份和恢复的方式也都略有不同,本书将尽量对笔者认为最具 ...

  2. 一个因MySQL大小写敏感导致的问题

    做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! 00 MYSQL对大小写敏感 见字如面,见标题知内容.你有遇到过因为MYSQL对大小写敏感而被坑的体验吗? 之前看过阿里巴 ...

  3. JDBC 学习复习9 配置Tomcat数据源

    在实际开发中,我们有时候还会使用服务器提供给我们的数据库连接池,比如我们希望Tomcat服务器在启动的时候可以帮我们创建一个数据库连接池,那么我们在应用程序中就不需要手动去创建数据库连接池,直接使用T ...

  4. sql 视图的用法

    在一个项目的实际开发过程中牵涉到复杂业务的时候,我们不可避免的需要使用中间表来进行数据连接,有的同学就说了,我可以采用Hibernate进行主外键进行关联啊?多对多,多对一,一对一,等,采用主外键关联 ...

  5. Unity UGUI Button 无法点击问题一例

    理论上,只要一个按钮自己这一层或者子节点有一个控件勾选了RaycastTarget,并且按钮为Interactable的.并且不被其他可以点击的控件阻挡,那么这个按钮就可以被点击 在调一个界面时发现一 ...

  6. Java中程序、进程、线程的区别。

    程序.进程.线程的区别. 程序(program):是一个指令的集合.程序不能独立执行,只有被加载到内存中,系统为他分配资源后才能执行. 进程(process):一个执行中的程序称为进程. 进程是系统分 ...

  7. 小白_开始学Scrapy__原理

    整体架构 引擎(Scrapy Engine),用来处理整个系统的数据流处理,触发事务. 调度器(Scheduler),用来接受引擎发过来的请求,压入队列中,并在引擎再次请求的时候返回. 下载器(Dow ...

  8. 【问题】Debian安装、配置sources.list、安装VMware Tools

    Debian安装: 我采用的是纯命令行安装方式.具体安装过程网上一大堆,不介绍了.需要强调一点,那个SSH Server必须选,否则像XShell这样的客户端不能访问Debian. 配置sources ...

  9. web.py之cookie和session

    官方给的session例子这里就不讲了.下面直接将怎么设置session,取session: session相关代码一定要放在web.py框架的Main.py里面. # Main.py # 设置ses ...

  10. (15)while循环

    循环结构 : while 循环结构的特点:减少代码的冗余,提高代码的效率注意:只要是循环一定要有判断条件退出循环,不然就成了死循环,程序会一直在内存执行,直到内存耗尽,暴毙..... 语法形式: wh ...