- <template>
- <div ref="assetEchart" class="asset_echart"></div>
- </template>
- <script setup>
- import { init } from 'echarts';
- const assetEchart = ref(null);
- let {
- data: { type, xData, center, padding, itemStyle, x, y },
- } = defineProps(['data']);
- console.log('xData', xData);
- const all = xData.reduce((n, v) => {
- return n + v.value;
- }, 0);
- const initM = () => {
- const chart = init(assetEchart.value);
- window.addEventListener('resize', () => {
- chart.resize();
- });
- chart.setOption({
- title: {
- text: all + '(个)',
- subtext: '总数',
- x,
- y,
- textStyle: {
- fontSize: 16,
- fontWeight: 'normal',
- color: '#fff',
- },
- subtextStyle: {
- fontSize: 20,
- fontWeight: 'normal',
- align: 'center',
- color: '#fff',
- },
- },
- tooltip: {
- // formatter: `{a} {c} <br/> {b}({d}%)`,
- formatter: params => {
- return params.name + ': ' + params.value + '(个)' + '<br/>' + '占比:' + ((params.value / all) * 100).toFixed(2) + '%';
- },
- padding: [10, 10],
- axisPointer: {
- type: 'shadow',
- shadowStyle: {
- color: 'rgba(67,100,247,0.08)',
- },
- },
- },
- legend: {
- icon: 'circle',
- align: 'left',
- orient: 'vertical',
- x: 'right',
- y: 'center',
- padding,
- show: false,
- formatter: function (name) {
- let total = 0;
- let tarValue;
- let arr = name;
- for (let i = 0; i < xData.length; i++) {
- total += xData[i].value;
- // if (name.length > 20) {
- // name =name.slice(20, name.length) + "...";
- // xData[i].name=arr.slice(20, arr.length) + "...";
- // }
- if (xData[i].name == name) {
- tarValue = xData[i].value;
- }
- }
- return `${name} ${tarValue}(个)`;
- },
- },
-
- series: [
- {
- avoidLabelOverlap: 10,
- label: {
- show: true, // 设置为false,否则会重复
- },
- emphasis: {
- label: {
- show: false, // 显示
- },
- },
- labelLine: {
- show: true,
- },
- type,
- // name: xData[0].name,
- radius: ['40%', '70%'],
- center,
- data: xData,
- itemStyle,
- },
- ],
- });
- };
- onMounted(() => {
- initM();
- });
- </script>
-
- <style lang="scss" scoped>
- .asset_echart {
- // width: 498px;
- height: calc(100% - 20px);
- // margin: 10px 14px 0 16px;
-
- &_echart {
- width: 100%;
- height: 100%;
- }
- }
- </style>