一：先在官网下载

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. Vue页面手动刷新，导航栏激活项还原到初始状态问题解决方案

    场景描述:在页面中存在顶部导航和左侧导航,左侧导航和右侧内容区使用了命名视图实现,点击左侧导航的链接时,右侧内容区相应显示不同组件内容.问题:在当前链接手动刷新浏览器(例如:浏览器地址为/enterp ...

  2. Java 面向对象（六）接口

    一.接口 接口:是Java语言中一种引用类型,是方法的集合,如果说类的内部封装了成员变量.构造方法和成员方法,那么接口的内部主要就是封装了方法,包含抽象方法(JDK 7及以前),默认方法和静态方法(J ...

  3. Missing Push Notification Entitlement解决方法

    原委 最近提交APP到Apple Store审核,结果很快就收到Apple很"贴心"的邮件.原文如下: Dear developer, We have discovered one ...

  4. c#界面卡死处理方法

    方法一: 设置属性: Control.CheckForIllegalCrossThreadCalls = false; 开启一个新线程 Thread th = new Thread(() => ...

  5. leetcode-174. Dungeon Game 地下城游戏

    一道关于骑士救公主故事的题目. 一些恶魔抓住了公主(P)并将她关在了地下城的右下角.地下城是由 M x N 个房间组成的二维网格.我们英勇的骑士(K)最初被安置在左上角的房间里,他必须穿过地下城并通过 ...

  6. ajax _flask

    同步访问 当客户端向服务器发送请求时,服务器在处理过程中,浏览器只能等等,效率偏低 异步访问: 当客户端向服务器发送请求时,服务器在处理过程中,客户端可以做其他的操作,不需要一直等待,效率偏高 AJA ...

  7. adb使用时出现unanthorized问题

    adb使用时出现unanthorized问题 ADB 启动时,adb devices出现unanthorized问题. 检查USB调试是否开启. 重新拔插USB数据线是否有授权提示 重启adb :ad ...

  8. Insufficient space for shared memory file 解决办法

    Java HotSpot(TM) 64-Bit Server VM warning: Insufficient space for shared memory file:   /tmp/hsperfd ...

  9. SpringBoot LoggerFactory is not a Logback LoggerContext but Logback is on the classpath

    SpringBoot 在启动项目的时候一起错误: SLF4J: Class path contains multiple SLF4J bindings.SLF4J: Found binding in ...

  10. 0012SpringBoot访问首页

    有三种方式可以实现访问首页: 第一种: 定义一个Controller,定义请求方法和返回内容,方法内容如下: @RequestMapping({"/","/index&q ...