-
2022-01-19 09:53:28
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Echarts图表</title>
<!-- 引入echarts.min.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
color: ['#6199be', '#b66047', '#61b845', '#cf6aac'],
backgroundColor: '#000',
legend: {
bottom: 10,
textStyle: {
fontSize: 10,
color: 'rgba(255,255,255)'
},
data: ['厦门第一医院', '厦门中山医院', '厦门中医院', '厦门第五医院'],
//circle圆形,rect长方形,roundRect圆角长方形,triangle三角形,diamond菱形,pin不规则圆,arrow不规则三角形,none没有图标
// icon:'arrow'
},
tooltip: {
trigger: 'item',
formatter: '{a}<br/>{b}<br/>{c}人'
},
grid: {
left: 60,
right: 20,
top: 40,
bottom: 70
},
xAxis: [{
name: '',
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.2)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
axisLabel: {
color: "rgba(255,255,255)",
//文本数据倾斜
rotate: 30
},
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}],
yAxis: [{
type: 'value',
name: '',
min: 0,
max: 1500,
interval: 300,
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.5)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.01)'
}
},
axisLabel: {
formatter: '{value} 元',
color: '#fff'
}
}],
series: [{
name: '厦门第一医院',
type: 'line',
// 折线图变曲线图
smooth: true,
data: [0, 20, 40, 80, 300, 800, 700],
// 区域面积样式
areaStyle: {
color: '#6199be',
opacity: 0.3
}
},
{
name: '厦门中山医院',
type: 'line',
smooth: true,
data: [0, 250, 450, 750, 450, 30, 5],
areaStyle: {
color: '#b66047',
opacity: 0.3
}
},
{
name: '厦门中医院',
type: 'line',
smooth: true,
data: [1300, 1100, 600, 300, 100, 80, 20],
areaStyle: {
color: '#61b845',
opacity: 0.3
}
},
{
name: '厦门第五医院',
type: 'line',
smooth: true,
data: [310, 100, 80, 60, 40, 20, 10],
areaStyle: {
color: '#cf6aac',
opacity: 0.3
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>更多相关内容 -
Excel折线图面积图模板-添加平滑线的多彩柱形图
2020-11-24 20:11:37Excel折线图面积图模板-添加平滑线的多彩柱形图 -
R语言数据可视化_科学统计图表绘制2.2——平滑面积图
2020-08-20 22:08:12R语言数据可视化_科学统计图表绘制2.2——平滑面积图 接上回~ 客户提供了一组描述密度函数的数据，包括x轴的位置和该位置对应的概率密度，并要求绘制面积图。可问题是数据中的点的数量并不充足，如果按照正常的方式...展开全文R语言数据可视化_科学统计图表绘制2.2——平滑面积图
接上回~
客户提供了一组描述密度函数的数据，包括x轴的位置和该位置对应的概率密度，并要求绘制面积图。可问题是数据中的点的数量并不充足，如果按照正常的方式绘制，曲线、面积不平滑，非常难看。而经过平滑的图像就相对有观赏性一些。
平滑面积图如何绘制？
首先，数据是标准正态分布下区间[-5,5]内的20个等距点x = seq(from=-5,to=5,length.out = 20) y = dnorm(x,mean = 0,sd=1) data = data.frame(x=x,y=y)这组数据如果直接投入ggplot中绘制，便会出现如图一所示的不平滑的面积图。
之所以会出现锯齿、不平滑的现象，说到底是因为数据点过少。我们通过对数据进行loess局部回归后，添加足够多的数据点进行绘制，便会生成平滑曲线。
the_theme = theme_bw()+ theme( legend.position = c(0.2,0.75), legend.text = element_text(size = 11), panel.border = element_blank(), panel.grid.major = element_blank(), panel.grid.minor = element_blank(), axis.ticks.x = element_blank()) #首先建立一个主题 #删除了一些乱七八糟的线，还有背景 #仔细看就会发现，这其实是上篇文章的代码copy过来的 (ಡωಡ) new_x = seq(from=-5,to=5,length.out = 2000) new_y = predict(loess(y~x,data = data,span = 0.2,degree = 2),new_x) #参数span控制平滑系数，区间0~1 new_data = data.frame(x=new_x,y=new_y) ggplot(new_data,aes(x=x,y=y))+ geom_line()+ geom_area()
因为是功能演示图，所以这次就不精修啦~有哪里不懂的小伙伴可以私信或评论，另外本人也提供一些科学图表的有偿绘制服务哦~
价格实惠呢亲！
-
vue引用echarts折线平滑面积图
2019-07-17 15:44:55vue中安装 echarts 不会用的有入门篇介绍文章：https://blog.csdn.net/qq_42221334/article/details/95354424 主要代码： <template> <div> <div class="cardList_title">...d...展开全文
vue中安装 echarts 不会用的有入门篇介绍文章： https://blog.csdn.net/qq_42221334/article/details/95354424
主要代码：
<template> <div> <div class="cardList_title">用户活跃度</div> <div class="Chart_one" id="myChartCurve"></div> </div> </template> <script> export default { data() { return {} }, mounted() { this.drawLine(); }, methods: { drawLine(){ //================== 用户活跃度========================= let myChartCurve = this.$echarts.init(document.getElementById('myChartCurve')) myChartCurve.setOption({ color: ["#fcc550",'#4fd7fd'], tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { data:['普通用户','租户用户'], textStyle: { fontSize: '12', color:'#fff' } }, xAxis: { type: 'category', boundaryGap: false, data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12'], axisLabel: { textStyle: { fontSize: '12', color:'#fff' } }, }, yAxis: { type: 'value', axisLabel: { textStyle: { fontSize: '12', color:'#fff' } }, }, series: [{ name:'普通用户', smooth:true, data: [0, 180, 400, 300, 130, 150, 400,200,100,300,200,100], type: 'line', areaStyle: {} }, { name:'租户用户', smooth:true, data: [0, 150, 350, 200, 400, 500, 280,180,150,300,200,0], type: 'line', areaStyle: {} } ] }); } } }, </script>更多echarts官方实例请看：https://gallery.echartsjs.com/explore.html#sort=createTime~timeframe=all~author=all
更多技巧请查看vue专栏 https://blog.csdn.net/qq_42221334/column/info/27230/1
-
Echarts，每日一图——(平滑)折线面积图
2020-12-09 11:13:36昨天跟大家讲了平滑折线图，今天跟大家讲一下折线面积图。有平滑折线面积图和基础折线面积图两种效果： 其实二者只有一点点差别，接下来我们看下代码： //data.js mydata( { "data":[1,2,3,4,5], "zhi":[12,13,...展开全文昨天跟大家讲了平滑折线图，今天跟大家讲一下折线面积图。有平滑折线面积图和基础折线面积图两种效果：
其实二者只有一点点差别，接下来我们看下代码：//data.js mydata( { "data":[1,2,3,4,5], "zhi":[12,13,14,20,16] } )<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../../js/echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height: 300px;"></div> <script type="text/javascript"> var mydata=function(data){ var mycharts=echarts.init(document.getElementById("main")); var option={ title:{ text:'测试' }, tooltip:{}, legend:{ data:['test'] }, xAxis:{ type:'category', //坐标轴类型：类目轴 boundaryGap:false, //1.基础面积图 ：类目轴中：留白区域，与左边坐标轴和右边图的边缘之间是否有留白。默认true data:data.data }, yAxis:{ type:'value' //坐标轴类型：数值轴 }, series:[{ name:'test', type:'line', data:data.zhi, smooth:true, //平滑曲线图。值可为数字 areaStyle:{ //2.基础面积图。区域填充样式 color:'#ccc' //支持RGB、ALPHA通道+RGBA、十六进制、渐变色、纹理填充 } }] }; mycharts.setOption(option); } </script> <script src="data.js"></script> </body> </html>这个是平滑折线面积图的代码，学过上节课的同学应该了解到，平滑效果是通过series配置项里面的smooth:true属性来控制的，想要基础折线面积的同学可以把smooth:ture注释掉。
然后我们来说一下面积图的实现，从代码上看，面积图是通过series配置项中的areaStyle属性来实现的。
- areaStyle：区域填充样式。
- color：填充的颜色。
颜色可以使用 RGB 表示，比如 ‘rgb(128, 128, 128)’，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 ‘rgba(128, 128, 128, 0.5)’，也可以使用十六进制格式，比如 ‘#ccc’。除了纯色之外颜色也支持渐变色和纹理填充。
areaStyle还有其他属性，想了解的同学可以看一下官方文档：https://echarts.apache.org/zh/option.html#series-line.areaStyle
- color：填充的颜色。
另外，xAxis配置项中有一个boundaryGap属性，它指的是坐标轴两边的留白策略，默认是true，如果不需要留白的话，这里需要设置一下false。
下面给大家分别看一下留白和不留白的效果。留白，即boundaryGap:true的效果图：
不留白，即boundaryGap:false的效果图：
源代码小编已经上传，详见：https://download.csdn.net/download/four_three/13452924
欢迎大家加入小编的学习课堂，希望此文章能够帮助到你，谢谢~
- areaStyle：区域填充样式。
-
Excel折线图面积图模板-Excel图表模板-漂亮折线图
2020-11-24 20:10:24Excel折线图面积图模板-Excel图表模板-漂亮折线图 -
Excel图表—可攻可辅的面积图
2019-08-17 23:16:55说到要比较趋势，一般用折线图或者条形图比较多，面积图其实用得较少，但是折线图不太好比较绝对差异，条形图又很难进行太长周期的比较，这时面积图就凸显了它的优势，完全弥补了折线图和条形图的劣势。 除此之外，... -
R语言数据可视化_科学统计图表绘制2.1——面积图
2020-08-19 23:03:20R语言数据可视化_科学统计图表绘制2.1——面积图 面积图介绍 提起面积图，就不得不说他与折线图各自适用情况。 首先，如果只有一个要展示的元素，那么最好使用折线图，因为折线图可以清晰的查看元素的涨跌走势。 ... -
echarts设置面积图面积区域渐变与echarts折线图线条设置为虚线
2020-12-29 06:47:131. echarts 设置面积图面积区域渐变.var colorArr = ['#a6b5ff', '#a6b5ff', '#9692ff', '#33cef2'],var option = {color：colorArr, //设置线条颜色series: [{name: '邮件营销',type: 'line',stack: '总量',... -
image_measurement:包括图像平滑，图像增强，图像边缘检测，图像阈值化，图像细化，面积测量，面积边界提取...
2021-05-16 23:04:16USTC中的五个图像测量实验，包括图像平滑，图像增强，图像边缘检测，图像阈值化，图像细化，面积测量，面积边界提取和周长计算。 实验1图像平滑和图像增强 实验包括图像平滑和图像增强。 利用空间邻域平均，中值滤波... -
echart曲面积图
2021-09-19 14:27:361引入 2.使用折线图 3成散点图 4去掉xy轴 5面积颜色 6平滑曲线 7 -
Steamgraph:在堆积面积图上绘制审美变化的功能-matlab开发
2021-05-30 11:47:48绘制 Steamgraph 的函数（平滑、以 y 为中心、堆积面积图），详见 Byron 和 Wattenburg，2008 年。 -
excel 折线图和面积图拼接
2020-02-06 12:01:25描述：每个柱形图上面是一年内销售的走向的折线图 原始数据： Step1：10种产品的一年数据列到一列中： 1、写上“=C2” 2、向右拖动 3、向下拖动直到出现很多0 4、选中一列 删除所有的 0 5、完成 Step2 绘图 1、... -
vue渐变堆叠面积图设置渐变色 - echart图表
2021-09-14 09:39:04如图所示： 代码如下： <template> <div class="ml20 mr20 mb20 colorFOp"> <div class="head tc mb20 ">测试案例</div> <div ref="test" class="testChart"></div> </... -
【Pyecharts50例】面积图实现/折线图填充区域
2021-03-07 12:33:52面积图其实就是想折线图下方区域进行填充，在Pyecharts中本身没有面积图，要实现面积图效果只需要将Line图进行区域填充即可： 添加如下代码即可，opacity设置区域透明度，设置一个大于0的值即可实现填充效果，1表示... -
图像增强（空域滤波）——图像平滑
2022-03-06 23:55:58平滑处理 -
图像的平滑处理
2021-02-09 11:16:55在尽量保留图像原有信息的基础上，过滤掉图像的内部噪声，这一过程称为对图像的平滑处理，它会将图像周围像素值差异较大的值调整为周围像素的...然后使用该方法遍历图像内的每一个像素点，即可完成整幅图的均值滤波。 -
12、OpenCV平滑（模糊）图像
2021-01-22 10:03:23OpenCV平滑（模糊）图像一、学习目标二、平滑理论介绍三、学习四种不同的滤波器四、完整使用实例 一、学习目标 了解什么是图像的平滑（模糊） 学会使用均值模糊、高斯模糊、双边模糊、中值模糊等处理图像 动手练习... -
指数平滑一参数模型的适度面积的鲁棒估计-研究论文
2021-05-20 17:24:12考虑了用于组织和技术系统指标的预测估计的指数平滑预测一参数模型的参数综合问题。 为了在内部参数的允许值范围内选择给定质量的时间间隔，选择了多个预测的绝对误差准则。 它允许形成具有“软”约束的分析回顾模型... -
OpenCV——图像平滑
2019-06-15 20:39:59每一幅图像都包含某种程度的噪声，噪声可以理解为由一种或者多种原因造成的灰度值的随机变化，如由光子通量的随机性造成的噪声等，在大多数情况下，通过平滑技 术（也常称为滤波技术）进行抑制或者去除，其中具备... -
【Pyecharts|Line】堆叠渐变面积图实现
2021-02-18 20:05:17来自Echarts官方的一个示例【渐变堆叠面积图】，通过Pyecharts实现一下~ 原作品链接➡️https://echarts.apache.org/examples/zh/editor.html?c=area-stack-gradien 关键代码 堆叠面积图实现 实现堆叠效果，... -
图像的面积计算
2019-01-03 10:06:20matlab的面积计算实例。通过对于图像的预处理包括二值化，灰度化，膨胀腐蚀，平滑处理等手段，得到一个比较完整的闭合图形，然后通过bwarea函数进行面积计算 -
ECharts折线/面积图属性大全
2020-12-19 21:13:08series[i]-line 用于表示 ECharts 图表中的折线/面积图，折线/面积图是用折线将各个数据点标志连接起来的图表，可以用于展现数据的变化趋势，在 ECharts 直角坐标系和极坐标系上的使用较为广泛。ECharts 折线/面积图... -
图像平滑处理---OpenCV-Python开发指南（17）
2021-02-14 17:49:15目录什么是图像平滑处理均值滤波方框滤波高斯滤波中值滤波双边滤波2D卷积 什么是图像平滑处理 在尽量保留图像原有信息的情况下，过滤掉图像内部的噪声，这一过程我们称之为图像的平滑处理，所得到的图像称为平滑图像... -
OpenCV - 图像平滑（Python实现）
2019-06-03 19:37:51中值滤波法是一种非线性平滑技术，它将每一像素点的灰度值设置为该点某邻域窗口内的所有像素点灰度值的中值。 cv2.medianBlur(src, ksize[, dst]) -> dst 参数 释义 src 参数表示待处理的... -
opengl 利用高斯模糊（Gaussian blur/高斯滤波）对tof深度图像进行图像平滑处理
2021-02-24 15:20:01需要对华为AR Engine获取得到的深度图进行处理，AR Engine获取得到的深度图就是直接利用tof获取得到的深度图，都没有进行优化过，这里要吐槽一下AR Engine，人家友商arcore获取得到深度图就非常的平滑。 一种简单的... -
OpenCV--Python 图像平滑之高斯平滑、均值平滑
2018-09-22 23:37:031.高斯平滑 （1）高斯卷积核的构建 假设构造宽（列数）为、高（行数）为的高斯卷积算子，其中和均为奇数，锚点的位置在，步骤如下： 第一步：计算高斯矩阵。 其中 r，c代表位置索引，其中，，且r，c均为... -
通信原理课设：基于matlab实现图像平滑处理
2021-01-04 10:55:15利用MATLAB仿真软件实现图像的平滑处理 一 数据采集 1.1原理分析 1.2项目代码 二 图像的加噪处理 2.1加入高斯噪声 2.1.1 原理分析 三 图像的去噪原理 3.1典型的去噪算法分析 3.2 均值滤波 3.3 中值滤波 四 实验... -
google earth engine随缘学习（五）关于删除斑块平滑图像
2018-12-19 22:52:59今天整理一波GEE关于平滑图像的代码 之前做填海造陆制图中，就要去除一些陆地里的水系，于是用了connectedPixelCount方法消除了小水体 今天整理学习了一下大神写的别的方法： 传送门———...
