<!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. H5（一）H5与HTML、XHTML的不同

    一.基本概念 html:超文本标记语言 (Hyper Text Markup Language) xhtml:可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTML)类似,不过语法上 ...

  2. Ajax原生代码

    Ajax传数据有两种方式:get/post.下面是前台的get/post方式的代码. //------------原生--------- function AjaxGET(){ //第一步 调用Aja ...

  3. Python中的字典与集合

    今天我们来讲一讲python中的字典与集合 Dictionary:字典 Set:集合 字典的语法: Dictionary字典(键值对) 语法: dictionary = {key:value,key: ...

  4. list_add_tail()双向链表实现分析

    struct list_head { struct list_head *next, *prev; }; list_add_tail(&buf->vb.queue, &vid-& ...

  5. 迷宫问题&MakeFile

    先看一个有意思的问题, 我们定义一个二维数组表示迷宫. 它表示一个迷宫, 其中的1表示墙壁,0表示可以走的路, 只能横着走或竖着走,不能斜着走, 我们要编程序找出从左上角到右下角的路线.其实这个问题可 ...

  6. 如何解决自定义404页面在IE等浏览器中无法显示问题

    网站设置自定义404页面之后(如何在IIS下正确设置404页面?),如无法在浏览器中正常显示,可能是以下原因: 1.404页面文件权限设置错误 我们需要为404页面文件添加上用户everyone的可读 ...

  7. web安全测试---WebScarab工具介绍

    1.1      Webscarab [功能] WebScarab是一个用来分析使用HTTP和HTTPS协议的应用程序框架.其原理很简单,WebScarab可以记录它检测到的会话内容(请求和应答),并 ...

  8. python基础补漏-07-正则表达式

    字符: .    匹配除了换行符以外的任意字符 \w  匹配字母或者数字或下划线或汉字(除了特殊字符外都能匹配) \s   匹配任意空白符 \d 匹配数字 \b 匹配单词的开始或者结束 ^ 匹配字符串 ...

  9. Leetcode 452.用最少数量的箭引爆气球

    用最少数量的箭引爆气球 在二维空间中有许多球形的气球.对于每个气球,提供的输入是水平方向上,气球直径的开始和结束坐标.由于它是水平的,所以y坐标并不重要,因此只要知道开始和结束的x坐标就足够了.开始坐 ...

  10. DefaultTransactionStatus源码

    package org.springframework.transaction.support; import org.springframework.transaction.NestedTransa ...