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层,价值观层,原则, ...
随机推荐
- 【Python学习之五】高级特性5（切片、迭代、列表生成器、生成器、迭代器）
5.迭代器 由之前的生成器可知,for循环用于可迭代对象:Iterable.包括集合数据类型: list.tuple.dict.set.str 等,以及两种生成器.判断迭代器,使用 isinstanc ...
- 《Java并发编程实战》读书笔记一 -- 简介
<Java并发编程实战>读书笔记一 -- 简介 并发的历史 并发的历史,也是人类利用有限的资源去提高生产效率的一个的例子. 设想现在有台计算机,这台计算机具有以下的资源: 单核CPU一个 ...
- Python基础——模块与包
在Python中,可以用import导入需要的模块.包.库.文件等. 把工作路径导入系统路径 import os#os是工作台 import sys#sys是系统 sys.path.append(os ...
- Python学习笔记： 闭包
闭包的基本定义 在计算机科学中,闭包(英语:Closure),又称词法闭包(Lexical Closure)或函数闭包(function closures),是引用了自由变量的函数.这个被引用的自由变 ...
- 水题：UVa489-Hangman Judge
Hangman Judge Time limit 3000 ms Description In Hangman Judge, you are to write a program that judge ...
- day01_12.字符串
1.字符转义 在字符串中,出现一些比较特殊的字符,容易引起歧义 我们需要转义这些引起歧义的字符串 <?php $a = 'ab\\c'; //转义字符2个 \' \\ $b = 'ab\'c'; ...
- 【JavaScript】关于 setInterval() 调用函数方法的一次实验
实验主题: setInterval() 方法是 JS 中比较常用的一个方法.setInterval() 方法可以按照指定的周期 ( 毫秒 ) 来调用函数方法或计算表达式. setInterval() ...
- mybatis分页方式对比
mybatis有两种分页方法(转自:http://blog.csdn.net/leozhou13/article/details/50394242) 1.内存分页,也就是假分页.本质是查出所有的数据然 ...
- python学习笔记--python编程基础
一.一个隆重的仪式 我们在学习语言的时候,第一个写的程序肯定都是hello world.来写第一个程序吧,其实很简单,python的语法就是简单.优雅,一个print就搞定. 1 print('hel ...
- 【Luogu】P2634聪聪可可（树形DP）
题目链接 水题,时限放得非常宽,暴力DP随便套上一波register就能卡过去. 唯一的遗憾是5A. 树形DP,s[i][j]表示以i为根的子树里距i的距离%3=j的点数,f[i]表示i为根的子树内一 ...