Echarts相关属性_echarts areastyle属性-程序员宅基地
技术标签： Echarts
实现一 ：自定义坐标轴 提示信息
option = {
// 当前列提示信息拼接 ：params.value[1]：当前点的y坐标值
tooltip: {
// 触发类型：坐标轴触发
show: true,
trigger: "axis",
backgroundColor: '#FDF5F6',
borderColor: '#FDF5F6',
position: [0, -40],
padding: 0,
margin: 0,
textStyle: {
color: "#F21612"
},
hideDelay: 0,
showDelay: 0,
alwaysShowContent: false,
transitionDuration: 0,
axisPointer: {
show: false,
type: 'line',
axis: 'x',
snap: true,
showContent: true,
label: {
backgroundColor: '#FDF5F6',
borderColor: '#FDF5F6',
borderWidth: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
textStyle: {
color: '#fff'
},
formatter: function(params, b) {
return params.value;
}
},
lineStyle: {
color: '#a9b2bb',
width: 1,
type: 'solid'
},
},
triggerOn: 'click|mousemove',
// extraCssText: 'width:100%;height:50px;background:#FDF5F6;',
// trigger: 'axis',
// backgroundColor: 'rgba(255,255,255,0.9)', // 通过设置rgba调节背景颜色与透明度
// borderColor: '#C5CCD1',
// textStyle: {
// color: '#8E989E'
// },
// hideDelay: '10',
formatter: '{b0}<div style="position: relative; padding-left: 12px; color:#EB1F10;"><i style="display:block; width:8px;height:8px;border-radius:10px;background:#EB1F10; position:absolute; top: 7px; left:0;"></i>{a0}: {c0}%</div><div style="position: relative; padding-left: 12px; color:#2B67E8;"><i style="display:block; width:8px;height:8px;border-radius:10px;background:#2B67E8; position:absolute; top: 7px; left:0;"></i>{a1}: {c1}%</div>',
color: '#8E989E',
borderWidth: '1',
// formatter: function (params) {
// params = params[0];
// var date = new Date(params.name);
// return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
// },
// axisPointer: {
// animation: false
// },
// extraCssText:'background:rgba(0, 0, 0, 0.5);'
},
grid: {
left:57,//margin-left
right:10,
top:24,
bottom:33
},
animation: false,//静态绘制echarts
xAxis: {
type: 'category',
z: 8,
boundaryGap: false,//边界间隙
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
//x轴样式修改
axisLine: {
show: true, //是否显示坐标轴轴线。
onZero: false,//设置坐标轴（x、y）不从0开始
lineStyle: {
color: "#e5e8ef"//坐标轴颜色
}
},
// x轴字体样式修改
axisLabel: {
show: true,
interval: 1,//每间隔1个一展示【中间空一个位置】展示信息
margin: 3,
textStyle: {
color: '#757E85', //x轴字体颜色
fontSize: 12
},
padding:[3,0,0,0],
fontFamily: 'DIN-Regular'
},
axisTick: {
show: false
},
},
yAxis: {
type: 'value',
scale: false,
min: -400,//最大值
max: 400,//最小值
type: 'value',
interval:200,//每间隔200个一展示【中间空200个位置】展示y轴信息
splitNumber:7,//y轴均分
z: 8,
axisLabel: {
inside: true,
align: 'left',
padding: [0, 0, 0, -55],
verticalAlign: 'middle',
fontFamily: 'DIN-Regular',
formatter: function (params) {
return params+'%';
},
rich: {
a: {
verticalAlign: 'bottom',
padding: [5, 0, 0, 0],
lineHeight: 10,
fontSize: 10,
z: 16
}
},
textStyle: { color: '#757E85', fontSize: 12 }
},
//控制横向网格线属性
splitLine: {
lineStyle: {
color: '#E5E9EF',
type: 'dashed',
width: 1
}
},
axisLine: { show: false, onZero: false },// 不显示坐标轴轴线
axisTick: { show: false },//不显示坐标轴刻度
alwaysShowContent: false
},
series: [{
name: "aaa的值",
type: 'line',
smooth: true, //是否平滑显示
symbol: 'circle',//每个小点点的样式风格
showSymbol: false,//默认不展示小点点 经过再显示
showAllSymbol: false,
z: 10,
symbolSize: 5,
data: [320, 332, 301, 334, 30, -30, -320],
silent: false,
itemStyle: {
normal: {
color: '#F21612',//轨迹线和小点点的颜色
borderColor: '#F21612',//小点点的边框颜色
}
},
lineStyle: {
normal: {
width: 1, //连线粗细
color: "#F21612", //轨迹线颜色
}
},
// 阴影区域
areaStyle: {
// 渐变颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(243, 78, 98, 0.8)'
}, {
offset: 1,
color: 'rgba(255, 255, 255, 0)'
}]),
// 常规设置
// normal: {
// opacity: 1,//阴影面积 0无 1全
// color: "#ddd",
// origin: "start"
// },
}
},{
name: "bbb的值",
type: 'line',
smooth: true, //是否平滑显示
symbol: 'circle',//每个小点点的样式风格
showSymbol: false,//默认不展示小点点 经过再显示
showAllSymbol: false,
z: 10,
symbolSize: 5,
data: [222, 111, -333, 234, -30, 100, 110],
silent: false,
itemStyle: {
normal: {
color: '#A9B2B8',//轨迹线和小点点的颜色
borderColor: '#A9B2B8',//小点点的边框颜色
}
},
lineStyle: {
normal: {
width: 1, //连线粗细
color: "#A9B2B8", //轨迹线颜色
}
},
// 阴影区域
areaStyle: {
// 渐变颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(169,178,184, 0.8)'
}, {
offset: 1,
color: 'rgba(255, 255, 255, 0)'
}]),
// 常规设置
// normal: {
// opacity: 0,//阴影面积 0无 1全
// color: "#ddd",
// origin: "start"
// },
}
}]
}
实现二：无坐标轴 提示信息等
option = {
grid: {
left:0,
right:10,
top:0,
bottom:0
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false
},
},
yAxis: {
type: 'value',
scale: false,
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
axisLine: { show: false, onZero: false },
axisTick: { show: false },
alwaysShowContent: false
},
series: [{
name: "aaa的值",
type: 'line',
smooth: true, //是否平滑显示
symbol: 'circle',//每个小点点的样式风格
showSymbol: false,//默认不展示小点点 经过再显示
showAllSymbol: false,
z: 10,
symbolSize: 5,
data: [320, 332, 301, 334, 30, -30, -320],
silent: false,
itemStyle: {
normal: {
color: '#F21612',//轨迹线和小点点的颜色
borderColor: '#F21612',//小点点的边框颜色
}
},
lineStyle: {
normal: {
width: 1, //连线粗细
color: "#F21612", //轨迹线颜色
}
},
// 阴影区域
areaStyle: {
// 渐变颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(243, 78, 98, 0.8)'
}, {
offset: 1,
color: 'rgba(255, 255, 255, 0)'
}]),
}
}]
}
阴影区域 不以x轴为边界 仅在曲线下展示 ：通过origin: "start"属性实现
option ={
grid: {
left:0,
right:10,
top:0,
bottom:0
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false
},
},
yAxis: {
type: 'value',
// scale: false,
// axisLabel: {
// show: false,
// },
splitLine: {
show: false,
},
axisLine: { show: false, onZero: false },
// axisTick: { show: false },
// alwaysShowContent: false
},
series: [{
name: "bbb的值",
type: 'line',
smooth: true, //是否平滑显示
symbol: 'circle',//每个小点点的样式风格
// showSymbol: false,//默认不展示小点点 经过再显示
showAllSymbol: false,
hoverAnimation:false,
z: 10,
symbolSize: 5,
data: [222, 111, -333, 234, -30, 100, 110],
// silent: false,
itemStyle: {
normal: {
color: '#A9B2B8',//轨迹线和小点点的颜色
borderColor: '#A9B2B8',//小点点的边框颜色
}
},
lineStyle: {
normal: {
width: 1, //连线粗细
color: "#A9B2B8", //轨迹线颜色
}
},
// 阴影区域
areaStyle: {
// 渐变颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(169,178,184, 0.8)'
}, {
offset: 1,
color: 'rgba(255, 255, 255, 0)'
}]),
origin: "start"
// 常规设置
// normal: {
// opacity: 0.3,//阴影面积 0无 1全
// color: "#ddd",
// origin: "start"
// },
}
}]
}
效果对比
静态绘制echarts：animation: false,
Echarts中属性areaStyle折线图线下方区域颜色修改
echarts折线图 鼠标移入不改变小点显示样式：hoverAnimation:false,==》echarts饼图鼠标移入，悬停部分不放大突出
饼图
Echarts 饼图中间添加文字、title、graphic
根据条件：取消ios端 左滑返回上一页的默认事件：@touchstart.prevent
<template>
<div :id="id" class="chart" :ref="id" @touchend="remove" @touchstart="start"></div>
</template>
<script>
import echarts from 'echarts'
export default {
props: {
// 取消走势图默认事件
stopPrev: {
type: Boolean,
default: false,
},
},
//...
methods: {
start(e) {
if (this.stopPrev) {
e.preventDefault()
}
},
},
}
</script>隐藏tip和轴线
<template>
<div :id="id" class="chart" :ref="id" @touchend="remove" @touchstart.prevent></div>
</template>
methods: {
// 隐藏tip
remove(){
// 鼠标移出 隐藏tip
this.chart.dispatchAction({
type: 'hideTip'
})
// 鼠标移出 隐藏轴线
this.chart.dispatchAction({
type: 'updateAxisPointer',
currTrigger: 'leave'
})
}
},智能推荐
5个超厉害的资源搜索网站，每一款都可以让你的资源满满！_最全资源搜索引擎-程序员宅基地
文章浏览阅读1.6w次，点赞8次，收藏41次。生活中我们无时不刻不都要在网站搜索资源，但就是缺少一个趁手的资源搜索网站，如果有一个比较好的资源搜索网站可以帮助我们节省一大半时间！今天小编在这里为大家分享5款超厉害的资源搜索网站，每一款都可以让你的资源丰富精彩！网盘传奇一款最有效的网盘资源搜索网站你还在为找网站里面的资源而烦恼找不到什么合适的工具而烦恼吗？这款网站传奇网站汇聚了4853w个资源，并且它每一天都会持续更新资源；..._最全资源搜索引擎
Book类的设计(Java)_6-1 book类的设计java-程序员宅基地
文章浏览阅读4.5k次，点赞5次，收藏18次。阅读测试程序，设计一个Book类。函数接口定义：class Book{}该类有 四个私有属性 分别是 书籍名称、 价格、 作者、 出版年份，以及相应的set 与get方法；该类有一个含有四个参数的构造方法，这四个参数依次是 书籍名称、 价格、 作者、 出版年份 。裁判测试程序样例：import java.util.*;public class Main { public static void main(String[] args) { List <Book>_6-1 book类的设计java
基于微信小程序的校园导航小程序设计与实现_校园导航微信小程序系统的设计与实现-程序员宅基地
文章浏览阅读613次，点赞28次，收藏27次。相比于以前的传统手工管理方式，智能化的管理方式可以大幅降低学校的运营人员成本，实现了校园导航的标准化、制度化、程序化的管理，有效地防止了校园导航的随意管理，提高了信息的处理速度和精确度，能够及时、准确地查询和修正建筑速看等信息。课题主要采用微信小程序、SpringBoot架构技术，前端以小程序页面呈现给学生，结合后台java语言使页面更加完善，后台使用MySQL数据库进行数据存储。微信小程序主要包括学生信息、校园简介、建筑速看、系统信息等功能，从而实现智能化的管理方式，提高工作效率。
有状态和无状态登录
传统上用户登陆状态会以 Session 的形式保存在服务器上，而 Session ID 则保存在前端的 Cookie 中；而使用 JWT 以后，用户的认证信息将会以 Token 的形式保存在前端，服务器不需要保存任何的用户状态，这也就是为什么 JWT 被称为无状态登陆的原因，无状态登陆最大的优势就是完美支持分布式部署，可以使用一个 Token 发送给不同的服务器，而所有的服务器都会返回同样的结果。有状态和无状态最大的区别就是服务端会不会保存客户端的信息。
九大角度全方位对比Android、iOS开发_ios 开发角度-程序员宅基地
文章浏览阅读784次。发表于10小时前| 2674次阅读| 来源TechCrunch| 19 条评论| 作者Jon EvansiOSAndroid应用开发产品编程语言JavaObjective-C摘要：即便Android市场份额已经超过80%，对于开发者来说，使用哪一个平台做开发仍然很难选择。本文从开发环境、配置、UX设计、语言、API、网络、分享、碎片化、发布等九个方面把Android和iOS_ios 开发角度
搜索引擎的发展历史
搜索引擎的发展历史可以追溯到20世纪90年代初，随着互联网的快速发展和信息量的急剧增加，人们开始感受到了获取和管理信息的挑战。这些阶段展示了搜索引擎在技术和商业模式上的不断演进，以满足用户对信息获取的不断增长的需求。
随便推点
控制对象的特性_控制对象特性-程序员宅基地
文章浏览阅读990次。对象特性是指控制对象的输出参数和输入参数之间的相互作用规律。放大系数K描述控制对象特性的静态特性参数。它的意义是：输出量的变化量和输入量的变化量之比。时间常数T当输入量发生变化后，所引起输出量变化的快慢。（动态参数） ..._控制对象特性
FRP搭建内网穿透(亲测有效)_locyanfrp-程序员宅基地
文章浏览阅读5.7w次，点赞50次，收藏276次。FRP搭建内网穿透1.概述：frp可以通过有公网IP的的服务器将内网的主机暴露给互联网，从而实现通过外网能直接访问到内网主机；frp有服务端和客户端，服务端需要装在有公网ip的服务器上，客户端装在内网主机上。2.简单的图解：3.准备工作：1.一个域名（www.test.xyz）2.一台有公网IP的服务器(阿里云、腾讯云等都行)3.一台内网主机4.下载frp，选择适合的版本下载解压如下：我这里服务器端和客户端都放在了/usr/local/frp/目录下4.执行命令# 服务器端给执_locyanfrp
UVA 12534 - Binary Matrix 2 (网络流‘最小费用最大流’ZKW)_uva12534-程序员宅基地
文章浏览阅读687次。题目：http://acm.hust.edu.cn/vjudge/contest/view.action?cid=93745#problem/A题意：给出r*c的01矩阵，可以翻转格子使得0表成1,1变成0，求出最小的步数使得每一行中1的个数相等，每一列中1的个数相等。思路：网络流。容量可以保证每一行和每一列的1的个数相等，费用可以算出最小步数。行向列建边，如果该格子是_uva12534
免费SSL证书_csdn alphassl免费申请-程序员宅基地
文章浏览阅读504次。1、Let's Encrypt 90天，支持泛域名2、Buypass：https://www.buypass.com/ssl/resources/go-ssl-technical-specification6个月，单域名3、AlwaysOnSLL：https://alwaysonssl.com/ 1年，单域名 可参考蜗牛（wn789）4、TrustAsia5、Alpha..._csdn alphassl免费申请
测试算法的性能（以选择排序为例）_算法性能测试-程序员宅基地
文章浏览阅读1.6k次。测试算法的性能 很多时候我们需要对算法的性能进行测试，最简单的方式是看算法在特定的数据集上的执行时间，简单的测试算法性能的函数实现见testSort()。【思想】：用clock_t计算某排序算法所需的时间，（endTime - startTime）/ CLOCKS_PER_SEC来表示执行了多少秒。【关于宏CLOCKS_PER_SEC】：以下摘自百度百科，“CLOCKS_PE_算法性能测试
Lane Detection_lanedetectionlite-程序员宅基地
文章浏览阅读1.2k次。fromhttps://towardsdatascience.com/finding-lane-lines-simple-pipeline-for-lane-detection-d02b62e7572bIdentifying lanes of the road is very common task that human driver performs. This is important ..._lanedetectionlite