- <template>
- <div class="standard_condition">
- <barChart
- :echartData="echartData"
- yAxisName="百分比/%"
- :tooltipFormatter="tooltipFormatter"
- ref="barChartRef"
- v-if="echartData.xAxisData.length"
- />
- </div>
- </template>
-
- <script setup>
- import {} from 'vue';
- import barChart from '@/components/Echarts/barChart.vue';
- const props = defineProps({
- data: {
- type: Object,
- default: () => ({}),
- },
- });
- const { data } = props;
- const targetyAxis = data.targetyAxis.map(item => (item * 1 > 0 ? item : 0));
- const realityyAxis = data.realityyAxis.map(item => (item * 1 > 0 ? item : 0));
- const echartData = {
- xAxisData: data.xaxis,
- yAxisOption: {
- min: 0,
- max: Math.ceil(Math.max(...targetyAxis, ...realityyAxis) / 100) * 100 || 10,
- },
- seriesData: [
- {
- type: 'bar',
- name: '目标',
- barWidth: 16,
- barMinHeight: 2,
- itemStyle: {
- color: '#5470c6',
- },
- label: {
- show: true,
- color: '#c6c6c6',
- position: 'top',
- distance: 0,
- fontWeight: 'bold',
- },
- data: targetyAxis,
- },
- {
- type: 'bar',
- name: '设计',
- barWidth: 16,
- barMinHeight: 2,
- barGap: '60%',
- itemStyle: {
- color: '#91cc75',
- },
- label: {
- show: true,
- color: '#c6c6c6',
- position: 'top',
- distance: 0,
- fontWeight: 'bold',
- },
- data: realityyAxis,
- },
- ],
- };
-
- const tooltipFormatter = params => {
- const dataIndex = params[0].dataIndex;
- return `<div style="margin: 0px 0 0;line-height:1;min-width: 140px">
- <div>${params[0].axisValue}</div>
- <div style="margin-top:10px">
- <div style="display: flex;align-items: center;justify-content: space-between">
- <div style="display: flex;align-items: center;">
- <span style="background-color: ${params[0].color};width:10px;height:10px;margin-right:5px;border-radius: 50%"></span>
- <span>${params[0].seriesName}</span>
- </div>
- <div style="color:#666;font-weight:900;font-size:14px">${params[0].value}</div>
- </div>
- </div>
- <div style="margin-top:10px">
- <div style="display: flex;align-items: center;justify-content: space-between">
- <div style="display: flex;align-items: center;">
- <span style="background-color: ${params[1].color};width:10px;height:10px;margin-right:5px;border-radius: 50%"></span>
- <span>${params[1].seriesName}</span>
- </div>
- <div style="color:#666;font-weight:900;font-size:14px">${params[1].value}</div>
- </div>
- </div>
- <div style="margin-top:10px">
- <div style="display: flex;align-items: center;justify-content: space-between">
- <div style="display: flex;align-items: center;">
- <span style="background-color: #fac858;width:10px;height:10px;margin-right:5px;border-radius: 50%"></span>
- <span>是否达标</span>
- </div>
- <div style="color:#666;font-weight:900;font-size:14px">${data.resultyAxis[dataIndex]}</div>
- </div>
- </div>
- </div>`;
- };
- </script>
-
- <style lang="scss" scoped>
- .standard_condition {
- height: 300px;
- }
- </style>