1. This case is based on Vue3+ts, and the effect is displayed:
2. The value of a single attribute:
series.radius: [ ' percent ' , ' percent ' ]
The first value sets the size of the inner circle, and the second value sets the size of the outer circle of the device.
Combining the two values can set the thickness of the circle
series.center: [ ' percent ' , ' percent ' ]
The first value adjusts the horizontal position, the second value adjusts the vertical position
graphic Insert picture in the middle of pie chart
elements: [
{
type: 'image',
style: {
Image: 'Picture in base64 format',
//Set image size
width: 50,
height: 50,
},
// Adjust position
left: '39.5%',
top: '46.5%',
},
],
Online tool for converting images to base64:
Image to BASE64 encoding | Rookie tool
3. The complete code is as follows:
<template>
<div class="container" ref="echartsRef" @resize="onResize"></div>
</template>
<script setup lang="ts" name="highTemperature-pie">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
const echartsRef = ref();
let myChart: any = null; // echarts实例对象
onMounted(() => {
initCharts();
});
// 变化尺寸
const onResize = (resize: any) => {
console.log('resize: ', resize);
myChart && myChart.resize();
};
window.addEventListener('resize', onResize);
const initCharts = () => {
const eChartsData = [
{
name: '正常',
value: 87,
},
{
name: '异常',
value: 13,
},
];
// 中间图片必须是base64格式
const giftImageUrl =
'data:image/png;base64,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';
let option = {
color: ['#FFF500', '#00FFFF'],
// 中间图片
graphic: {
elements: [
{
type: 'image',
style: {
image: giftImageUrl,
width: 50,
height: 50,
},
left: '39.5%',
top: '46.5%',
},
],
},
tooltip: {
show: false,
},
legend: {
icon: 'rect',
itemWidth: 12, // 图例标记的图形宽度。[ default: 25 ]
itemHeight: 12, // 图例标记的图形高度。[ default: 14 ]
// itemGap: 5, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔,纵向布局时为纵向间隔。
textStyle: {
fontSize: 14,
color: '#D3D3D3',
},
formatter(name: any) {
let res = eChartsData.filter((v) => v.name === name);
return res[0].name + ' : ' + res[0].value + '%';
},
},
series: [
{
type: 'pie',
name: '内层细圆环1',
radius: ['38%', '38%'], // 调整圆的大小
center: ['50%', '60%'], // 调整圆的位置
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
borderColor: '#284c5a',
borderWidth: 3,
},
},
label: {
show: false,
},
data: [100],
},
{
type: 'pie',
name: '最外层细圆环',
hoverAnimation: false,
clockWise: false,
radius: ['75%', '75%'],
center: ['50%', '60%'],
itemStyle: {
normal: {
borderColor: 'rgba(50, 74, 91, 1)',
borderWidth: 3,
},
},
label: {
show: false,
},
data: [100],
},
{
name: '饼图内容区',
type: 'pie',
clockWise: false,
radius: ['50%', '65%'],
center: ['50%', '60%'],
data: eChartsData,
label: {
show: false,
},
itemStyle: {
borderWidth: 5,
borderColor: '#0e1e27',
},
},
],
};
myChart = echarts.init(echartsRef.value as HTMLDivElement);
myChart.setOption(option, true);
};
</script>
<style lang="scss" scoped>
.container {
width: 100%;
height: 100%;
}
</style>