echarts 金字塔
<!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 金字塔的更多相关文章
- echarts 应用数个样例
应用一:环形图和饼图嵌套 先说明一下内部文件分布: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGV4dGJveQ==/font/5a6L5L2T/fo ...
- R语言学习笔记︱Echarts与R的可视化包——地区地图
笔者寄语:感谢CDA DSC训练营周末上完课,常老师.曾柯老师加了小课,讲了echart与R结合的函数包recharts的一些基本用法.通过对比谢益辉老师GitHub的说明文档,曾柯老师极大地简化了一 ...
- ECharts学习总结（二）-----图表组件漏斗图(funnel)
今天在学习ECharts时,想要在ECharts图表的原生态Demo中抠出漏斗图,却不知如何下手,经过一番研究,特总结如下: 首先我们需要这样做 1.拷贝出两个js文件:esl.js 和echarts ...
- 一起来玩echarts系列（一）------箱线图的分析与绘制
一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（67）-MVC与ECharts
系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- echarts+php+mysql 绘图实例
最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...
- 数据图表插件Echarts（一）
一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...
- Atitit.软件开发的三层结构isv金字塔模型
Atitit.软件开发的三层结构isv金字塔模型 第一层,Implements 层,着重与功能的实现.. 第二次,spec层,理论层,设计规范,接口,等.流程.方法论 顶层,val层,价值观层,原则, ...
随机推荐
- [图文] Fedora 28 使用 Virt-Manager 创建 KVM 虚拟机以及 配置 KVM 虚拟机
实验说明: 往后的许多实验都将以Linux平台下的 KVM虚拟机为主,所以不可少的就是 Virt-Manager 虚拟机管理器. 本章将对如何安装和使用Virt-Manager管理器进行讲解,并且会对 ...
- python 爬取知乎图片
先上完整代码 import requests import time import datetime import os import json import uuid from pyquery im ...
- 【php】expose_php 作用
php.ini expose_php = On expose_php = Off
- 使用Github第一节
学习Github 1.目的: 借助github托管代码 2.基本概念(1): 仓库(Repository) 仓库用来存放项目代码,每个项目对应一个仓库,多个项目则对应多个仓库 收藏(Start) 收藏 ...
- 分享一个编程学习网站:https://github.com/justjavac/free-programming-books-zh_CN
分享一个编程学习网站:https://github.com/justjavac/free-programming-books-zh_CN
- 水题：UVa489-Hangman Judge
Hangman Judge Time limit 3000 ms Description In Hangman Judge, you are to write a program that judge ...
- nova虚拟机镜像从创建到文件系统resize完整流程
1. 虚拟机镜像的创建和resize流程 nova创建虚拟机涉及的组件比较多,调用比较复杂,这里只列出跟虚拟机镜像创建相关的流程,方便理清虚拟机状态变化的整个流程. nova-api nova.api ...
- 离线安装eclipse maven插件
最近用到maven,所以按照官网http://www.eclipse.org/m2e/的教程http://download.eclipse.org/technology/m2e/releases/,在 ...
- 有限状态机（FSM）的设计与实现
有限状态机(FSM)是表示有限个状态及在这些状态之间的转移和动作等行为的数学模型,在计算机领域有着广泛的应用.通常FSM包含几个要素:状态的管理.状态的监控.状态的触发.状态触发后引发的动作.本文主要 ...
- python 学习分享-字典篇
python字典(Dictionary) dict是无序的 key必须是唯一切不可变的 a={'key1':'value1','key2':'value2'} 字典的增删改查 a['key3']='v ...