118 lines
6.9 KiB
Vue
118 lines
6.9 KiB
Vue
<template>
|
|
<div class="go-title-03">
|
|
<svg :width="w" :height="h">
|
|
<title>小标题-三站覆盖面积@2x</title>
|
|
<defs>
|
|
<linearGradient x1="97.3499803%" y1="112.35863%" x2="0%" y2="112.35863%" :id="`1-${boxId}`">
|
|
<stop :stop-color="colors[0]" stop-opacity="0.1742622" offset="0%"></stop>
|
|
<stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
|
|
</linearGradient>
|
|
<linearGradient x1="0%" y1="50%" x2="100%" y2="50%" :id="`2-${boxId}`">
|
|
<stop :stop-color="colors[2]" offset="0%"></stop>
|
|
<stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
|
|
</linearGradient>
|
|
<polygon id="path-3" points="10.9822114 0 112.704666 0 119.46341 11.2799213 173.1989 11.2799213 270.2884 11.2799213 270.2884 38.3517324 139.186577 38.3517324 0 38.3517324 0 11.1814815"></polygon>
|
|
<radialGradient cx="50%" cy="0%" fx="50%" fy="0%" r="100%" gradientTransform="translate(0.5, 0), scale(0.243, 1), rotate(90), scale(1, 2.7755), translate(-0.5, -0)" :id="`5-${boxId}`">
|
|
<stop :stop-color="colors[3]" offset="0%"></stop>
|
|
<stop :stop-color="colors[4]" stop-opacity="0" offset="100%"></stop>
|
|
</radialGradient>
|
|
<filter x="-3.0%" y="-12.5%" width="106.1%" height="124.9%" filterUnits="objectBoundingBox" :id="`6-${boxId}`">
|
|
<feGaussianBlur stdDeviation="4.31844888" in="SourceGraphic"></feGaussianBlur>
|
|
</filter>
|
|
<linearGradient x1="27.2222213%" y1="49.528366%" x2="102.926609%" y2="50.2892453%" :id="`7-${boxId}`">
|
|
<stop :stop-color="colors[5]" offset="0%"></stop>
|
|
<stop :stop-color="colors[6]" stop-opacity="0" offset="100%"></stop>
|
|
</linearGradient>
|
|
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`8-${boxId}`">
|
|
<stop :stop-color="colors[7]" stop-opacity="0" offset="0%"></stop>
|
|
<stop :stop-color="colors[8]" offset="100%"></stop>
|
|
</linearGradient>
|
|
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" :id="`9-${boxId}`">
|
|
<stop :stop-color="colors[9]" stop-opacity="0" offset="0%"></stop>
|
|
<stop stop-color="#1CC370" offset="100%"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g id="林业防火-智览-切图版" transform="translate(-1492, -409)">
|
|
<g id="可视化" transform="translate(-11, -21)">
|
|
<g id="A" transform="translate(1502.5, 113)">
|
|
<g id="标题模块--右侧2" transform="translate(0, 318)">
|
|
<g id="小标题-三站覆盖面积" transform="translate(1.5, 0)">
|
|
<g id="小标题">
|
|
<polygon id="矩形" :fill="`url(#1-${boxId})`" points="10.3064025 0 166.362718 0 176.570151 13.6763066 255.888803 13.6763066 399.202062 13.6763066 399.201597 38.3517324 205.452516 38.3517324 0 38.3517324 0 11.1814815"></polygon>
|
|
<g id="椭圆形">
|
|
<mask id="mask-4" fill="white">
|
|
<use xlink:href="#path-3"></use>
|
|
</mask>
|
|
<use id="蒙版" :fill="`url(#2-${boxId})`" xlink:href="#path-3"></use>
|
|
<ellipse :fill="`url(#5-${boxId})`" :filter="`url(#6-${boxId})`" mask="url(#mask-4)" cx="180.697047" cy="25.5190419" rx="214" ry="52"></ellipse>
|
|
</g>
|
|
<polyline id="路径" :stroke="`url(#7-${boxId})`" stroke-width="0.616921269" points="0 25.7188334 0 11.1814815 11.0190925 0 177.866737 0 188.53316 13.2759293 264.809581 13.2759293"></polyline>
|
|
<polygon id="矩形" :fill="`url(#8-${boxId})`" points="118.3 2.99401198 393.561275 2.99401198 393.561275 9.76196476 122.229351 9.76196476"></polygon>
|
|
<polygon id="路径-11" fill="#EBBE10" points="0 0 0 7.33194884 7.88666648 0"></polygon>
|
|
<g id="编组-2" opacity="0.691816057" transform="translate(370.7821, 6.5393) scale(-1, -1) translate(-370.7821, -6.5393)translate(345.3094, 3.992)" fill="#00C157">
|
|
<polygon id="矩形" opacity="0.558652605" points="46.5583547 0 50.945502 0 46.48422 5.0945502 42.0970727 5.0945502"></polygon>
|
|
<polygon id="矩形备份" opacity="0.385865711" points="38.2461939 0 42.6333411 0 38.1720591 5.0945502 33.7849118 5.0945502"></polygon>
|
|
<polygon id="矩形备份-2" opacity="0.321045648" points="29.6658988 0 34.0530461 0 29.5917641 5.0945502 25.2046168 5.0945502"></polygon>
|
|
<polygon id="矩形备份-3" opacity="0.191528" points="21.3537379 0 25.7408852 0 21.2796032 5.0945502 16.8924559 5.0945502"></polygon>
|
|
<polygon id="矩形备份-4" opacity="0.123233" points="12.5053086 0 16.8924559 0 12.4311739 5.0945502 8.04402663 5.0945502"></polygon>
|
|
<polygon id="矩形备份-5" opacity="0.097781" points="4.46128201 0 8.84842929 0 4.38714728 5.0945502 0 5.0945502"></polygon>
|
|
</g>
|
|
</g>
|
|
<g id="装饰线" transform="translate(7.3051, 36.5255)">
|
|
<polygon id="矩形" fill="#EBBE10" points="1.58053304 0 11.6250344 0 10.0445013 1.82627297 0 1.82627297"></polygon>
|
|
<polygon id="矩形备份-13" fill="#4FE985" points="14.4276265 0 24.4721279 0 22.8284122 1.82627297 12.7839108 1.82627297"></polygon>
|
|
<polygon id="矩形备份-14" :fill="`url(#9-${boxId})`" points="27.2666802 0 390.822416 0 390.822416 1.82627297 25.5678216 1.82627297"></polygon>
|
|
</g>
|
|
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { PropType, toRefs } from 'vue'
|
|
import { CreateComponentType } from '@/packages/index.d'
|
|
|
|
const props = defineProps({
|
|
chartConfig: {
|
|
type: Object as PropType<CreateComponentType>,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const { w, h } = toRefs(props.chartConfig.attr)
|
|
const {
|
|
colors,
|
|
boxId
|
|
} = toRefs(props.chartConfig.option)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@include go('title-03') {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
svg {
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
.fill {
|
|
fill: v-bind('colors[0]');
|
|
}
|
|
.fill-none {
|
|
fill: none;
|
|
}
|
|
.stroke {
|
|
stroke: v-bind('colors[1]');
|
|
}
|
|
}
|
|
</style>
|