echarts中得一些使用技巧和方法

一、取数据的最大值：

 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>


 

 

暂时就这些把，后面再有值得记录一下得会慢慢加进来！