<template>
<div ref="main" style="width: 1000px; height: 1000px"></div>
<!-- <v-scale-screen width="1920" height="1080" class="app" style="transform: scale(1, 1); background-color: #fff">
</v-scale-screen> -->
</template>
<script setup lang="ts">
import * as echarts from "echarts";
// import VScaleScreen from "v-scale-screen";
import { ref, onMounted } from "vue";
// 按需引入 echarts
const main = ref(); // 使用ref创建虚拟DOM引用,使用时用main.value
onMounted(() => {
init();
});
function init() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(main.value);
var datas = [
[
{ name: "银河帝国5:迈向基地", value: 3.8 },
{ name: "俞军产品方法论", value: 2.3 },
{ name: "艺术的逃难", value: 2.2 },
{ name: "第一次世界大战回忆录(全五卷)", value: 1.3 },
{ name: "Scrum 精髓", value: 1.2 },
{ name: "其它", value: 5.7 },
],
];
// 指定图表的配置项和数据
var option = {
title: {
text: "阅读书籍分布",
left: "center",
top: "center",
textStyle: {
color: "#999",
fontWeight: "normal",
fontSize: 12,
},
},
series: datas.map(function (data) {
return {
type: "pie",
radius: [120, 100],
height: "33.33%",
left: "center",
top: "center",
width: 500,
itemStyle: {
borderColor: "#fff",
borderWidth: 2,
},
label: {
alignTo: "edge",
formatter: "{name|{b}}\n{time|{c} 小时}",
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 10,
color: "#999",
},
},
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80,
},
labelLayout: function (params: any) {
const isLeft = params.labelRect.x < myChart.getWidth() / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points,
};
},
data: data,
};
}),
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.app {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.5s;
position: relative;
overflow: hidden;
z-index: 100;
transform-origin: left top;
}
</style>