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在启动之后将自动将进程的当前目录改变为这个目录,因此如果设置文件中指定的文件或目录是 ...
随机推荐
- Ubuntu 14.04 升级 nginx/1.8.1
参考文档:https://segmentfault.com/a/1190000008116875 https://www.ilanni.com/?p=11788 先停止nginx服务 service ...
- The Quad - Directory Explorer（一款四窗口的文件资源管理器）
官网:http://www.q-dir.com/ 参考这位兄弟的介绍:https://www.cnblogs.com/clso/p/4694486.html 一款四窗口的文件资源管理器.
- Ubuntu 开启远程登录 SSH 的安装和配置
SSH 为 SecureShell 的缩写,由 IETF 的网络工作小组(NetworkWorkingGroup)所制定:SSH 是一种安全协议,主要用于给远程登录会话数据进行加密,保证数据传输的安全 ...
- ZJOI2019Day2 游记
原文链接www.cnblogs.com/zhouzhendong/p/ZJOI2019Day2 游记 4-23 乘车. 报到. 自闭. 晚上没睡好. 4-24 上午张哲宇讲课. 幕后点人上去讲题. 然 ...
- vue-cli3.0使用及配置
1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了) 这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是 ...
- 2019 蓝桥杯省赛 A 组模拟赛（一）-忽明忽暗
走廊里有 nn 盏灯,编号依次为 1,2,3,...,n,由学校电路控制中心管理.初始时,所有灯都是关闭的.某黑客入侵了学校电路控制中心,黑客想让灯忽明忽暗,进行了 n 轮操作.第 i 轮操作,会让所 ...
- python3_list
name = ['like','new','book',['fa','fdsa'],'new','book','why']#这是个列表 print(name)#把列表打印出来 查 print(name ...
- Kali安装Docker
---恢复内容开始--- 第一周 计划安装好docker 准备 审计thinkphp 框架 先把docker 安装的笔记补上 本来是在unbuntu 安装了一遍 并run 了几个镜像和基本操作 ...
- linux 使用技巧 screen 管理你的远程桌面的会话创建和使用
下面介绍 screen 使用的技巧教你管理远程会话 你是不是经常需要 SSH 或者 telent 远程登录到 Linux 服务器?你是不是经常为一些长时间运行的任务而头疼,比如系统备份. ftp 传 ...
- kali安装vm tools
kali安装完毕后第一件事便是安装VMtools,tools能让kali和物理机进行交互,复制粘贴功能等. 在屏幕上会弹出一个光驱,点击进去,进入文件夹 将文件复制到home文件夹下. 1 tar z ...