echarts 標簽字體 自適應方法

一：echarts 自適應方案

在做一個大屏項目開發，主要是vue+echarts來做。

這次在做的時候，藍湖是 1920 x 1080 的像素。輸出的屏幕是 4k 。其實數據上就是 寬 ，高 的兩倍差距。

還原 ui 的時候約定用 1920 x 1080 的像素標准直接來寫。我提前將布局用 vw vh 寫好了(其實寫的大概差不多，也沒有用比例轉。。) 主要是寫每個小框里面的 echarts 做的圖表了。 

echarts 里面的尺寸 只能 寫 12 或 12%。有的如：fontSize 之類的 只有 12 。導致 寫的時候是 1080 ，輸出到 4k 屏幕上，label 標簽 和 字就很很小。 官方對於echarts使用值單位說明

在做的時候。echart 中能用 12% 百分比的就用百分比。就只能做個函數轉換。

• 解決方案：將實際窗口的大小與設計圖窗口大小做比得到要給相對的比率，每個單位數值和這個比率相乘即可。即：按比例縮放字體。比如設計圖是1920*1080的，某個數值是fontSize:12，當前顯示器是3840的大屏，那么你現在的字體大小應該是：12*（3840/1920）= 24。

//當前視口寬度
let nowClientWidth = document.documentElement.clientWidth;
 
換算方法
function nowSize(val,initWidth=1920){
    return val * (nowClientWidth/initWidth);

。。。
// 相關值替換，如里面的13就是1080下的大小
fontSize:nowSize(13)

感覺沒寫全。。

let nowClientWidth = document.documentElement.clientWidth;

echarts 的自適應 和 里面的 字體大小轉換 都是 基於 能捕獲到窗口分辨率變化。

window.screenWidth 和 document.documentElement.clientWidth; 成功監聽。有了轉換條件就好轉換了

條件 true 》重新計算 設置的數字大小 》方法不怕

條件 true 》刷新 》echarts 自適應大小

我的使用代碼：

<template>
  <div :id="id" class="pieAzXx" style="width: 100%; height: 100%; "></div>
</template>
<script>
export default {
  props: {
    id: {
      type: String,
      default: function () {
        return 'sdfasfsa'
      }
    },
    echartData: {
      type: Array,
      default: function () {
        return [];
      }
    },
  },
  data: function () {
    return {
      echartsOption: null,
 screenWidth: document.body.clientWidth
    };
  },
  computed: {},
  watch: {
    echartData: {
      // deep: true,
      handler: function () {
        this.setChart();
      }
    },
 screenWidth(val) { this.screenWidth = val;
      this.echartsOption.resize() }
  },
  activated() { },
  mounted() {
    const self = this
    // 基於准備好的dom，初始化echarts實例
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        self.screenWidth = window.screenWidth
      })()
    }
   this.setRoseChart();
  },
  methods: {
    setRoseChart() {
      //當前視口寬度
      let nowClientWidth = document.documentElement.clientWidth;
      // 換算方法
      let nowSize = function (val, initWidth = 1920) {
        return val * (nowClientWidth / initWidth); };
      let data0 = this.echartData[0];
      this.echartsOption = this.$echarts.init(document.getElementById(this.id));
      this.echartsOption.clear();
      this.echartsOption.setOption({
        series: [
          {
            name: '訪問來源',
            type: 'pie',
            radius: ['30%', '36%'],
            center: ['50%', '45%'],
            startAngle: 60,
            color: ['#FF5D5D', '#32F1FE'],
            label: {
              show: true,
              fontSize: nowSize(16),
              fontStyle: "normal",
              formatter: function (params) {
                let percent = 0;
                let total = 0;
                for (var i = 0; i < data0.length; i++) {
                  total += data0[i].value;
                }
                percent = ((params.value / total) * 100).toFixed(0);
                return params.name + '\n' + '(' + percent + '%' + ')';
              }
            },
            labelLine: {
              length: nowSize(-60),
              length2: 0,
              lineStyle: {
                width: 0
              }
            },
            hoverAnimation: false,
            data: data0
          },
        ]
      });
    },
  }
};
</script>
<style lang="scss" scoped>
</style>

 

參考鏈接：

echarts自適應問題，echarts中怎么改變字體單位實現自適應 （解決了我的 echarts 圖標，字體之類的自適應）

Vue 使用eCharts自適應大小 （這個參考其中監聽放置的的位置格式，和echarts自適應方案）

echarts使用技巧（一）echarts的圖表自適應resize問題、單選、縮放等 （自適應 resize 的解釋）

