一、取数据的最大值:
let maxNum = maxData.sort((a, b) => b - a)[0];
二、echarts 自适应
所有的echarts里面设置了字体根据最外层body的字体来改变大小
// app.vue中的代码
// 页面开始加载时修改font-size
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
var pxVal = oWidth / 1920;
sessionStorage.setItem("echartFont", pxVal); // 用于echart修改字体大小
html.style.fontSize = pxVal * 100 + "px";
每个echarts里面设置了
this.echartFontSize = sessionStorage.getItem("echartFont") ? sessionStorage.getItem("echartFont") : 1;
ehcarts字体的大小只能是px 所以假如字体大小是16px 在这个的基础上 16 * this.echartFontSize 来实现自适应如果sessionStorage 没有存 "echartFont" 默认为字体传值进去的大小。
fontSize: 12 * this.echartFontSize,
有些图形的宽度,位置,大小等等也可以设置
三、柱状图左侧文字的宽度
如上图左侧的文字宽度需要手动来根据文字设置宽度
let yData = ["地面道路", "高速公路", "快速路"],
let strLen = yData[0].length;
yData.forEach((item) => {
if (item.length > strLen) {
strLen = item.lengt;
}
});
strLen = strLen + (50 + strLen * 14) * this.echartFontSize;
四、标题不是只可以写官方文档上的两个内容
官方文档有两个标题可以设置,但是并不是说只能有两个不要被误导了,其实可以多个
五、当echarts 中要使用图片时
还是拿个来做案例
// 方便以后使用将代码放上,直接复制
require("@/../static/images/black/components/echarts/echarts6/icon_dimian.png")
imgSrc.push({
value: maxNum,
symbol: `image://${echartData.symbol[i]}`,
});
改echarts是做了组件化的,很多东西都需要从外面来进行调整,根据标题来对应相应的icon, 所以可以作为参考
六、文字太多省略处理
ehcarts有些时候需要显示得文字太多了需要进行处理一下,不然不够美观还会影响echarts图列得显示
// 虽然显示得地方进行了处理,但是echarts划上去显示得时候是要完整得,如下图所示:
chartData.data = [
{
label: "名称2-" + (i + 1) + "-" + (j + 1),
value: Math.floor(Math.random() * 200 + 10)
}
]; // 具体数值根据实际得来就好了只是示意一下
let strLen = 5; // 最多显示5个字,或者也可以组件化通过外面传值来进行控制
chartData.data.forEach((item, index) => {
item.forEach((val) => {
let name = val.label;
if (name.length > strLen) {
name = name.slice(0, strLen) + "..."; // 主要是这里将显示文字得文字做一下处理
}
});
});
提示框想要变换格式
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter: function (params) {
// 这里也是举一个例子,也可以写标签通过类名来进行样式调整
let str = params[0].name + "<br />";
// 对负的进行处理
params.forEach((item) => {
let num = Math.abs(item.value);
if (item.seriesName != "背景") {
str += item.seriesName + " : " + num + "<br />";
}
});
return str;
},
textStyle: {
fontSize:
(echartOption.tooltipFontSize
? echartOption.tooltipFontSize
: 12) * this.echartFontSize,
},
},
七:css制作echarts漪涟效果
<div class="circle-ripple"></div>
.circle-ripple {
background-color: #35ffc3;
width: 1em;
height: 1em;
border-radius: 50%;
margin: 5vh auto;
animation: ripple .7s linear infinite
}
@keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(101,255,120,0.3),
0 0 0 1em rgba(101,255,120,0.3),
0 0 0 3em rgba(101,255,120,0.3),
0 0 0 5em rgba(101,255,120,0.3)
}
100% {
box-shadow: 0 0 0 1em rgba(101,255,120,0.3),
0 0 0 3em rgba(101,255,120,0.3),
0 0 0 5em rgba(101,255,120,0.3),
0 0 0 8em rgba(101,255,120,0)
}
}
<div class="GreenStatus"></div>
.GreenStatus {
width: 100px;
height: 100px;
background-color: #6cb552;
border-radius: 50%;
position: relative;
margin: 0 auto;
}
.GreenStatus::before {
content: "";
width: 180px;
height: 180px;
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
animation: GreenDot 1.5s ease-out 0s infinite;
background-color: rgba(108, 181, 82, 0.5);
}
@keyframes GreenDot {
0% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 1;
}
30% {
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1.4);
opacity: 0;
}
}
八、水流图
这种的ehcarts需要安装插件和特定版本,可能和使用的版本冲突所以使用样式来制作
封装组件
<template>
<div class="echart-water" :style="{'--top': value}">
<div class="water-main">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "modelEcharts34",
props: {
value: {
type: Number | String,
default: "0%"
}
},
watch: {
value: {
deep: true,
handler(val) {
return val
},
},
},
data() {
return {
}
}
}
</script>
<style scoped>
.echart-water {
position: relative;
width: 180px;
height: 180px;
margin: 0 auto;
background-color: rgb(240, 228, 228);
border-radius: 50%;
border: 3px solid rgb(246, 247, 248);
overflow: hidden;
transform: rotate(180deg);
}
.water-main {
width: 100%;
height: 100%;
position: absolute;
top: 0%;
left: 0%;
transform: rotate(180deg);
}
.water-main::before {
content: "";
position: relative;
}
.echart-water::after,
.echart-water::before {
content: "";
position: absolute;
top: var(--top);
left: 50%;
width: 150%;
height: 150%;
border-radius: 40%;
}
.echart-water::after {
background-color: rgb(23, 106, 201);
animation: real 5s linear infinite;
}
@keyframes real {
0% {
transform: translate(-50%, -100%) rotate(0deg);
}
100% {
transform: translate(-50%, -100%) rotate(360deg);
}
}
.echart-water::before {
background-color: rgba(23, 115, 201, 0.5);
animation: virtual 7s linear infinite;
}
@keyframes virtual {
0% {
transform: translate(-50%, -100%) rotate(0deg);
}
100% {
transform: translate(-50%, -100%) rotate(360deg);
}
}
</style>
引用组件
<model-echarts-34 :value="'20%'">
<div class="custom"> {{value}}</div>
</model-echarts-34>
暂时就这些把,后面再有值得记录一下得会慢慢加进来!