大部分可能会涉及到echarts相关知识的一些应用
大屏中用字体实现的一些样式字体效果
css代码：
@font-face {
font-family: "chartfont";
src: url('../font/Italic.ttf?t=1623722677794') format('truetype');
}
.chartfont {
font-family: "chartfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
<div class="chartfont">159</div>
<div class="chartfont">161</div>
关键的代码就可以展示如下文字效果
image.png
一些小饼显示数据状态的实现方式，可以copy过去直接使用效果
如果要实现如下效果，想过用css3效果画，最终卡在数据初始化的一个动画效果
image.png
如果要用css3实现如下的一个动画效果，最终没有实现，以下是动画效果展示：
GIF 2022-5-24 19-00-58.gif
采用了echarts 实现 echarts实在太好用，可惜的是，目前知道的官网关闭了示例网站（上面放了大量由用户上传作品管理的网站），就凭这个网站上的大量例子就可以实现95%上的效果
引入echarts
const colorList = [
"rgba(0, 246, 143, 0.15)",
"rgba(0, 246, 143, 1)",
"rgba(0, 246, 143, 0.3)",
];
let intActual = 80;
let intRemain = 20;
let option= {
// 图表居中显示的文字
title: {
text: "{a|" + intActual + "}{b|%}",
x: "center",
y: "center",
textStyle: {
rich: {
a: {
fontSize: 12,
color: "#fff",
padding: [10, 0, 14, 0],
fontWeight: "600",
},
b: {
fontSize: 12,
color: "#fff",
padding: [8, 0, 14, 0],
},
},
},
},
// series 实现 三层 一层套一层 radius要设置好
series: [
{
type: "pie",
radius: [0, "55%"],
center: ["50%", "50%"],
z: 0,
itemStyle: {
normal: {
color: colorList[0],
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
label: {
normal: {
position: "center",
},
},
data: [100],
},
{
type: "pie",
radius: [0, "70%"],
hoverAnimation: false,
label: {
normal: {
show: false,
},
},
data: [
{
value: intActual,
itemStyle: {
color: colorList[1],
opacity: 0.4,
},
},
{
value: intRemain,
itemStyle: {
opacity: 0,
},
},
],
},
{
type: "pie",
radius: ["70%", "80%"],
hoverAnimation: false,
labelLine: {
show: false,
},
data: [
{
value: intActual,
itemStyle: {
color: colorList[1],
opacity: 1,
},
},
{
value: intRemain,
itemStyle: {
color: colorList[2],
opacity: 1,
},
},
],
},
],
};
echarts.init(
document.getElementById("demo")
).setOption(option, true);
实现一些背景样式，主要是通过给background 设置图片达到目的
image.png
大屏中页面里每一块四个角有些需要加上自定义的样式
下面两个图要联合起来看
image.png
image.png
有些时候我们需要给echarts图表加上自定义滚动条样式
image.png
dataZoom: [
{
show: true,
height: 12,
xAxisIndex: [0],
bottom: "8%",
start: 10,
end: 90,
handleIcon:
"path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
handleSize: "110%",
handleStyle: {
color: "#d3dee5",
},
textStyle: {
color: "transparent",
},
borderColor: "#90979c",
},
{
type: "inside",
show: true,
height: 15,
start: 1,
end: 35,
},
],
bar增加渐变 & 字体倾斜
image.png
直接上代码：
series: [
{
type: "bar",
barWidth: 15,
itemStyle: {
normal: {
// 主要是这段代码 ，让bar产生了渐变
color: new echarts.graphic.LinearGradient(0, 0, 1, 2, [
{
offset: 0,
color: "#008AFF",
},
{
offset: 1,
color: "transparent",
},
]),
},
},
},
xAxis: {
// 主要是这段代码实现了 倾斜
axisLabel: {
rotate: -40,
},
},
echarts 自定义实现悬浮提示框的样式
image.png
tooltip: {
trigger: "axis",
// 下面几个样式实现真个div背景样式
padding: 0,
position: ["50%", "50%"],
backgroundColor: "rgba(0, 15, 33, 0.65)",
extraCssText: "border-radius:0;box-shadow: 0 2px 4px 0 #070914;",
axisPointer: {
type: "shadow",
},
// 这里实现div内容自定义然后加上自定义的样式
formatter: function (param) {
let di =
'<div class="">' +
name +
"<br>" +
'<span class="tooltip-text">测试文本</span>' +
'<span class="tooltip-amount">' +
param[0].data +
"</span>" +
'<span class="tooltip-text">测试文本</span>' +
' <div class="left-top-corner-tooltip"></div>' +
'<div class="right-bottom-corner-tooltip"></div>' +
"</div>";
return di;
},
},
.left-top-corner-tooltip{
position: absolute;
left:0;
top:0;
width:16px;
height:16px;
background: url("../img/left-top-corner-tooltip.png") 0 0 / 100% 100% no-repeat;
}
自定义实现一个进度条的样式
image.png
<div class="schedule-li-show">
<div class="schedule-li-show-bg"></div>
<div class="schedule-li-show-top" style="width:90%"></div>
<div class="schedule-li-show-top-line" style="left:90%"></div>
</div>
.schedule-li-show{
position: relative;
}
.schedule-li-show-bg{
width: 100%;
height: 16px;
background: #FFFFFF;
opacity: 0.15;
}
.schedule-li-show-top{
height: 8px;
background: linear-gradient(90deg, #008AFF 0%, #00ECFF 100%);
position: absolute;
top: 4px;
}
.schedule-li-show-top-line{
content: "";
position: absolute;
top: 0px;
width: 3px;
height: 16px;
background: #FFFFFF;
}
