Echarts 几个常用图
最近公司业务上的 需求，要求做一些图表，我们技术框架上选择方便使用的Echarts.
下面是效果图：
下面是具体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>折柱混合</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>
<div id="main3" style="width: 600px;height:400px;"></div>
<div id="main4" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var myChart2 = echarts.init(document.getElementById('main2'));
var myChart3 = echarts.init(document.getElementById('main3'));
var myChart4 = echarts.init(document.getElementById('main4')); //app.title = '折柱混合'; option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:['蒸发量','降水量','平均温度']
},
xAxis: [
{
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '水量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name:'平均温度',
type:'line',
yAxisIndex: 1,
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
option2 = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
option3 = {
title: {
text: '未来一周气温变化',
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name:'最高气温',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name:'最低气温',
type:'line',
data:[1, 2, 2, '', 3, 2, ],
markPoint: {
data: [
{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '最大值'
}
},
type: 'max',
name: '最高点'
}]
]
}
}
]
};
option4 = {
tooltip:{
show:false
},
legend: {
data: ['1', '常规','1','自适应节能','1'], },
color:[ 'transparent', '#bda29a','transparent', '#546570', 'transparent'],
grid: {
height:50
},
xAxis: {
type: 'value',
min: 0,
max: 24,
maxInterval: 1,
splitLine:{
show:false
}, },
yAxis: {
type: 'category',
data: [''], },
series: [
{
name: '',
type: 'bar',
stack: '总量',
label: {
normal: {
show: false,
}
},
data: [1.5]
},
{
name: '常规',
type: 'bar',
stack: '总量',
label: {
normal: {
show: false,
//show: true, }
},
data: [7.5]
},
{
name: '',
type: 'bar',
stack: '总量',
label: {
normal: {
show: false,
//show: true, }
},
data: [4.6]
},
{
name: '自适应节能',
type: 'bar',
stack: '总量',
label: {
normal: {
show: false,
//show: true, }
},
data: [6.4]
},
{
name: '',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true, }
},
data: [2]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart2.setOption(option2);
myChart3.setOption(option3);
myChart4.setOption(option4); </script>
</body>
</html>
Echarts 几个常用图的更多相关文章
- ECharts系列:玩转ECharts之常用图（折线、柱状、饼状、散点、关系、树）
一.背景 最近产品叫我做一些集团系列的统计图,包括集团组织.协作.销售.采购等方面的.作为一名后端程序员,于是趁此机会来研究研究这个库. 如果你仅仅停留在用的层面,那还是蛮简单的. 二.介绍 ECha ...
- UML常用图
序列图 活动图
- UML常用图的几种关系的总结
在UML的 类图中,常见的有以下几种关系: 泛化(Generalization), 实现(Realization), 关联(Association), 聚合(Aggregation), 组合(Com ...
- (转)UML常用图的几种关系的总结
在UML的类图中,常见的有以下几种关系: 泛化(Generalization), 实现(Realization), 关联(Association), 聚合(Aggregation), 组合(Comp ...
- Enterprise Architect与startUML表示UML常用图
转自:http://www.cnblogs.com/alexlee73/archive/2011/11/05/2237294.html 附下载地址:http://download.csdn.net/d ...
- iOS 常用图尺寸 汇总
iCON 准备一张1024x1024尺寸的图,打开链接 http://www.atool.org/ios_logo.php 在线批量生成各种尺寸的图片 启动图LaunchImage 640x960 2 ...
- python数据分析常用图大集合
目录 一.折线图 二.直方图 三.垂直条形图 四.水平条形图 五.饼图 六.箱线图 七.热力图 八.散点图 九.蜘蛛图 十.二元变量分布 十一.面积图 十二.六边形图 以下默认所有的操作都先导入了Nu ...
- Python数据分析入门（十四）：数据分析中常用图
折线图: 折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化,它的特点是反映事物随时间或有序类别而变化的趋势.示例图如下: 折线图应用场景: 折线图适合X轴是一个连续递增或递减的,对于没有规律 ...
- Apache 的 httpd.conf 详解
ServerRoot “/usr/local“ ServerRoot用于指定守护进程httpd的运行目录,httpd在启动之后将自动将进程的当前目录改变为这个目录,因此如果设置文件中指定的文件或目录是 ...
随机推荐
- FHQ-Treap小结
\(Orz\) 范浩强大爷,竟然搞出了如此夺天地造化的数据结构. \(FHQ-Treap\),又名非旋\(Treap\),是范浩强大爷在某些奇特的灵感之下发明的一种平衡树,因其与\(Treap\)相似 ...
- 处理H5新标签方法
语义化 HTML5中加入了更加具有语义化的标签,比如header,nav,footer等,可以为搜索引擎优化,让爬虫能更好地理解网页结构. 但是对于新标签的兼容性不是很好,IE9以下旧版本不支持新的语 ...
- UiAutomator2.0 - 与AccessibilityService的关联
目录 一.Android中的 Accessibility 二.UiAutomator2.0 与 AccessibilityService 三.验证与 AccessibilityService的关联 A ...
- Ubuntu 18.04 安装MySQL
最近在写东西的时候,需要用到MySQL,在网上查了一下,都说Ubuntu18.04不能安装MySQL5.7.22, 总觉的不可能,所以自己就研究了一下,然后分享给大家 工具/原料 VMware W ...
- windows使用pyecharts报错 No module named 'pyecharts_snapshot
下载此文件后,使用命令 pip install pyecharts_snapshot-0.1.8-py2.py3-none-any.whl 安装完成即可 链接地址:https://pypi.org/p ...
- php curl Problem with the SSL CA cert (path? access rights?)
公司有台老服务器,搭的php的环境,有个负载均横的服务 调用 curl_init 的时候报了 Problem with the SSL CA cert (path? access rights?) 网 ...
- kityminder-editor + MongoDB 思维导图数据自动实时保存方案
最近开始做自己的第一个开源项目:一个基于思维导图的测试用例管理系统MinderCase,在做了一周的技术调研后,决定采用kityminder-editor作为思维导图编辑器,为了支持实时存储,当思维导 ...
- 常见SMTP发送失败原因列表
SmtpException:无法读取从传输连接数据:net_io_connectionclosed(SmtpException: Unable to read data from the transp ...
- .net core 2.x - docker(for windows)-linux配置及项目+SqlServer发布
将.net core2.x+sqlserver项目发布到docker.呵呵,操作很自如,如下. 1.罗嗦几句 在跑起来之前浪费了不少时间和精力,起初是将docker for windows的环境转换成 ...
- James Munkres《拓扑学》笔记前言
许久以前,我读到了侯捷先生于<深入浅出MFC>一书中所写的“勿在浮砂筑高台”这句话,颇受警醒与启发.如今在工科领域已摸索多年,亦逐渐真切而深刻地认识到,若没有坚实.完整.细致的数学理论作为 ...