一、取数据的最大值:
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) + "..."; // 主要是这里将显示文字得文字做一下处理
}
});
});
暂时就这些把,后面再有值得记录一下得会慢慢加进来!