// 使字體大小為自適應(yīng)function fontSize(res) {let clientWidth =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;if (!clientWidth) return;let fontSize = 100 * (clientWidth / 1920);return res * fontSize;}var chartDom = document.getElementById("chart");this.myChart = echarts.init(chartDom, "dark");var option;option = {backgroundColor: "rgba(0,0,0,0)",color: ["#00FFFF", "#FF8C4D"],grid: {show: false,top: "9%",right: "8%",bottom: "30%",left: "15%",},xAxis: {type: "category",axisLabel: {textStyle: {fontSize: fontSize(0.15),//自適應(yīng)字體示例},},data: ["9", "10", "11", "12", "13", "14", "15", "16", "17"],},yAxis: {type: "value",axisLabel: {textStyle: {fontSize: fontSize(0.15),},},splitNumber: 10, // 坐標(biāo)軸的分割段數(shù)，是一個預(yù)估值，實(shí)際顯示會根據(jù)數(shù)據(jù)稍作調(diào)整。},legend: [{itemWidth: fontSize(0.15),itemHeight: fontSize(0.15),textStyle: {fontSize: fontSize(0.15),},bottom: "7%", //調(diào)整位置left: "25%", //調(diào)整位置data: [{ name: "A數(shù)量", icon: "rect" }], //rect為矩形},{itemWidth: fontSize(0.15),itemHeight: fontSize(0.15),textStyle: {fontSize: fontSize(0.15),},bottom: "7%", //調(diào)整位置right: "25%", //調(diào)整位置data: [{ name: "B數(shù)量", icon: "rect" }], //rect為矩形},],tooltip: {trigger: "axis",backgroundColor: "rgba(0,0,0,0.5)", //設(shè)置背景圖片 rgba格式color: "#fff",borderWidth: "1", //邊框?qū)挾仍O(shè)置1borderColor: "rgba(1,27,35,0.5)", //設(shè)置邊框顏色textStyle: {color: "#fff", //設(shè)置文字顏色fontSize: fontSize(0.12),},},series: [{name: "A數(shù)量",symbol: "circle",data: [20, 38, 91, 35, 90, 39, 13, 44, 82],type: "line",smooth: true,},{name: "B數(shù)量",data: [49, 32, 9, 34, 100, 30, 100, 56, 78],type: "line",smooth: true,initTimer: null,},],};if (option && typeof option === "object") {this.myChart.setOption(option);}window.addEventListener("resize", this.myChart.resize);

總結(jié)

以上是生活随笔為你收集整理的echarts图表使字体大小为自适应 fontSize函数fontSize(0.15)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。