另外看到的文章：

vue+px2rem實現pc端大屏自適應(rem適配) （rem的方式。其實差不多都，這個 pc 之前用的多？）

二：將px單位轉為vw

1.安裝

npm install postcss-px-to-viewport --save-dev

2.配置，vue-cli3.x 項目下的 vue.config.js 配置文件，放置如下內容

const pxtovw = require('postcss-px-to-viewport');

module.exports={

    // 。。。別的代碼

    css:{
        loaderOptions:{
            sass:{
                //給sass-loader傳遞選項
            },
            css:{
                //給css-loader傳遞選項
            },
            postcss:{
                //給postcss-loader傳遞選項
                plugins:[
                    new pxtovw({
                        unitToConvert: 'px', //需要轉換的單位，默認為"px"；
                        viewportWidth: 375, //設計稿的視口寬度
                        unitPrecision: 5, //單位轉換后保留的小數位數
                        propList: ['*'], //要進行轉換的屬性列表,*表示匹配所有,!表示不轉換
                        viewportUnit: 'vw', //轉換后的視口單位
                        fontViewportUnit: 'vw', //轉換后字體使用的視口單位
                        selectorBlackList: [], //不進行轉換的css選擇器，繼續使用原有單位
                        minPixelValue: 1, //設置最小的轉換數值
                        mediaQuery: false, //設置媒體查詢里的單位是否需要轉換單位
                        replace: true, //是否直接更換屬性值，而不添加備用屬性
                        exclude: [/node_modules/] //忽略某些文件夾下的文件
                    })
                ]
            }
        }
    }
}

3.設置配置文件后，需要重新啟動項目。

npm run serve

可能遇到的問題：
插件會將所有樣式的px轉換成vw，如果引入了第三方UI，也會被轉化。可以使用selectorBlackList 屬性來進行過濾。如果個別地方不想轉換為vw，可以簡單的使用大寫的PX或者Px或者pX。

我在這里遇到了字體轉換后,background-clip: text;失效：

然后發現可能是版本問題。加-webkit-

 

 

 雖然-webkit-background-clip: text; 被划線，但是其實生效了

4. 配置參數詳解：

• unitToConvert (String)，需要轉換的單位，默認為"px"
• viewportWidth (Number)，設計稿的視口寬度
• unitPrecision (Number)，單位轉換后保留的精度
• propList (Array)，能轉化為vw的屬性列表
  • 傳入特定的CSS屬性；
  • 可以傳入通配符""去匹配所有屬性，例如：[’’]；
  • 在屬性的前或后添加"*",可以匹配特定的屬性. (例如[‘position’] 會匹配 background-position-y)
  • 在特定屬性前加 “!”，將不轉換該屬性的單位 . 例如: [’*’, ‘!letter-spacing’]，將不轉換letter-spacing
  • “!” 和 ""可以組合使用， 例如: [’’, ‘!font*’]，將不轉換font-size以及font-weight等屬性
• viewportUnit (String)，希望使用的視口單位
• fontViewportUnit (String)，字體使用的視口單位
• selectorBlackList (Array)，需要忽略的CSS選擇器，不會轉為視口單位，使用原有的px等單位。
  • 如果傳入的值為字符串的話，只要選擇器中含有傳入值就會被匹配
  • 例如 selectorBlackList 為 [‘body’] 的話， 那么 .body-class 就會被忽略
  • 如果傳入的值為正則表達式的話，那么就會依據CSS選擇器是否匹配該正則
  • 例如 selectorBlackList 為 [/^body$/] , 那么 body 會被忽略，而 .body 不會
• minPixelValue (Number)，設置最小的轉換數值，如果為1的話，只有大於1的值會被轉換
• mediaQuery (Boolean)，媒體查詢里的單位是否需要轉換單位，@keyframes和media里的px默認是不轉化的，設置該屬性為true，則媒體查詢里的單位會轉成vw。
• replace (Boolean)，是否直接更換屬性值，而不添加備用屬性
• exclude (Array or Regexp)，忽略某些文件夾下的文件或特定文件，例如 ‘node_modules’ 下的文件
  • 如果值是一個正則表達式，那么匹配這個正則的文件會被忽略
  • 如果傳入的值是一個數組，那么數組里的值必須為正則
• landscape (Boolean) 是否添加根據 landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
• landscapeUnit (String) 橫屏時使用的單位
• landscapeWidth (Number) 橫屏時使用的視口寬度

參考鏈接：https://blog.csdn.net/Charissa2017/article/details/105420971