<template> <div id="ZiDanTu02"></div> </template>
<script setup> import { onMounted } from 'vue' import { Bullet } from '@antv/g2plot' const bulletPlot = ref(null); const props = defineProps({ data: { type: Array,} })
watch(() => props.data, (newVal, oldVal) => { bulletPlot.value.changeData(newVal); })
onMounted(() => { bulletPlot.value = new Bullet('ZiDanTu02', { data: props.data, measureField: 'measures', rangeField: 'ranges', targetField: 'target', xField: 'title', color: { range: ['#FFbcb8', '#FFe0b0', '#bfeec8'], measure: '#5B8FF9', target: '#39a3f4' }, label: { measure: { position: 'middle', style: { fill: '#fff' } } }, xAxis: { line: null }, yAxis: false, // 自定义 legend legend: { custom: true, position: 'bottom', items: [ { value: '30%', name: '30%', marker: { symbol: 'square', style: { fill: '#FFbcb8', r: 5 } } }, { value: '60%', name: '60%', marker: { symbol: 'square', style: { fill: '#FFe0b0', r: 5 } } }, { value: '90%', name: '90%', marker: { symbol: 'square', style: { fill: '#bfeec8', r: 5 } } }, { value: '实际进度', name: '实际进度', marker: { symbol: 'square', style: { fill: '#5B8FF9', r: 5 } } }, // { // value: '目标值', // name: '目标值', // marker: { symbol: 'line', style: { stroke: '#39a3f4', r: 5 } } // } ] } }); bulletPlot.value.render() }) </script>
|