1. このケースは Vue3+ts に基づいており、効果が表示されます。
2. 単一の属性の値:
series.radius: [ ' パーセント ' , ' パーセント ' ]
最初の値はデバイスの内側の円のサイズを設定し、2 番目の値は外側の円のサイズを設定します。
2 つの値を組み合わせると円の太さを設定できます
シリーズ.センター: [ ' パーセント ' 、 ' パーセント ' ]
最初の値は水平位置を調整し、2 番目の値は垂直位置を調整します
グラフィック 円グラフの中央に画像を挿入します
要素: [
{
タイプ: '画像',
スタイル: {
画像: 「base64 形式の画像」、
//画像サイズを設定
幅: 50、
身長: 50、
}、
// 位置を調整する
左: '39.5%'、
トップ: '46.5%'、
}、
]、
画像を Base64 に変換するオンライン ツール:
3. 完全なコードは次のとおりです。
<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>