135 lines
9.5 KiB
Vue
135 lines
9.5 KiB
Vue
<template>
|
|
<div class="go-title-09">
|
|
<svg :width="w" :height="h">
|
|
<title>小背景</title>
|
|
<defs>
|
|
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradientTopTitle01-1">
|
|
<stop :stop-color="colors[0]" stop-opacity="0.350515939" offset="0%"></stop>
|
|
<stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
|
|
</linearGradient>
|
|
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradientTopTitle01-2">
|
|
<stop :stop-color="colors[0]" stop-opacity="0.350515939" offset="0%"></stop>
|
|
<stop :stop-color="colors[1]" stop-opacity="0" offset="100%"></stop>
|
|
</linearGradient>
|
|
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradientTopTitle01-3">
|
|
<stop :stop-color="colors[2]" stop-opacity="0" offset="0%"></stop>
|
|
<stop :stop-color="colors[3]" offset="100%"></stop>
|
|
</linearGradient>
|
|
<linearGradient x1="50%" y1="100%" x2="50%" y2="6.16297582e-31%" id="linearGradientTopTitle01-4">
|
|
<stop :stop-color="colors[4]" offset="0%"></stop>
|
|
<stop :stop-color="colors[5]" stop-opacity="0" offset="100%"></stop>
|
|
</linearGradient>
|
|
<linearGradient x1="50%" y1="34.4280403%" x2="50%" y2="100%" id="linearGradientTopTitle01-5">
|
|
<stop :stop-color="colors[6]" stop-opacity="0" offset="0%"></stop>
|
|
<stop :stop-color="colors[7]" offset="100%"></stop>
|
|
</linearGradient>
|
|
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradientTopTitle01-6">
|
|
<stop :stop-color="colors[6]" stop-opacity="0" offset="0%"></stop>
|
|
<stop :stop-color="colors[7]" offset="100%"></stop>
|
|
</linearGradient>
|
|
<linearGradient x1="100%" y1="50%" x2="13.6616714%" y2="50%" id="linearGradientTopTitle01-7">
|
|
<stop :stop-color="colors[8]" offset="0%"></stop>
|
|
<stop :stop-color="colors[9]" stop-opacity="0" offset="100%"></stop>
|
|
</linearGradient>
|
|
<linearGradient x1="100%" y1="50%" x2="13.6616714%" y2="50%" id="linearGradientTopTitle01-8">
|
|
<stop :stop-color="colors[8]" offset="0%"></stop>
|
|
<stop :stop-color="colors[9]" stop-opacity="0" offset="100%"></stop>
|
|
</linearGradient>
|
|
<linearGradient x1="97.85155%" y1="50%" x2="0%" y2="50%" id="linearGradientTopTitle01-9">
|
|
<stop :stop-color="colors[8]" stop-opacity="0" offset="0%"></stop>
|
|
<stop :stop-color="colors[8]" offset="40.046916%"></stop>
|
|
<stop :stop-color="colors[9]" stop-opacity="0" offset="100%"></stop>
|
|
</linearGradient>
|
|
<linearGradient x1="100%" y1="50%" x2="13.6616714%" y2="50%" id="linearGradientTopTitle01-10">
|
|
<stop :stop-color="colors[8]" offset="0%"></stop>
|
|
<stop :stop-color="colors[9]" stop-opacity="0" offset="100%"></stop>
|
|
</linearGradient>
|
|
<linearGradient x1="100%" y1="50%" x2="13.6616714%" y2="50%" id="linearGradientTopTitle01-11">
|
|
<stop :stop-color="colors[8]" offset="0%"></stop>
|
|
<stop :stop-color="colors[9]" stop-opacity="0" offset="100%"></stop>
|
|
</linearGradient>
|
|
<linearGradient x1="97.85155%" y1="50%" x2="0%" y2="50%" id="linearGradientTopTitle01-12">
|
|
<stop :stop-color="colors[8]" stop-opacity="0" offset="0%"></stop>
|
|
<stop :stop-color="colors[8]" offset="40.046916%"></stop>
|
|
<stop :stop-color="colors[9]" stop-opacity="0" offset="100%"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g id="林业防火-智览-切图版" transform="translate(3, -1)">
|
|
<g id="可视化" transform="translate(-11, -21)">
|
|
<g id="大标题top" transform="translate(8, 22)">
|
|
<g id="小背景" transform="translate(0, 1)">
|
|
<rect id="矩形" fill="url(#linearGradientTopTitle01-1)" x="0" y="0" width="960" height="71"></rect>
|
|
<rect id="矩形" fill="url(#linearGradientTopTitle01-2)" transform="translate(1440, 32) scale(-1, 1) translate(-1440, -32)" x="960" y="0" width="960" height="64"></rect>
|
|
<g id="编组-3" transform="translate(616.358, 0)">
|
|
<polygon id="矩形" fill="url(#linearGradientTopTitle01-3)" points="0 0 684.1949 0 689.281998 0 660.981164 48 585.119147 48 574.2235 63 363.735551 63 357.061342 56.8743247 326.45026 56.8743247 319.798678 63 118.538529 63 109.029264 50 32.2658942 50"></polygon>
|
|
<polygon id="矩形" stroke="url(#linearGradientTopTitle01-4)" points="0 0 688.283039 0 660.981164 48 585.187128 48 574.2235 63 363.735551 63 357.131925 57 326.45026 57 319.798678 63 118.538529 63 108.822252 50 32.2658942 50"></polygon>
|
|
<polygon id="矩形" fill="url(#linearGradientTopTitle01-5)" points="41.9562955 59 652.320499 59 649.323621 71 47.950052 71"></polygon>
|
|
<path d="M101.542462,69 L592.958441,69 C593.510726,69 593.958441,69.4477153 593.958441,70 C593.958441,70.1153807 593.938473,70.229891 593.899421,70.3384619 L591.683172,76.5 C590.064691,80.9996477 585.796952,84 581.015079,84 L116.14177,84 C110.948502,84 106.187304,81.1083281 103.792864,76.5 L100.655097,70.4610661 C100.400457,69.9709875 100.591318,69.367274 101.081396,69.1126342 C101.223819,69.0386328 101.381962,69 101.542462,69 Z" id="矩形备份-10" fill="url(#linearGradientTopTitle01-6)" opacity="0.480741228"></path>
|
|
<polygon id="矩形" :fill="colors[10]" points="327.849104 59.4905529 355.899358 59.4905529 360.79665 64 322.663892 64"></polygon>
|
|
</g>
|
|
<g id="小菱形" transform="translate(656.2955, 55)" :fill="colors[7]">
|
|
<polygon id="矩形" points="4.60306437e-19 0 13.6902458 0 16.9823101 5 3.29206432 5"></polygon>
|
|
<polygon id="矩形备份-8" points="20.9781478 0 34.6683935 0 37.9604579 5 24.2702121 5"></polygon>
|
|
<polygon id="矩形备份-9" points="41.9562955 0 55.6465413 0 58.9386056 5 45.2483598 5"></polygon>
|
|
</g>
|
|
<g id="小菱形" transform="translate(1237.232, 57.5) scale(-1, 1) translate(-1237.232, -57.5)translate(1207.7627, 55)" :fill="colors[7]">
|
|
<polygon id="矩形" points="4.60306437e-19 0 13.6902458 0 16.9823101 5 3.29206432 5"></polygon>
|
|
<polygon id="矩形备份-8" points="20.9781478 0 34.6683935 0 37.9604579 5 24.2702121 5"></polygon>
|
|
<polygon id="矩形备份-9" points="41.9562955 0 55.6465413 0 58.9386056 5 45.2483598 5"></polygon>
|
|
</g>
|
|
<g id="编组-4" transform="translate(0, 10)">
|
|
<polygon id="矩形" :fill="colors[8]" points="611.363163 14 621.77498 14 629.344433 25 618.932617 25"></polygon>
|
|
<polygon id="矩形备份-11" fill="url(#linearGradientTopTitle01-7)" points="428.55359 14 606.871114 14 614.360042 25 436.042517 25"></polygon>
|
|
<polygon id="矩形备份-12" fill="url(#linearGradientTopTitle01-8)" opacity="0.307911464" points="-4.85168379e-13 0 613.164074 0 629.344433 25 25.6193658 25"></polygon>
|
|
<polyline id="路径-12备份" stroke="url(#linearGradientTopTitle01-9)" points="631.342352 2 426.170439 2 408.13428 20 122.872008 20"></polyline>
|
|
<polyline id="路径-12备份-2" stroke="url(#linearGradientTopTitle01-9)" points="620.353798 7 415.181885 7 397.145727 25 111.883455 25"></polyline>
|
|
</g>
|
|
<g id="编组-4" transform="translate(1604.3288, 22.5) scale(-1, 1) translate(-1604.3288, -22.5)translate(1290.6556, 10)">
|
|
<polygon id="矩形" :fill="colors[8]" points="607.367326 14 617.779142 14 625.348595 25 614.936779 25"></polygon>
|
|
<polygon id="矩形备份-11" fill="url(#linearGradientTopTitle01-10)" points="425.556712 14 602.91554 14 610.364204 25 433.005376 25"></polygon>
|
|
<polygon id="矩形备份-12" fill="url(#linearGradientTopTitle01-11)" opacity="0.307911464" points="-4.82087945e-13 0 609.270968 0 625.348595 25 25.4567031 25"></polygon>
|
|
<polyline id="路径-12备份" stroke="url(#linearGradientTopTitle01-12)" points="627.346514 2 423.383866 2 405.454011 20 121.873049 20"></polyline>
|
|
<polyline id="路径-12备份-2" stroke="url(#linearGradientTopTitle01-12)" points="616.35796 7 412.395312 7 394.465457 25 110.884495 25"></polyline>
|
|
</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
|
|
} = toRefs(props.chartConfig.option)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@include go('title-09') {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
svg {
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
|
|
}
|
|
</style>
|