【echarts图例模糊】解决

背景

目前的需求中遇到饼图，需要自适应 1920*1080 屏幕的 100%、125%、150%的笔记本屏幕。过程中发现图例比较模糊（公司电脑配置较低）。 追求完美的领导和测试要求不要有毛边和模糊，要高清。
以上图一

以上图二

图一和图二对比看，就发现确认是有模糊。

解决方案

方案一，写媒体查询设置不同高度的容器下，重新设置字体

源码如下：

     let myChart = echarts.init(chartDom)
    const option = {
      legend: {
        show: true,
        bottom: -5,
        left: 'center',
        padding: [5, 15],
        itemWidth: 12,
        itemHeight: 12,
        selectedMode: false,
        textStyle: {
          fontFamily: 'SourceHanSansCN-Regular',
          fontWeight: 400,
          fontSize: '0.845rem',
          color: '#092649'
        }
      },
      color: pieChartsInfo.value.legendColor,
      series: [
        {
          type: 'pie',
          radius: ['50%', '58%'],
          center: ['49%', '40%'],
          startAngle: 90,
          clockwise: true,
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          data: pieChartsInfo.value.data,
          emphasis: {
            disabled: true // 关闭鼠标 hover 效果
          },
          animation: true
        }
      ],
      graphic: [
        {
          type: 'text',
          left: 'center',
          top: '35%',
          style: {
            text: pieCleanValue.value,
            fill: '#092649',
            fontSize: calcFontSize(32),
            fontWeight: 'bold',
            fontFamily: 'D-DIN-PRO-Bold'
          }
        }
      ],
      media: [
        {
          query: {
            minHeight: 200 // 笔记本100%
          },
          option: {
            legend: {
              textStyle: {
                fontSize: 14
              }
            }
          }
        },
        {
          query: {
            minHeight: 300 // 笔记本125%
          },
          option: {
            legend: {
              textStyle: {
                fontSize: 16
              }
            }
          }
        }
      ]
    }

方案二， 设置echarts初始化参数 render 或 devicePixelRatio

let myChart = echarts.init(chartDom, null, { render: 'svg' })
// let myChart = echarts.init(chartDom, null, { devicePixelRatio: '2.5' })

方案三 直接设置fontSize为rem参数

同时也需要考虑不同缩放比，去适配图例对齐。

 legend: {
        show: true,
        bottom: -5,
        left: 'center',
        padding: [5, 15],
        itemWidth: 12,
        itemHeight: 12,
        selectedMode: false,
        textStyle: {
          fontFamily: 'SourceHanSansCN-Regular',
          fontWeight: 400,
          fontSize: '0.845rem',
          color: '#092649'
        }
      },

完整源码

function getSinglePieChart() {
   let chartDom = document.getElementById('pieSingleCharts')
   if (!chartDom) {
     return
   }

   let myChart = echarts.init(chartDom, null, { render: 'svg' })
   // let myChart = echarts.init(chartDom, null, { devicePixelRatio: '2.5' })
   const option = {
     legend: {
       show: true,
       bottom: -5,
       left: 'left',
       padding: [5, 15],
       itemWidth: 12,
       itemHeight: 12,
       data: [
         '洁净（≥90）                     ',
         '轻度污染（80≤x＜90）',
         '中度污染（60≤x＜80）',
         '重度污染（<60）'
       ],
       selectedMode: false,
       textStyle: {
         fontFamily: 'SourceHanSansCN-Regular',
         fontWeight: 400,
         fontSize: '0.845rem',
         color: '#092649'
       }
     },
     color: pieChartsInfo.value.legendColor,
     series: [
       {
         type: 'pie',
         radius: ['50%', '58%'],
         center: ['49%', '40%'],
         startAngle: 90,
         clockwise: true,
         label: {
           show: false
         },
         labelLine: {
           show: false
         },
         data: pieChartsInfo.value.data,
         emphasis: {
           disabled: true // 关闭鼠标 hover 效果
         },
         animation: true
       }
     ],
     graphic: [
       {
         type: 'text',
         left: 'center',
         top: '35%',
         style: {
           text: pieCleanValue.value,
           fill: '#092649',
           fontSize: calcFontSize(32),
           fontWeight: 'bold',
           fontFamily: 'D-DIN-PRO-Bold'
         }
       }
     ],
     media: [
       // {
       //   query: {
       //     minHeight: 254 // 笔记本100%
       //   },
       //   option: {
       //     legend: {
       //       padding: [5, 10],
       //       textStyle: {
       //         fontSize: '0.875rem'
       //       }
       //     }
       //   }
       // }
       // {
       //   query: {
       //     minHeight: 204 // 笔记本125%
       //   },
       //   option: {
       //     legend: {
       //       padding: [5, 20],
       //       textStyle: {
       //         fontSize: '0.875rem'
       //       }
       //     }
       //   }
       // }
       // {
       //   query: {
       //     minHeight: 170 // 笔记本150%
       //   },
       //   option: {
       //     legend: {
       //       bottom: 4,
       //       padding: [0, -5, 0, 0],
       //       textStyle: {
       //         fontSize: '0.875rem'
       //       },
       //       data: [
       //         '洁净（≥90）                     ',
       //         '轻度污染（80≤x＜90）',
       //         '中度污染（60≤x＜80）',
       //         '重度污染（<60）'
       //       ]
       //     }
       //   }
       // }
     ]
   }

   myChart.clear()
   option && myChart.setOption(option)

   window.addEventListener('resize', () => {
     myChart.resize()
   })
 }

经验分享，感谢查阅，望指正。