Closed lip006 closed 3 years ago
<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>
小程序中效果如上 H5官方效果如上