echarts 各类统计图 高分辨下文字模糊

目录

一、问题

二、原因及解决方法

三、总结

如嫌繁琐，可直接移步至总结

一、问题

1.统计页面中多处用到echarts渲染统计图，在高分辨的大屏幕下 统计图及内部文字显示模糊

如下图所示：

二、原因及解决方法

1.模糊原因：为了能够渲染echarts图形，设置了固定的宽度和高度。而且高度和宽度必须设置。

2.echarts默认使用 canvas渲染，高分辨下会失真，改为  svg 渲染即可（不同分辨率下都不会失真）

3.具体方法：

echarts.init(echartRef.value, null, {
    renderer: 'svg'
  })

4.具体代码如下：

<template>
  <div class="purchase-drug-type rounded-t-2xl">
    <div class="flex items-center justify-center pb-24px pl-10px flex-auto bg-white rounded-2xl w-[400px] h-[300px]">
      <div ref="echartRef" class="echart w-full h-[264px]"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, computed } from 'vue'
import * as echarts from 'echarts'

import type { Module4 } from '@/api/chainBoard.api'

const props = withDefaults(defineProps<{ module: Module4; unit: string }>(), {
  unit: '%'
})
// const chartData = computed(() => {
//   return props.module?.propotion?.map((element) => ({
//     name: element.drugTypeName,
//     value: element.ratio
//   }))
// })

const echartRef = ref(null)
let myChart = ref()
onMounted(async () => {
  await initData()
})

function initData() {
  myChart.value = echarts.init(echartRef.value, null, {
    render: 'svg'
  })
  myChart.value.setOption({
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => {
        return `<div style="display:flex;justify-content:space-between;align-items:center">
          <div style="margin-right:16px">
            <span style="display:inline-block;margin-right:2px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>
           <span >${params.name}</span></div>
          <div>${params.value}${props.unit}</div>
        </div>`
      }
    },
    color: ['#FCAB25', '#FFD200', '#AED823', '#10DFB5', '#FE6200', '#91cc75', '#fac858', '#ee6666', '#73c0de'],
    series: [
      {
        type: 'pie',
        radius: ['50%', '59%'],
        avoidLabelOverlap: true,
        padAngle: 1,
        itemStyle: {
          borderRadius: 10
        },

        emphasis: {
          label: {
            show: true,
            fontWeight: 'bold',
            fontSize: 16,
            formatter: (params: any) => {
              return `{emphasisStyle|${params.name}}\n{emphasisStyle|${params.value}${props.unit}}`
            },
            rich: {
              emphasisStyle: {
                align: 'left',
                fontSize: 16,
                fontWeight: 'bold'
              }
            }
          }
        },
        label: {
          show: true,
          color: '#000000',
          lineHeight: 20,

          formatter: (params: any) => {
            return `{nameStyle|${params.name}}\n{valueStyle|${params.value}${props.unit}}`
          },
          rich: {
            nameStyle: {
              align: 'left',
              fontSize: 14,
              lineHeight: 20
            },
            valueStyle: {
              align: 'left',
              fontSize: 14,
              lineHeight: 20
            }
          }
        },

        labelLine: {
          length2: 45,
          length: 10,
          marginBottom: 2,
          lineStyle: {
            width: 3
          },
          minSurfaceAngle: 100,
          maxSurfaceAngle: 90
        },
        data: testData
      }
    ]
  })
}

const testData = [
  {
    name: 'test1',
    value: '11'
  },
  {
    name: 'test2',
    value: '21'
  },
  {
    name: 'test3',
    value: '21'
  },
  {
    name: 'test4',
    value: '21'
  },
  {
    name: 'test5',
    value: '21'
  }
]
</script>
<style lang="less" scoped>
.purchase-drug-type {
  background: linear-gradient(180deg, #fefbf8 0%, #fef8f4 100%);
  width: 300px;
  height: 300px;
}
</style>

5.最终效果

三、总结

对于echarts渲染模糊，可以尝试改为 svg 方式渲染。

  myChart.value = echarts.init(echartRef.value, null, {

    render: 'svg'

  })

/*

希望对你有帮助！

如有错误，欢迎指正！

*/