大部分可能會(huì)涉及到echarts相關(guān)知識(shí)的一些應(yīng)用
大屏中用字體實(shí)現(xiàn)的一些樣式字體效果
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>
關(guān)鍵的代碼就可以展示如下文字效果
image.png
一些小餅顯示數(shù)據(jù)狀態(tài)的實(shí)現(xiàn)方式，可以copy過(guò)去直接使用效果
如果要實(shí)現(xiàn)如下效果，想過(guò)用css3效果畫(huà)，最終卡在數(shù)據(jù)初始化的一個(gè)動(dòng)畫(huà)效果
image.png
如果要用css3實(shí)現(xiàn)如下的一個(gè)動(dòng)畫(huà)效果，最終沒(méi)有實(shí)現(xiàn)，以下是動(dòng)畫(huà)效果展示：
GIF 2022-5-24 19-00-58.gif
采用了echarts 實(shí)現(xiàn) echarts實(shí)在太好用，可惜的是，目前知道的官網(wǎng)關(guān)閉了示例網(wǎng)站（上面放了大量由用戶上傳作品管理的網(wǎng)站），就憑這個(gè)網(wǎng)站上的大量例子就可以實(shí)現(xiàn)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 實(shí)現(xiàn) 三層 一層套一層 radius要設(shè)置好
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);
實(shí)現(xiàn)一些背景樣式，主要是通過(guò)給background 設(shè)置圖片達(dá)到目的
image.png
大屏中頁(yè)面里每一塊四個(gè)角有些需要加上自定義的樣式
下面兩個(gè)圖要聯(lián)合起來(lái)看
image.png
image.png
有些時(shí)候我們需要給echarts圖表加上自定義滾動(dòng)條樣式
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產(chǎn)生了漸變
color: new echarts.graphic.LinearGradient(0, 0, 1, 2, [
{
offset: 0,
color: "#008AFF",
},
{
offset: 1,
color: "transparent",
},
]),
},
},
},
xAxis: {
// 主要是這段代碼實(shí)現(xiàn)了 傾斜
axisLabel: {
rotate: -40,
},
},
echarts 自定義實(shí)現(xiàn)懸浮提示框的樣式
image.png
tooltip: {
trigger: "axis",
// 下面幾個(gè)樣式實(shí)現(xiàn)真?zhèn)€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",
},
// 這里實(shí)現(xiàn)div內(nèi)容自定義然后加上自定義的樣式
formatter: function (param) {
let di =
'<div class="">' +
name +
"<br>" +
'<span class="tooltip-text">測(cè)試文本</span>' +
'<span class="tooltip-amount">' +
param[0].data +
"</span>" +
'<span class="tooltip-text">測(cè)試文本</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;
}
自定義實(shí)現(xiàn)一個(gè)進(jìn)度條的樣式
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;
}
