<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

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

<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>

<script>

  var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];

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

  myChart.setOption({

    tooltip : {

      trigger: 'axis',

      axisPointer : {            // 坐标轴指示器，坐标轴触发有效

        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'

      }

    },

    legend: {

      data:['支出', '收入']

    },

    grid: {

      left: '3%',

      right: '4%',

      bottom: '3%',

      containLabel: true

    },

    xAxis : [

      {

        type : 'value',

        axisLabel:{

          formatter:function(value) {

            return Math.abs(value);

          }

        }

      }

    ],

    yAxis : [

      {

        type : 'category',

        axisTick : {show: false},

        data : ['周一','周二','周三','周四','周五','周六','周日']

      }

    ],

    series : [

      {

        name:'收入',

        type:'bar',

        stack: '总量',

        data:[320, 302, 341, 374, 390, 450, 420]

      },

      {

        name:'支出',

        type:'bar',

        stack: '总量',

        data:[-120, -132, -101, -134, -190, -230, -210]

      }

    ]

  });

</script>

</body>

</html>

　　

echarts 金字塔的更多相关文章

  1. echarts 应用数个样例

    应用一:环形图和饼图嵌套 先说明一下内部文件分布: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGV4dGJveQ==/font/5a6L5L2T/fo ...

  2. R语言学习笔记︱Echarts与R的可视化包——地区地图

    笔者寄语:感谢CDA DSC训练营周末上完课,常老师.曾柯老师加了小课,讲了echart与R结合的函数包recharts的一些基本用法.通过对比谢益辉老师GitHub的说明文档,曾柯老师极大地简化了一 ...

  3. ECharts学习总结（二）-----图表组件漏斗图(funnel)

    今天在学习ECharts时,想要在ECharts图表的原生态Demo中抠出漏斗图,却不知如何下手,经过一番研究,特总结如下: 首先我们需要这样做 1.拷贝出两个js文件:esl.js 和echarts ...

  4. 一起来玩echarts系列（一）------箱线图的分析与绘制

    一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...

  5. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  6. ASP.NET MVC5+EF6+EasyUI 后台管理系统（67）-MVC与ECharts

    系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...

  7. echarts+php+mysql 绘图实例

    最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...

  8. 数据图表插件Echarts（一）

    一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...

  9. Atitit.软件开发的三层结构isv金字塔模型

    Atitit.软件开发的三层结构isv金字塔模型 第一层,Implements 层,着重与功能的实现.. 第二次,spec层,理论层,设计规范,接口,等.流程.方法论 顶层,val层,价值观层,原则, ...

随机推荐

  1. Powershell 备忘

    如何修改环境变量 [environment]::SetEnvironmentvariable(“path”,"xxx","user") [environment ...

  2. FastJsonUtils工具类

    fastjson是由alibaba开源的一套json处理器.与其他json处理器(如Gson,Jackson等)和其他的Java对象序列化反序列化方式相比,有比较明显的性能优势. 版权声明:本文为博主 ...

  3. 地理位置编码geohash学习笔记

    1.geohash及其性质 一种空间索引技术. (1)将二维的经纬度位置数据转换为一维的字符串(基本上hash族的算法都是这样): 其优点在于hash编码后的字符串,可以方便查找和索引,从而减少相似计 ...

  4. mysql替换表中某字段的某值

    UPDATE  `cases`  SET  `case_desc` = replace(`case_desc`, 'src="//tuku-assets.m.jia.com/assets/i ...

  5. 集群环境（session多服务器共享的方案梳理）

    目前业界解决session共享的几种思路,我总结如下: 第一种办法:把原来存储在服务器磁盘上的session数据存储到客户端的cookie中去. 这样子,就不需要涉及到数据共享了.a客户端请求的时候, ...

  6. graph-bfs-八数码问题

    这个看起来是童年回忆:) 大体思路是,将每个排列状态看成图中的一个点,状态之间转换说明有边.然后用bfs,如果遍历完之后还是没有找到目标状态, 则说明是无解的,否则输出步数.具体想法写在代码里吧,多多 ...

  7. java模糊关键字查询

    通过前台页面上传到后台的查询条件和关键字去数据库中进行查询,先在数据库中写好sql语句,数据库利用的是LIKE这个关键词进行查询的,然后就是dao层service层的调用,这条语句返回的是一个user ...

  8. alex 推荐的书

     这两本书不错, 追风筝的人<白鹿原>~~~反天不错~~~可以看下.14:27:22AndyZhang 2018-1-29 14:27:22 改变人的东西  读书.看电影.旅行.经历各种事 ...

  9. 解决获取View的width和Height为0的4种方法

    很经常当我们动态创建某些View时,需要通过获取他们的width和height来确定别的view的布局,但是在onCreate()获取view的width和height会得到0.view.getWid ...

  10. luogu2394 yyy loves Chemistry I

    练习 #include <iostream> #include <cstdio> using namespace std; long double a; int main(){ ...