Cecilxx / echarts-taro3-vue

taro3.x-vue构建的微信小程序echarts组件,及使用示列
23 stars 5 forks source link

图表字体不清楚,这个可以优化吗? #4

Closed lip006 closed 3 years ago

lip006 commented 3 years ago

image 小程序中效果如上 image H5官方效果如上

lip006 commented 3 years ago

image

<template>
    <view>       
    <view class="bar-chart">
    <e-chart
      ref="vueref0"
      canvas-id="pie-canvas"
    />
  </view>     
    </view>
</template>
<style>
.bar-chart {
  width: 100%;
  height: 100vh;
  background-color: rgb(0,23,88);
  padding-top:20px;
}
</style>
<script>
import Taro, { Component } from "@tarojs/taro";
import { AtTabBar } from "taro-ui-vue";
import api from "../../../../api.js";
import { EChart } from "echarts-taro3-vue";

export default {
  name: "ComprehensiveStatistics",
  components: {
    EChart
  },
  data() {
    return {
      dt:[
            {value:10,name:'高中',icon:'rect'},  
            {value:150,name:'大专',icon:'rect'},  
            {value:150,name:'本科',icon:'rect'}, 
            {value:100,name:'研究生',icon:'rect'},
            {value:50,name:'博士',icon:'rect'}
      ]
    };
  },
  mounted() {
    this.getPic();
  },
  methods: {
    getPic()
    {
      const size = this.fGetChartFontSize();
      const defaultOption =  {  
            title : {  
                text: '员工学历统计表',   
                x:'center',
                textStyle:{
                    color:'#FFFFFF',
                    fontSize:size,

                }
            },  
            color:['#FE0000','#F29700','#02B0ED','#55E87D','#FFE200'],
            tooltip : {  
                trigger: 'item',  
                formatter: "{b} : {c} 人"  
            },  
            legend: {  
                orient : 'vertical',  
                x : 'left',  
                top:40,
                itemWidth:60,
                itemHeight:30,
                formatter: '{name}',
                textStyle:{
                    color: '#FFFFFF',
                    fontSize: size
                },
                data:this.dt
                }
            ,   
            calculable : true,  
            series : [  
                {  
                    name:'学历',  
                    type:'pie',  
                    radius : '60%',//饼图的半径大小  
                    center: ['50%', '60%'],//饼图的位置 左右,上下
                    label:{            //饼图图形上的文本标签
                            normal:{
                                show:true,
                                position:'outer', //标签的位置
                                 textStyle : {                                  
                                    fontSize : size    //文字的字体大小
                                },
                                 symbolSize:12,
                                formatter:'{d}%'
                            }
                        },
                    data:this.dt
                }  
            ]  
        };           
      Taro.nextTick(() => {
        this.$refs.vueref0.refresh(defaultOption);
        });     
    },
    //处理移动端字体模糊问题,根据屏幕分辨率设置字体大小
    fGetChartFontSize(){
          const dpr = window.devicePixelRatio;
          let fontSize = 14;
          if(dpr == 2){
              fontSize = 19;
          }
          else if(dpr == 3){
              fontSize = 30;
          }
          else if(dpr > 3){
              fontSize = 30;
          } 
          return fontSize;
      }
  }
};
</script>