<!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. 如何解决js跨域问题

    Js跨域问题是web开发人员最常碰到的一个问题之一.所谓js跨域问题,是指在一个域下的页面中通过js访问另一个不同域下的数据对象,出于安全性考 虑,几乎所有浏览器都不允许这种跨域访问,这就导致在一些a ...

  2. rs485多主

    因复位时I/O口都输出高电平.如果把I/O口直接与RS-485接口芯片的驱动器使能端DE端相连,会在CPU复位其间DE为高,从而使本节点处于发送状态.如果此时总线上其它节点在发送数据,则此次数据传输将 ...

  3. 字符串-POJ3974-Palindrome

    Palindrome Time Limit: 15000MS Memory Limit: 65536K Description Andy the smart computer science stud ...

  4. ACM-ICPC 2018 徐州赛区网络预赛 H. Ryuji doesn't want to study

    262144K   Ryuji is not a good student, and he doesn't want to study. But there are n books he should ...

  5. 笔记-python-*号解包

    笔记-python-*号解包 在码代码时发现*号可以这样使用: str = ["abcd", "abce", "abcf"]st = &qu ...

  6. Linux学习-什么是 daemon 与服务 (service)

    『常驻在记体体中的程序,且可以提供 一些系统或网络功能,那就是服务』.而服务一般的英文说法是『 service 』. 那么 daemon 与 service 有关啰?否则为什么都能够提供 某些系统或网 ...

  7. fhqtreap - Luogu 2464 [SDOI2008]郁闷的小J

    [SDOI2008]郁闷的小JJ 题目描述 小J是国家图书馆的一位图书管理员,他的工作是管理一个巨大的书架.虽然他很能吃苦耐劳,但是由于这个书架十分巨大,所以他的工作效率总是很低,以致他面临着被解雇的 ...

  8. 大数据学习——kettle的简单使用

    1 生成随机数保存到本地文件 新建转换--输入--生成随机数--输出--文本文件输出--保存到本地文件 2 在线预览生成结果 3 字段选择 4 增加常量 5 生成多条数据 右键生成随机数--改变开始复 ...

  9. redis安装、配置和启动

    一.运行环境 1.vmware虚拟机上的centos7系统,安装步骤略,网上搜搜就有,连接工具:secureCRT 2.新安装的linux,是没有wget命令,所以先执行这个命令安装下:yum -y ...

  10. TensorFlow开发流程 Windows下PyCharm开发+Linux服务器运行的解决方案

    不知道是否有许多童鞋像我一样,刚开始接触TensorFlow或者其他的深度学习框架,一时间有一种手足无措的感觉. 怎么写代码?本机和服务器的关系是啥?需要在本机提前运行吗?怎么保证写的代码是对的??? ...