echarts图表使字体大小为自适应 fontSize函数fontSize(0.15)

      // 使字体大小为自适应
      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),//自适应字体示例
            },
          },
          data: ["9", "10", "11", "12", "13", "14", "15", "16", "17"],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              fontSize: fontSize(0.15),
            },
          },
          splitNumber: 10, // 坐标轴的分割段数,是一个预估值,实际显示会根据数据稍作调整。
        },
        legend: [
          {
            itemWidth: fontSize(0.15),
            itemHeight: fontSize(0.15),
            textStyle: {
              fontSize: fontSize(0.15),
            },
            bottom: "7%", //调整位置
            left: "25%", //调整位置
            data: [{ name: "A数量", icon: "rect" }], //rect为矩形
          },
          {
            itemWidth: fontSize(0.15),
            itemHeight: fontSize(0.15),
            textStyle: {
              fontSize: fontSize(0.15),
            },
            bottom: "7%", //调整位置
            right: "25%", //调整位置
            data: [{ name: "B数量", icon: "rect" }], //rect为矩形
          },
        ],
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,0.5)", //设置背景图片 rgba格式
          color: "#fff",
          borderWidth: "1", //边框宽度设置1
          borderColor: "rgba(1,27,35,0.5)", //设置边框颜色
          textStyle: {
            color: "#fff", //设置文字颜色
            fontSize: fontSize(0.12),
          },
        },
        series: [
          {
            name: "A数量",
            symbol: "circle",
            data: [20, 38, 91, 35, 90, 39, 13, 44, 82],
            type: "line",
            smooth: true,
          },
          {
            name: "B数量",
            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);
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值