- <template>
- <div>
- <div ref="assetEchart" class="asset_echart"></div>
- </div>
- </template>
- <script setup>
- import { init } from 'echarts';
- import 'echarts-liquidfill/src/liquidFill.js';
-
- const assetEchart = ref(null);
- const props = defineProps({
- data: {
- type: Array,
- },
- });
- props.data.xData.reduce((n, v) => {
- return n + v.itemScore;
- }, 0);
- const initM = () => {
- const chart = init(assetEchart.value);
- window.addEventListener('resize', () => {
- chart.resize();
- });
- chart.setOption({
- title: [
- {
- text: props.data.xData[0]?.itemContent,
- x: '10%',
- y: '79%',
- textStyle: {
- fontSize: 14,
- fontWeight: '100',
- color: '#fff',
- lineHeight: 16,
- textAlign: 'center',
- },
- },
- {
- text: props.data.xData[1]?.itemContent,
- x: '61%',
- y: '79%',
- textStyle: {
- fontSize: 14,
- fontWeight: '100',
- color: '#fff',
- lineHeight: 16,
- textAlign: 'center',
- },
- },
- ],
- series: [
- {
- type: 'liquidFill',
- radius: '57%',
- center: ['25%', '45%'],
- color: [
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: '#0e3f6a ',
- opacity: '0.6',
- },
- {
- offset: 1,
- color: '#2ecefc ',
- opacity: '0.9',
- },
- ],
- globalCoord: true,
- },
- ],
- data: [props.data.xData[0]?.realScore], // data个数代表波浪数
- backgroundStyle: {
- borderWidth: 1,
- color: '#1e5187',
- opacity: '0.3',
- },
- label: {
- textStyle: {
- fontSize: 14,
- color: '#0f406a',
- },
- formatter: function (param) {
- return props.data.xData[0]?.standardFlag == 1 ? '已完成' : '未完成' + '\n' + '总数' + (props.data.xData[0]?.itemScore || 0);
- },
- },
- outline: {
- borderDistance: 12,
- itemStyle: {
- borderWidth: 7,
- borderColor: '#3077a7',
- opacity: '0.9',
- },
- },
- },
- {
- //第二个球的填充
- type: 'liquidFill',
- radius: '57%',
- center: ['80%', '45%'],
- color: [
- {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: '#0e3f6a',
- opacity: '0.6',
- },
- {
- offset: 1,
- color: '#2ecefc',
- opacity: '0.9',
- },
- ],
- globalCoord: false,
- },
- ],
- data: [props.data.xData[1]?.standardFlag == 1 ? 1 : 0], // data个数代表波浪数
- // data: [props.data[1]?.realValue/props.data[1]?.itemScore], // data个数代表波浪数
- backgroundStyle: {
- borderWidth: 1,
- color: '#1e5187',
- opacity: '0.3',
- },
- label: {
- textStyle: {
- fontSize: 14,
- color: '#fff',
- },
- formatter: function (param) {
- return (param.value * 100 || 0) + '%' + '\n' + '总数' + (props.data.xData[1]?.itemScore || 0);
- },
- },
- outline: {
- // show: false
- borderDistance: 12,
- itemStyle: {
- borderWidth: 7,
- borderColor: '#3077a7',
- opacity: '0.9',
- },
- },
- },
- ],
- });
- };
-
- onMounted(() => {
- setTimeout(() => {
- initM();
- }, 100);
- });
- </script>
-
- <style lang="scss" scoped>
- .asset_echart {
- width: 480px;
- height: 280px;
- // margin: 10px 14px 0 16px;
- &_echart {
- width: 100%;
- height: 100%;
- }
- }
- </style>