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在启动之后将自动将进程的当前目录改变为这个目录,因此如果设置文件中指定的文件或目录是 ...
随机推荐
- 团队软件的NABCD——星遇
日期:2019.4.17 博客期:053 星期三 我们项目是个面向希望有新奇体验的用户的社交软件,致力于打造不一样的有趣的社交. N:(Need,需求) 目前主流社交软件由于时间原因体量越来越大,各种 ...
- 链表详解（C语言）
链表是一种常见的基础数据结构,结构体指针在这里得到了充分的利用. 链表可以动态的进行存储分配,也就是说,链表是一个功能极为强大的数组,他可以在节点中定义多种数据类型,还可以根据需要随意增添,删除,插入 ...
- jQuery之cookie操作
Cookies 定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery.cookie.js基于jquery:先引入jquery,再引入:jq ...
- 饮冰三年-人工智能-Python-25 Django admin
简介:一个关于后台数据库管理的工具 1:创建一个新的项目 2:设置models,并通过命令生成数据库表 from django.db import models class Book(models.M ...
- js将某个值转换为String字符串类型或转换为Number数字类型
将某个值转换为String类型 1. value.toString() toString()方法返回一个表示该对象的字符串 var a = 123 a.toString() // '123' 2. & ...
- 运营-赵本山最近有点烦：二人转产业链滑铁卢 关联公司IPO预披露
http://news.cecb2b.com/info/20141117/2868962.shtml
- unity Camera第一人称移动,3中方法实现
using System.Collections; using System.Collections.Generic; using UnityEngine; public class Player : ...
- tomcat指定运行jdk
set JAVA_HOME=D:\Program Files\Java\jdk7\jdk1.7.0_51 set JRE_HOME=D:\Program Files\Java\jdk7\jre7路径根 ...
- Relativelayout和LinearLayout对比分析
分析之前先了解下View的绘制流程 首先view在windows中的布局样式如下图: view绘制在windows,windows与DecoverView的交互在VIewRoot中进行. view绘制 ...
- 展开被 SpringBoot 玩的日子 《 六 》 整合 Mybatis
上次整合了JPA ,但是很多人觉得JPA 并不是那么好用,这都是习惯问题,我本人也比较习惯Mybatis ,所以,今天就整合一下Mybatis,到网上找了一下关于spring boot和mybatis ...