<!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. STA basic

  2. 实验二 JSP基本动态元素的使用

    实验二  JSP基本动态元素的使用 实验性质:验证性          实验学时:  2学时      实验地点: 一 .实验目的与要求 1.掌握JSP中声明变量.定义方法.java程序片及表达式的使 ...

  3. Python中的可迭代对象，迭代器与生成器

    先来看一张概览图,关于容器(container).可迭代对象(Iterable).迭代器(iterator).生成器(generator). 一.容器(container) 容器就是一个用来存储多个元 ...

  4. guava笔记

    ​guava是在原先google-collection 的基础上发展过来的,是一个比较优秀的外部开源包,最近项目中使用的比较多,列举一些点.刚刚接触就被guava吸引了... ​    ​这个是gua ...

  5. bootmem_init_node

    static unsigned long __init bootmem_init_node(int node, struct meminfo *mi) in arch/arm/mm/init.c 1. ...

  6. Solution: 最近公共祖先·一 [hiho一下 第十三周]

    题目1 : 最近公共祖先·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho最近发现了一个神奇的网站!虽然还不够像58同城那样神奇,但这个网站仍然让小Ho乐在其中 ...

  7. holtek编程注意事项

    1.holtek单片机中断服务函数中函数调用里的参数不能传递地址,不然程序就会跑飞 2.holtek单片机尽量不要函数嵌套很多层,嵌套过多,会导致单片机复位

  8. LinearLayout 滚动条

    比如文件列表, 显示不下,需要出滚动条:外面加一个scrollview 直接上代码: <?xml version="1.0" encoding="utf-8&quo ...

  9. 解决vue、cnpm造成的样式错位问题

    删除node_modules文件夹使用npm install不要使用cnpm install

  10. java面试题之Thread类中的start()和run()方法有什么区别

    start()方法被用来启动新创建的线程,而且start()内部调用了run()方法, 区别: 当你调用run()方法的时候,只会是在原来的线程中调用,没有新的线程启动: start()方法才会启动新 ...