简柏林 / thingskit-view · Commits

Commit 6a033c4933d74bf3855f34ac6ff1ba67f13a3bb8

Authored by xp.Huang
2 parents 1fca59cb cdc7df4b

Merge branch 'ft' into 'main_dev' 

pref: 优化部分组件配置和修改部分问题

See merge request yunteng/thingskit-view!100
Inline Side-by-side
Showing 39 changed files with 704 additions and 474 deletions
@@ -7,7 +7,8 @@ enum Api { @@ -7,7 +7,8 @@ enum Api {
7 DOWNLOAD = '/oss/download_file/', 7 DOWNLOAD = '/oss/download_file/',
8 AREALIST = '/area/list', 8 AREALIST = '/area/list',
9 PLATFORM = '/platform/get', 9 PLATFORM = '/platform/get',
10 - CONFIGURATION = '/configuration/center' 10 + CONFIGURATION = '/configuration/center',
  11 + CONFIGURATION_SHARE = '/configuration/center/share/'
11 } 12 }
12 13
13 export const getDictItemByCode = (value: string) => { 14 export const getDictItemByCode = (value: string) => {
@@ -45,3 +46,10 @@ export const getPlatformInfo = () => defHttp.get({ url: Api.PLATFORM }) @@ -45,3 +46,10 @@ export const getPlatformInfo = () => defHttp.get({ url: Api.PLATFORM })
45 export const getConfigurationList = (params: object) => { 46 export const getConfigurationList = (params: object) => {
46 return defHttp.get({ url: `${Api.CONFIGURATION}`, params }) 47 return defHttp.get({ url: `${Api.CONFIGURATION}`, params })
47 } 48 }
  49 +//组态设置是否公开或私有
  50 +export const setConfigurationIsShare = (params: string,isShare:boolean,data:object) => {
  51 + return defHttp.post({
  52 + url: `${Api.CONFIGURATION_SHARE}${params}?isShare=${isShare}`,
  53 + data
  54 + })
  55 +}
1 import { RequestContentTypeEnum } from "@/enums/external/httpEnum"; 1 import { RequestContentTypeEnum } from "@/enums/external/httpEnum";
2 import { CreateComponentType } from "@/packages/index.d"; 2 import { CreateComponentType } from "@/packages/index.d";
3 -import { useSocketStore } from "@/store/external/modules/socketStore";  
4 -import { SocketReceiveMessageType } from "@/store/external/modules/socketStore.d"; 3 +import { useSocketStore} from "@/store/external/modules/socketStore";
  4 +import { SocketReceiveMessageType,SocketSendMessageType } from "@/store/external/modules/socketStore.d";
5 import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore"; 5 import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
6 import { getJwtToken, getShareJwtToken } from "@/utils/external/auth"; 6 import { getJwtToken, getShareJwtToken } from "@/utils/external/auth";
7 import { useWebSocket, WebSocketResult } from "@vueuse/core"; 7 import { useWebSocket, WebSocketResult } from "@vueuse/core";
8 -import { onMounted, unref } from "vue"; 8 +import {onMounted, ref, unref} from "vue";
9 import { ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d"; 9 import { ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d";
10 import { isShareMode } from "@/views/share/hook"; 10 import { isShareMode } from "@/views/share/hook";
11 11
12 12
  13 +
13 interface SocketConnectionPoolType { 14 interface SocketConnectionPoolType {
14 ws: WebSocketResult<SocketReceiveMessageType> 15 ws: WebSocketResult<SocketReceiveMessageType>
15 url: string 16 url: string
16 } 17 }
17 18
  19 +interface SaveHistoryWsMessage{
  20 + id: string
  21 + message: SocketSendMessageType
  22 +}
  23 +
18 const socketConnectionPool: SocketConnectionPoolType[] = [] 24 const socketConnectionPool: SocketConnectionPoolType[] = []
19 25
  26 +const saveHistoryWsMessage=ref([] as SaveHistoryWsMessage[])
  27 +
20 const parse = (value: string) => { 28 const parse = (value: string) => {
21 try { 29 try {
22 return JSON.parse(value) 30 return JSON.parse(value)
@@ -88,13 +96,45 @@ export const useChartDataSocket = () => { @@ -88,13 +96,45 @@ export const useChartDataSocket = () => {
88 const { subscribeMessage } = message 96 const { subscribeMessage } = message
89 const { send, data } = getSocketInstance(request) 97 const { send, data } = getSocketInstance(request)
90 send(JSON.stringify(subscribeMessage)) 98 send(JSON.stringify(subscribeMessage))
  99 + /**
  100 + * 修改删除组件时，ws还在发送信息问题
  101 + */
  102 + saveHistoryWsMessage.value.push({
  103 + id: targetComponent.id,
  104 + message: subscribeMessage
  105 + })
  106 + //
91 return socketStore.getComponentValueByKeys(targetComponent, parse(unref(data))) 107 return socketStore.getComponentValueByKeys(targetComponent, parse(unref(data)))
92 } 108 }
93 109
  110 + /**
  111 + * 修改删除组件时，ws还在发送信息问题
  112 + * @param targetComponent
  113 + */
  114 + //删除组件 发送断开消息
  115 + const disconnectWs=(targetComponent:CreateComponentType)=>{
  116 + try{
  117 + saveHistoryWsMessage.value.forEach((item)=>{
  118 + if(item.id===targetComponent.id){
  119 + const { request } = unref(targetComponent)
  120 + if((request.requestContentType as RequestContentTypeEnum) !== RequestContentTypeEnum.WEB_SOCKET)return
  121 + const { send } = getSocketInstance(request)
  122 + item.message.tsSubCmds[0].unsubscribe=true
  123 + send(JSON.stringify(item.message))
  124 + }
  125 + })
  126 + }catch (e) {
  127 + console.log(`
  128 + 错误位置：src/hooks/external/useChartDataSocket.ts
  129 + 错误原因：${e}
  130 + `)
  131 + }
  132 + }
94 133
95 return { 134 return {
96 initial, 135 initial,
97 - sendMessage 136 + sendMessage,
  137 + disconnectWs
98 } 138 }
99 } 139 }
100 140
@@ -7,14 +7,11 @@ import { chartInitConfig } from '@/settings/designSetting' @@ -7,14 +7,11 @@ import { chartInitConfig } from '@/settings/designSetting'
7 export const option = { 7 export const option = {
8 dataset: '', 8 dataset: '',
9 attribute: { 9 attribute: {
10 - colors: [  
11 - '#19ecff',  
12 - '#36F7FF',  
13 - '#1FEEFF',  
14 - '#19ECFF',  
15 - '#9FFFFF',  
16 - '#66FFFF',  
17 - ], 10 + bgColor1:'#19ECFF',
  11 + bgColor2:'#36F7FF',
  12 + bgColor3:'#1FEEFF',
  13 + bgColor4:'#9FFFFF',
  14 + bgColor5:'#66FFFF',
18 } 15 }
19 } 16 }
20 17
1 <template> 1 <template>
2 <CollapseItem name="配置" :expanded="true"> 2 <CollapseItem name="配置" :expanded="true">
3 - <SettingItemBox  
4 - :name="`装饰颜色-${index + 1}`"  
5 - v-for="(item, index) in optionData.attribute.colors"  
6 - :key="index"  
7 - > 3 + <SettingItemBox :name="`装饰1`">
8 <SettingItem name="颜色"> 4 <SettingItem name="颜色">
9 - <n-color-picker  
10 - size="small"  
11 - :modes="['hex']"  
12 - v-model:value="optionData.attribute.colors[index]"  
13 - ></n-color-picker> 5 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
14 </SettingItem> 6 </SettingItem>
15 <SettingItem> 7 <SettingItem>
16 - <n-button size="small" @click="optionData.attribute.colors[index] = option.attribute.colors[index]">  
17 - 恢复默认  
18 - </n-button> 8 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#19ECFF'"> 恢复默认 </n-button>
  9 + </SettingItem>
  10 + </SettingItemBox>
  11 + <SettingItemBox :name="`装饰2`">
  12 + <SettingItem name="颜色">
  13 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor2"></n-color-picker>
  14 + </SettingItem>
  15 + <SettingItem>
  16 + <n-button size="small" @click="optionData.attribute.bgColor2 = '#36F7FF'"> 恢复默认 </n-button>
  17 + </SettingItem>
  18 + </SettingItemBox>
  19 + <SettingItemBox :name="`装饰3`">
  20 + <SettingItem name="颜色">
  21 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor3"></n-color-picker>
  22 + </SettingItem>
  23 + <SettingItem>
  24 + <n-button size="small" @click="optionData.attribute.bgColor3 = '#1FEEFF'"> 恢复默认 </n-button>
  25 + </SettingItem>
  26 + </SettingItemBox>
  27 + <SettingItemBox :name="`装饰4`">
  28 + <SettingItem name="颜色">
  29 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor4"></n-color-picker>
  30 + </SettingItem>
  31 + <SettingItem>
  32 + <n-button size="small" @click="optionData.attribute.bgColor4 = '#9FFFFF'"> 恢复默认 </n-button>
  33 + </SettingItem>
  34 + </SettingItemBox>
  35 + <SettingItemBox :name="`装饰5`">
  36 + <SettingItem name="颜色">
  37 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor5"></n-color-picker>
  38 + </SettingItem>
  39 + <SettingItem>
  40 + <n-button size="small" @click="optionData.attribute.bgColor5= '#66FFFF'"> 恢复默认 </n-button>
19 </SettingItem> 41 </SettingItem>
20 </SettingItemBox> 42 </SettingItemBox>
21 </CollapseItem> 43 </CollapseItem>
@@ -29,17 +29,17 @@ @@ -29,17 +29,17 @@
29 <g opacity="0.56" transform="translate(50 191) rotate(0)"> 29 <g opacity="0.56" transform="translate(50 191) rotate(0)">
30 <path 30 <path
31 id="椭圆形" 31 id="椭圆形"
32 - :style="{fill: attribute.colors[0], opacity: 0.5}" 32 + :style="{fill: attribute.bgColor1, opacity: 0.5}"
33 d="M255.253,52.5888c-1.16667,-1.91253 -2.59667,-3.8 -4.29,-5.6624l8.88,-8.072c2.20533,2.4266 4.09,4.92163 5.654,7.4851zM245.635,41.8709c-1.854,-1.53867 -3.88,-3.03637 -6.078,-4.4931l6.629,-10.0027c2.55667,1.6944 4.92767,3.4483 7.113,5.2617zM232.951,33.4091c-2.21467,-1.20953 -4.54367,-2.3739 -6.987,-3.4931l4.997,-10.9099c2.69933,1.2364 5.27967,2.52683 7.741,3.8713zM218.726,26.8647c-2.39467,-0.92887 -4.86567,-1.81297 -7.413,-2.6523l3.756,-11.3972c2.74333,0.90407 5.409,1.85793 7.997,2.8616zM203.848,21.943c-2.51,-0.70207 -5.07233,-1.3602 -7.687,-1.9744l2.744,-11.68201c2.778,0.65263 5.503,1.35264 8.175,2.10001zM188.166,18.2598c-2.538,-0.49047 -5.10933,-0.93957 -7.714,-1.3473l1.856,-11.85563c2.746,0.42981 5.45767,0.90345 8.135,1.42093zM172.485,15.8076c-2.67133,-0.3238 -5.36533,-0.6044 -8.082,-0.8418l1.045,-11.95442c2.85,0.24904 5.677,0.5435 8.481,0.88338zM156.51,14.4017c-2.674,-0.14913 -5.36033,-0.25677 -8.059,-0.3229l0.294,-11.99637c2.82333,0.06918 5.63433,0.18179 8.433,0.33783zM140.252,14.0058c-2.72533,0.018 -5.44067,0.07807 -8.146,0.1802l-0.452,-11.99151c2.82933,-0.10681 5.66867,-0.16963 8.518,-0.18846zM124.115,14.6123c-2.656,0.18367 -5.29333,0.40823 -7.912,0.6737l-1.21,-11.9388c2.746,-0.2784 5.511,-0.51383 8.295,-0.70628zM108.101,16.2467c-2.65133,0.3608 -5.27233,0.76387 -7.863,1.2092l-2.033,-11.82645c2.728,-0.46911 5.48733,-0.8935 8.278,-1.27319zM92.4227,18.9483c-2.67987,0.5642 -5.3112,1.17373 -7.894,1.8286l-2.9492,-11.63197c2.74113,-0.69498 5.5315,-1.34137 8.3711,-1.93918zM77.0008,22.8559c-2.5716,0.77107 -5.07473,1.58673 -7.5094,2.447l-3.9979,-11.3144c2.61707,-0.92473 5.30403,-1.8004 8.0609,-2.627zM62.126,28.1299c-2.47767,1.03173 -4.85403,2.1087 -7.1291,3.2309l-5.3083,-10.7621c2.50347,-1.2348 5.11157,-2.41703 7.8243,-3.5467zM48.1748,35.0426c-2.28713,1.35287 -4.42167,2.7487 -6.4036,4.1875l-7.0498,-9.7108c2.28573,-1.65933 4.73373,-3.26103 7.344,-4.8051zM35.9658,43.9745c-1.8764,1.7418 -3.51937,3.515 -4.9289,5.3196l-9.457,-7.3867c1.803,-2.3084 3.87697,-4.551 6.2219,-6.7278zM27.3622,55.1261c-0.99293,2.05987 -1.67283,4.1292 -2.0397,6.208l-11.8174,-2.0857c0.55893,-3.16687 1.57477,-6.2779 3.0475,-9.3331zM25.1762,67.7125c0.27313,2.09627 0.8639,4.18337 1.7723,6.2613l-10.9951,4.8069c-1.36433,-3.1206 -2.25653,-6.29327 -2.6766,-9.518zM30.3991,79.8654c1.34653,1.82767 2.93273,3.62567 4.7586,5.394l-8.3484,8.62c-2.30513,-2.23253 -4.3289,-4.53123 -6.0713,-6.8961zM40.8452,90.0861c1.9508,1.46533 4.0592,2.88813 6.3252,4.2684l-6.2425,10.2485c-2.59813,-1.58267 -5.02807,-3.22343 -7.2898,-4.9223zM53.9415,98.1118c2.26087,1.14507 4.6263,2.2448 7.0963,3.2992l-4.712,11.036c-2.71027,-1.15667 -5.31237,-2.36667 -7.8063,-3.63zM68.382,104.3c2.43567,0.882 4.94253,1.719 7.5206,2.511l-3.5232,11.471c-2.76693,-0.85 -5.46117,-1.74967 -8.0827,-2.699zM83.3729,108.926c2.56427,0.66733 5.1779,1.28967 7.8409,1.867l-2.5427,11.728c-2.82373,-0.612 -5.5973,-1.27267 -8.3207,-1.982zM99.0787,112.341c2.57687,0.45733 5.18497,0.87267 7.8243,1.246l-1.68,11.882c-2.77867,-0.39267 -5.52567,-0.83 -8.241,-1.312zM114.971,114.586c2.63267,0.28067 5.28533,0.51967 7.958,0.717l-0.885,11.967c-2.80133,-0.20667 -5.58267,-0.45733 -8.344,-0.752zM130.895,115.765c2.69733,0.11467 5.405,0.18733 8.123,0.218l-0.135,11.999c-2.84267,-0.032 -5.675,-0.10767 -8.497,-0.227zM147.226,115.948c2.706,-0.05333 5.4,-0.14867 8.082,-0.286l0.612,11.985c-2.80667,0.14333 -5.62533,0.243 -8.456,0.299zM163.228,115.134c2.70133,-0.22333 5.381,-0.489 8.039,-0.797l1.383,11.92c-2.78933,0.32333 -5.60067,0.602 -8.434,0.836zM179.27,113.269c2.61733,-0.39533 5.20167,-0.83233 7.753,-1.311l2.213,11.794c-2.69067,0.50467 -5.41467,0.96567 -8.172,1.383zM194.974,110.306c2.632,-0.60133 5.21267,-1.24667 7.742,-1.936l3.158,11.577c-2.69067,0.73333 -5.43333,1.41933 -8.228,2.058zM210.162,106.162c2.55867,-0.822 5.043,-1.689 7.453,-2.601l4.247,11.224c-2.60067,0.98333 -5.277,1.91733 -8.029,2.802zM224.914,100.559c2.45333,-1.09647 4.79633,-2.2381 7.029,-3.4249l5.633,10.5949c-2.474,1.316 -5.06267,2.578 -7.766,3.786zM238.611,93.2399c2.22333,-1.42993 4.28,-2.9014 6.17,-4.4144l7.5,9.3674c-2.214,1.77207 -4.60733,3.48543 -7.18,5.1401zM250.238,83.8526c1.73467,-1.82093 3.21667,-3.6684 4.446,-5.5424l10.033,6.5825c-1.626,2.479 -3.55567,4.89097 -5.789,7.2359zM257.727,72.2616c0.73667,-2.08967 1.15367,-4.1889 1.251,-6.2977l11.987,0.5523c-0.15133,3.2872 -0.79133,6.53193 -1.92,9.7342zM259,65c0,-2.1188 -0.32133,-4.2272 -0.964,-6.3252l11.473,-3.5153c0.994,3.24353 1.491,6.5237 1.491,9.8405z" 33 d="M255.253,52.5888c-1.16667,-1.91253 -2.59667,-3.8 -4.29,-5.6624l8.88,-8.072c2.20533,2.4266 4.09,4.92163 5.654,7.4851zM245.635,41.8709c-1.854,-1.53867 -3.88,-3.03637 -6.078,-4.4931l6.629,-10.0027c2.55667,1.6944 4.92767,3.4483 7.113,5.2617zM232.951,33.4091c-2.21467,-1.20953 -4.54367,-2.3739 -6.987,-3.4931l4.997,-10.9099c2.69933,1.2364 5.27967,2.52683 7.741,3.8713zM218.726,26.8647c-2.39467,-0.92887 -4.86567,-1.81297 -7.413,-2.6523l3.756,-11.3972c2.74333,0.90407 5.409,1.85793 7.997,2.8616zM203.848,21.943c-2.51,-0.70207 -5.07233,-1.3602 -7.687,-1.9744l2.744,-11.68201c2.778,0.65263 5.503,1.35264 8.175,2.10001zM188.166,18.2598c-2.538,-0.49047 -5.10933,-0.93957 -7.714,-1.3473l1.856,-11.85563c2.746,0.42981 5.45767,0.90345 8.135,1.42093zM172.485,15.8076c-2.67133,-0.3238 -5.36533,-0.6044 -8.082,-0.8418l1.045,-11.95442c2.85,0.24904 5.677,0.5435 8.481,0.88338zM156.51,14.4017c-2.674,-0.14913 -5.36033,-0.25677 -8.059,-0.3229l0.294,-11.99637c2.82333,0.06918 5.63433,0.18179 8.433,0.33783zM140.252,14.0058c-2.72533,0.018 -5.44067,0.07807 -8.146,0.1802l-0.452,-11.99151c2.82933,-0.10681 5.66867,-0.16963 8.518,-0.18846zM124.115,14.6123c-2.656,0.18367 -5.29333,0.40823 -7.912,0.6737l-1.21,-11.9388c2.746,-0.2784 5.511,-0.51383 8.295,-0.70628zM108.101,16.2467c-2.65133,0.3608 -5.27233,0.76387 -7.863,1.2092l-2.033,-11.82645c2.728,-0.46911 5.48733,-0.8935 8.278,-1.27319zM92.4227,18.9483c-2.67987,0.5642 -5.3112,1.17373 -7.894,1.8286l-2.9492,-11.63197c2.74113,-0.69498 5.5315,-1.34137 8.3711,-1.93918zM77.0008,22.8559c-2.5716,0.77107 -5.07473,1.58673 -7.5094,2.447l-3.9979,-11.3144c2.61707,-0.92473 5.30403,-1.8004 8.0609,-2.627zM62.126,28.1299c-2.47767,1.03173 -4.85403,2.1087 -7.1291,3.2309l-5.3083,-10.7621c2.50347,-1.2348 5.11157,-2.41703 7.8243,-3.5467zM48.1748,35.0426c-2.28713,1.35287 -4.42167,2.7487 -6.4036,4.1875l-7.0498,-9.7108c2.28573,-1.65933 4.73373,-3.26103 7.344,-4.8051zM35.9658,43.9745c-1.8764,1.7418 -3.51937,3.515 -4.9289,5.3196l-9.457,-7.3867c1.803,-2.3084 3.87697,-4.551 6.2219,-6.7278zM27.3622,55.1261c-0.99293,2.05987 -1.67283,4.1292 -2.0397,6.208l-11.8174,-2.0857c0.55893,-3.16687 1.57477,-6.2779 3.0475,-9.3331zM25.1762,67.7125c0.27313,2.09627 0.8639,4.18337 1.7723,6.2613l-10.9951,4.8069c-1.36433,-3.1206 -2.25653,-6.29327 -2.6766,-9.518zM30.3991,79.8654c1.34653,1.82767 2.93273,3.62567 4.7586,5.394l-8.3484,8.62c-2.30513,-2.23253 -4.3289,-4.53123 -6.0713,-6.8961zM40.8452,90.0861c1.9508,1.46533 4.0592,2.88813 6.3252,4.2684l-6.2425,10.2485c-2.59813,-1.58267 -5.02807,-3.22343 -7.2898,-4.9223zM53.9415,98.1118c2.26087,1.14507 4.6263,2.2448 7.0963,3.2992l-4.712,11.036c-2.71027,-1.15667 -5.31237,-2.36667 -7.8063,-3.63zM68.382,104.3c2.43567,0.882 4.94253,1.719 7.5206,2.511l-3.5232,11.471c-2.76693,-0.85 -5.46117,-1.74967 -8.0827,-2.699zM83.3729,108.926c2.56427,0.66733 5.1779,1.28967 7.8409,1.867l-2.5427,11.728c-2.82373,-0.612 -5.5973,-1.27267 -8.3207,-1.982zM99.0787,112.341c2.57687,0.45733 5.18497,0.87267 7.8243,1.246l-1.68,11.882c-2.77867,-0.39267 -5.52567,-0.83 -8.241,-1.312zM114.971,114.586c2.63267,0.28067 5.28533,0.51967 7.958,0.717l-0.885,11.967c-2.80133,-0.20667 -5.58267,-0.45733 -8.344,-0.752zM130.895,115.765c2.69733,0.11467 5.405,0.18733 8.123,0.218l-0.135,11.999c-2.84267,-0.032 -5.675,-0.10767 -8.497,-0.227zM147.226,115.948c2.706,-0.05333 5.4,-0.14867 8.082,-0.286l0.612,11.985c-2.80667,0.14333 -5.62533,0.243 -8.456,0.299zM163.228,115.134c2.70133,-0.22333 5.381,-0.489 8.039,-0.797l1.383,11.92c-2.78933,0.32333 -5.60067,0.602 -8.434,0.836zM179.27,113.269c2.61733,-0.39533 5.20167,-0.83233 7.753,-1.311l2.213,11.794c-2.69067,0.50467 -5.41467,0.96567 -8.172,1.383zM194.974,110.306c2.632,-0.60133 5.21267,-1.24667 7.742,-1.936l3.158,11.577c-2.69067,0.73333 -5.43333,1.41933 -8.228,2.058zM210.162,106.162c2.55867,-0.822 5.043,-1.689 7.453,-2.601l4.247,11.224c-2.60067,0.98333 -5.277,1.91733 -8.029,2.802zM224.914,100.559c2.45333,-1.09647 4.79633,-2.2381 7.029,-3.4249l5.633,10.5949c-2.474,1.316 -5.06267,2.578 -7.766,3.786zM238.611,93.2399c2.22333,-1.42993 4.28,-2.9014 6.17,-4.4144l7.5,9.3674c-2.214,1.77207 -4.60733,3.48543 -7.18,5.1401zM250.238,83.8526c1.73467,-1.82093 3.21667,-3.6684 4.446,-5.5424l10.033,6.5825c-1.626,2.479 -3.55567,4.89097 -5.789,7.2359zM257.727,72.2616c0.73667,-2.08967 1.15367,-4.1889 1.251,-6.2977l11.987,0.5523c-0.15133,3.2872 -0.79133,6.53193 -1.92,9.7342zM259,65c0,-2.1188 -0.32133,-4.2272 -0.964,-6.3252l11.473,-3.5153c0.994,3.24353 1.491,6.5237 1.491,9.8405z"
34 /> 34 />
35 <path 35 <path
36 id="椭圆形" 36 id="椭圆形"
37 - :style="{fill: attribute.colors[0], opacity: 0.2}" 37 + :style="{fill: attribute.bgColor1, opacity: 0.2}"
38 d="M236.007,55.489c-0.934,-1.54667 -2.07933,-3.07367 -3.436,-4.581l7.433,-6.6899c1.78067,1.9784 3.30167,4.0123 4.563,6.1017zM228.284,46.8008c-1.486,-1.24467 -3.10967,-2.45673 -4.871,-3.6362l5.564,-8.3092c2.05867,1.37867 3.968,2.8053 5.728,4.2799zM218.231,40.012c-1.83867,-1.01953 -3.77633,-2.00027 -5.813,-2.9422l4.198,-9.0763c2.25733,1.0442 4.412,2.13513 6.464,3.2728zM206.751,34.6508c-1.972,-0.7764 -4.00867,-1.5151 -6.11,-2.2161l3.164,-9.4861c2.26933,0.75707 4.47267,1.55623 6.61,2.3975zM194.536,30.5568c-2.026,-0.57313 -4.09433,-1.11083 -6.205,-1.6131l2.315,-9.7283c2.24733,0.53473 4.45133,1.10777 6.612,1.7191zM181.849,27.5393c-2.04933,-0.40173 -4.12633,-0.77013 -6.231,-1.1052l1.573,-9.8756c2.22133,0.35373 4.415,0.74293 6.581,1.1676zM169.182,25.5245c-2.16667,-0.26833 -4.352,-0.5015 -6.556,-0.6995l0.894,-9.9599c2.316,0.208 4.613,0.45307 6.891,0.7352zM156.246,24.3536c-2.16133,-0.12573 -4.33267,-0.21797 -6.514,-0.2767l0.269,-9.9964c2.28533,0.06153 4.56067,0.15817 6.826,0.2899zM143.1,24.0019c-2.20867,0.00927 -4.40933,0.05263 -6.602,0.1301l-0.353,-9.9938c2.29667,-0.08113 4.60133,-0.12653 6.914,-0.1362zM130.019,24.4619c-2.142,0.1428 -4.26933,0.31843 -6.382,0.5269l-0.982,-9.9517c2.218,-0.21887 4.45067,-0.40323 6.698,-0.5531zM117.062,25.7502c-2.152,0.28673 -4.27967,0.60783 -6.383,0.9633l-1.666,-9.8602c2.218,-0.37487 4.46067,-0.71337 6.728,-1.0155zM104.382,27.896c-2.178,0.4508 -4.31697,0.9385 -6.4169,1.4631l-2.4233,-9.7019c2.23153,-0.5574 4.50227,-1.07523 6.8122,-1.5535zM91.8416,31.026c-2.11333,0.6248 -4.171,1.28667 -6.173,1.9856l-3.2961,-9.4411c2.15447,-0.7522 4.3658,-1.46357 6.634,-2.1341zM79.6749,35.2844c-1.9798,0.8144 -3.88187,1.6643 -5.7062,2.5497l-4.3662,-8.9965c2.00907,-0.97507 4.09847,-1.90883 6.2682,-2.8013zM68.3041,40.8446c-1.8008,1.0496 -3.48867,2.13203 -5.0636,3.2473l-5.779,-8.1611c1.81567,-1.28567 3.7513,-2.5276 5.8069,-3.7258zM58.4772,47.8755c-1.54693,1.3896 -2.91103,2.80543 -4.0923,4.2475l-7.7359,-6.3369c1.5042,-1.83633 3.2194,-3.61963 5.1456,-5.3499zM51.2597,56.7907c-0.86167,1.6472 -1.47697,3.30223 -1.8459,4.9651l-9.7627,-2.1659c0.5604,-2.52587 1.4763,-5.004 2.7477,-7.4344zM49.0569,66.8916c0.13867,1.69473 0.53167,3.38227 1.179,5.0626l-9.3316,3.5948c-0.9924,-2.5762 -1.5971,-5.19007 -1.8141,-7.8416zM52.8216,76.7971c1.026,1.49813 2.2498,2.97423 3.6714,4.4283l-7.1505,6.9908c-1.8272,-1.86893 -3.4177,-3.7918 -4.7715,-5.7686zM60.9628,85.2102c1.5234,1.19727 3.17527,2.36177 4.9556,3.4935l-5.3646,8.4392c-2.06147,-1.3104 -3.9849,-2.6672 -5.7703,-4.0704zM71.2813,91.8061c1.83747,0.9696 3.7656,1.9015 5.7844,2.7957l-4.0498,9.1432c-2.22807,-0.98667 -4.36193,-2.01833 -6.4016,-3.095zM82.8557,96.968c2.0116,0.75793 4.0862,1.4773 6.2238,2.1581l-3.0349,9.5279c-2.30253,-0.73333 -4.54077,-1.50933 -6.7147,-2.328zM95.1087,100.898c2.05393,0.55533 4.1487,1.075 6.2843,1.559l-2.2077,9.753c-2.2708,-0.514 -4.49987,-1.067 -6.6872,-1.659zM107.811,103.778c2.07,0.38467 4.166,0.73567 6.288,1.053l-1.479,9.89c-2.23867,-0.33467 -4.451,-0.70533 -6.637,-1.112zM120.588,105.686c2.14733,0.246 4.312,0.45767 6.494,0.635l-0.81,9.967c-2.29133,-0.186 -4.56533,-0.40833 -6.822,-0.667zM133.499,106.741c2.17333,0.108 4.356,0.182 6.548,0.222l-0.185,9.999c-2.296,-0.04267 -4.58233,-0.12067 -6.859,-0.234zM146.693,106.983c2.19867,-0.02733 4.38867,-0.089 6.57,-0.185l0.438,9.991c-2.28533,0.1 -4.57967,0.16433 -6.883,0.193zM159.707,106.416c2.16533,-0.16267 4.31467,-0.35933 6.448,-0.59l1.073,9.942c-2.24067,0.242 -4.49767,0.44867 -6.771,0.62zM172.68,105.009c2.13467,-0.30467 4.244,-0.64333 6.328,-1.016l1.761,9.844c-2.19933,0.39333 -4.42433,0.75067 -6.675,1.072zM185.378,102.73c2.15267,-0.47 4.26567,-0.97633 6.339,-1.519l2.533,9.674c-2.206,0.57733 -4.45267,1.11567 -6.74,1.615zM197.758,99.4908c2.138,-0.66007 4.21567,-1.35847 6.233,-2.0952l3.43,9.3934c-2.176,0.79467 -4.414,1.547 -6.714,2.257zM209.867,95.0676c2.004,-0.86093 3.92267,-1.7587 5.756,-2.6933l4.541,8.9097c-2.02867,1.034 -4.14533,2.02467 -6.35,2.972zM221.112,89.3089c1.79067,-1.09773 3.45933,-2.22837 5.006,-3.3919l6.011,7.9913c-1.79933,1.35393 -3.72933,2.66257 -5.79,3.9259zM230.714,82.0141c1.47533,-1.42807 2.759,-2.88 3.851,-4.3558l8.039,5.9479c-1.41933,1.91793 -3.06433,3.78223 -4.935,5.5929zM237.368,72.9103c0.742,-1.6738 1.231,-3.3548 1.467,-5.043l9.904,1.3835c-0.36533,2.6138 -1.10833,5.1848 -2.229,7.713zM239,65.5c0,-1.70767 -0.25633,-3.40717 -0.769,-5.0985l9.569,-2.9017c0.8,2.63727 1.2,5.304 1.2,8.0002z" 38 d="M236.007,55.489c-0.934,-1.54667 -2.07933,-3.07367 -3.436,-4.581l7.433,-6.6899c1.78067,1.9784 3.30167,4.0123 4.563,6.1017zM228.284,46.8008c-1.486,-1.24467 -3.10967,-2.45673 -4.871,-3.6362l5.564,-8.3092c2.05867,1.37867 3.968,2.8053 5.728,4.2799zM218.231,40.012c-1.83867,-1.01953 -3.77633,-2.00027 -5.813,-2.9422l4.198,-9.0763c2.25733,1.0442 4.412,2.13513 6.464,3.2728zM206.751,34.6508c-1.972,-0.7764 -4.00867,-1.5151 -6.11,-2.2161l3.164,-9.4861c2.26933,0.75707 4.47267,1.55623 6.61,2.3975zM194.536,30.5568c-2.026,-0.57313 -4.09433,-1.11083 -6.205,-1.6131l2.315,-9.7283c2.24733,0.53473 4.45133,1.10777 6.612,1.7191zM181.849,27.5393c-2.04933,-0.40173 -4.12633,-0.77013 -6.231,-1.1052l1.573,-9.8756c2.22133,0.35373 4.415,0.74293 6.581,1.1676zM169.182,25.5245c-2.16667,-0.26833 -4.352,-0.5015 -6.556,-0.6995l0.894,-9.9599c2.316,0.208 4.613,0.45307 6.891,0.7352zM156.246,24.3536c-2.16133,-0.12573 -4.33267,-0.21797 -6.514,-0.2767l0.269,-9.9964c2.28533,0.06153 4.56067,0.15817 6.826,0.2899zM143.1,24.0019c-2.20867,0.00927 -4.40933,0.05263 -6.602,0.1301l-0.353,-9.9938c2.29667,-0.08113 4.60133,-0.12653 6.914,-0.1362zM130.019,24.4619c-2.142,0.1428 -4.26933,0.31843 -6.382,0.5269l-0.982,-9.9517c2.218,-0.21887 4.45067,-0.40323 6.698,-0.5531zM117.062,25.7502c-2.152,0.28673 -4.27967,0.60783 -6.383,0.9633l-1.666,-9.8602c2.218,-0.37487 4.46067,-0.71337 6.728,-1.0155zM104.382,27.896c-2.178,0.4508 -4.31697,0.9385 -6.4169,1.4631l-2.4233,-9.7019c2.23153,-0.5574 4.50227,-1.07523 6.8122,-1.5535zM91.8416,31.026c-2.11333,0.6248 -4.171,1.28667 -6.173,1.9856l-3.2961,-9.4411c2.15447,-0.7522 4.3658,-1.46357 6.634,-2.1341zM79.6749,35.2844c-1.9798,0.8144 -3.88187,1.6643 -5.7062,2.5497l-4.3662,-8.9965c2.00907,-0.97507 4.09847,-1.90883 6.2682,-2.8013zM68.3041,40.8446c-1.8008,1.0496 -3.48867,2.13203 -5.0636,3.2473l-5.779,-8.1611c1.81567,-1.28567 3.7513,-2.5276 5.8069,-3.7258zM58.4772,47.8755c-1.54693,1.3896 -2.91103,2.80543 -4.0923,4.2475l-7.7359,-6.3369c1.5042,-1.83633 3.2194,-3.61963 5.1456,-5.3499zM51.2597,56.7907c-0.86167,1.6472 -1.47697,3.30223 -1.8459,4.9651l-9.7627,-2.1659c0.5604,-2.52587 1.4763,-5.004 2.7477,-7.4344zM49.0569,66.8916c0.13867,1.69473 0.53167,3.38227 1.179,5.0626l-9.3316,3.5948c-0.9924,-2.5762 -1.5971,-5.19007 -1.8141,-7.8416zM52.8216,76.7971c1.026,1.49813 2.2498,2.97423 3.6714,4.4283l-7.1505,6.9908c-1.8272,-1.86893 -3.4177,-3.7918 -4.7715,-5.7686zM60.9628,85.2102c1.5234,1.19727 3.17527,2.36177 4.9556,3.4935l-5.3646,8.4392c-2.06147,-1.3104 -3.9849,-2.6672 -5.7703,-4.0704zM71.2813,91.8061c1.83747,0.9696 3.7656,1.9015 5.7844,2.7957l-4.0498,9.1432c-2.22807,-0.98667 -4.36193,-2.01833 -6.4016,-3.095zM82.8557,96.968c2.0116,0.75793 4.0862,1.4773 6.2238,2.1581l-3.0349,9.5279c-2.30253,-0.73333 -4.54077,-1.50933 -6.7147,-2.328zM95.1087,100.898c2.05393,0.55533 4.1487,1.075 6.2843,1.559l-2.2077,9.753c-2.2708,-0.514 -4.49987,-1.067 -6.6872,-1.659zM107.811,103.778c2.07,0.38467 4.166,0.73567 6.288,1.053l-1.479,9.89c-2.23867,-0.33467 -4.451,-0.70533 -6.637,-1.112zM120.588,105.686c2.14733,0.246 4.312,0.45767 6.494,0.635l-0.81,9.967c-2.29133,-0.186 -4.56533,-0.40833 -6.822,-0.667zM133.499,106.741c2.17333,0.108 4.356,0.182 6.548,0.222l-0.185,9.999c-2.296,-0.04267 -4.58233,-0.12067 -6.859,-0.234zM146.693,106.983c2.19867,-0.02733 4.38867,-0.089 6.57,-0.185l0.438,9.991c-2.28533,0.1 -4.57967,0.16433 -6.883,0.193zM159.707,106.416c2.16533,-0.16267 4.31467,-0.35933 6.448,-0.59l1.073,9.942c-2.24067,0.242 -4.49767,0.44867 -6.771,0.62zM172.68,105.009c2.13467,-0.30467 4.244,-0.64333 6.328,-1.016l1.761,9.844c-2.19933,0.39333 -4.42433,0.75067 -6.675,1.072zM185.378,102.73c2.15267,-0.47 4.26567,-0.97633 6.339,-1.519l2.533,9.674c-2.206,0.57733 -4.45267,1.11567 -6.74,1.615zM197.758,99.4908c2.138,-0.66007 4.21567,-1.35847 6.233,-2.0952l3.43,9.3934c-2.176,0.79467 -4.414,1.547 -6.714,2.257zM209.867,95.0676c2.004,-0.86093 3.92267,-1.7587 5.756,-2.6933l4.541,8.9097c-2.02867,1.034 -4.14533,2.02467 -6.35,2.972zM221.112,89.3089c1.79067,-1.09773 3.45933,-2.22837 5.006,-3.3919l6.011,7.9913c-1.79933,1.35393 -3.72933,2.66257 -5.79,3.9259zM230.714,82.0141c1.47533,-1.42807 2.759,-2.88 3.851,-4.3558l8.039,5.9479c-1.41933,1.91793 -3.06433,3.78223 -4.935,5.5929zM237.368,72.9103c0.742,-1.6738 1.231,-3.3548 1.467,-5.043l9.904,1.3835c-0.36533,2.6138 -1.10833,5.1848 -2.229,7.713zM239,65.5c0,-1.70767 -0.25633,-3.40717 -0.769,-5.0985l9.569,-2.9017c0.8,2.63727 1.2,5.304 1.2,8.0002z"
39 /> 39 />
40 <path 40 <path
41 id="椭圆形" 41 id="椭圆形"
42 - :style="{fill: attribute.colors[0], opacity: 1}" 42 + :style="{fill: attribute.bgColor1, opacity: 1}"
43 d="M276.756,54.0128c-1.02333,-1.954 -2.28367,-3.89097 -3.781,-5.8109l11.038,-8.6111c2.016,2.584 3.731,5.22613 5.145,7.9264zM268.125,42.843c-1.71,-1.65413 -3.58967,-3.27597 -5.639,-4.8655l8.58,-11.0626c2.452,1.90187 4.71633,3.85713 6.793,5.8658zM256.266,33.5906c-2.10133,-1.353 -4.321,-2.66803 -6.659,-3.9451l6.71,-12.2871c2.63467,1.43887 5.14433,2.92617 7.529,4.4619zM242.64,26.1197c-2.29933,-1.07933 -4.681,-2.12033 -7.145,-3.123l5.277,-12.9676c2.69067,1.09487 5.29633,2.23393 7.817,3.4172zM228.123,20.1993c-2.454,-0.8678 -4.96833,-1.6969 -7.543,-2.4873l4.108,-13.38356c2.76267,0.84795 5.46333,1.73851 8.102,2.67168zM213.135,15.58c-2.54467,-0.6784 -5.133,-1.31873 -7.765,-1.921l3.122,-13.64736c2.794,0.63929 5.54367,1.31956 8.249,2.04081zM197.358,11.9703c-2.536,-0.4902 -5.101,-0.94503 -7.695,-1.3645l2.235,-13.82046c2.73533,0.44229 5.441,0.92207 8.117,1.43934zM181.748,9.44776c-2.68467,-0.35221 -5.39067,-0.66678 -8.118,-0.94369l1.414,-13.92841c2.86333,0.29072 5.705,0.62107 8.525,0.99106zM165.714,7.81089c-2.63933,-0.19469 -5.291,-0.35438 -7.955,-0.47908l0.654,-13.98469c2.79,0.13057 5.567,0.29781 8.331,0.50172zM149.667,7.0617c-2.052,-0.04113 -4.10767,-0.0617 -6.167,-0.0617l-2.065,0.00686l-0.046,-13.99992l2.111,-0.00694c2.15333,0 4.30233,0.0215 6.447,0.06451zM133.303,7.16919c-2.68667,0.08947 -5.362,0.21433 -8.026,0.37457l-0.841,-13.97475c2.78867,-0.16774 5.589,-0.29843 8.401,-0.39206zM117.395,8.12421c-2.71133,0.23666 -5.40367,0.51024 -8.077,0.82075l-1.615,-13.90649c2.80533,-0.32589 5.63033,-0.61297 8.475,-0.86123zM101.299,9.99598c-2.63007,0.38455 -5.2328,0.80502 -7.8082,1.26142l-2.4431,-13.78517c2.71427,-0.48103 5.4561,-0.92402 8.2255,-1.32895zM85.6583,12.7744c-2.68093,0.56453 -5.32067,1.16807 -7.9192,1.8106l-3.3604,-13.59076c2.75653,-0.68157 5.55483,-1.32137 8.3949,-1.91939zM70.13,16.6121c-2.54127,0.7274 -5.02907,1.49197 -7.4634,2.2937l-4.3793,-13.29742c2.6088,-0.85917 5.27207,-1.67774 7.9898,-2.45572zM55.2503,21.5264c-2.52327,0.95553 -4.96897,1.95037 -7.3371,2.9845l-5.6027,-12.8301c2.58093,-1.12703 5.2416,-2.20941 7.982,-3.24713zM40.8249,27.8419c-2.37013,1.199 -4.63297,2.43607 -6.7885,3.7112l-7.128,-12.0496c2.4202,-1.43167 4.95253,-2.81637 7.597,-4.1541zM27.6192,35.686c-2.1324,1.49947 -4.11127,3.03317 -5.9366,4.6011l-9.1223,-10.62c2.16833,-1.86253 4.50363,-3.6736 7.0059,-5.4332zM16.3974,45.3937c-1.6812,1.847 -3.14113,3.7162 -4.3798,5.6076l-11.7119,-7.6701c1.64505,-2.51193 3.55783,-4.9657 5.73833,-7.3613zM8.86227,57.02c-0.8222,2.08013 -1.37211,4.1679 -1.64973,6.2633l-13.87872,-1.8387c0.42835,-3.23313 1.26454,-6.4234 2.50859,-9.5708zM7.20605,69.6673c0.27336,2.09567 0.81905,4.18373 1.63708,6.2642l-13.029,5.123c-1.23837,-3.14947 -2.06853,-6.3416 -2.49048,-9.5764zM11.9872,81.9522c1.23547,1.8924 2.69243,3.7627 4.3709,5.6109l-10.36391,9.4122c-2.17819,-2.39847 -4.08817,-4.8551 -5.72994,-7.3699zM21.6371,92.6738c1.82367,1.56927 3.8011,3.10433 5.9323,4.6052l-8.0609,11.446c-2.5016,-1.76133 -4.83597,-3.57433 -7.0031,-5.439zM33.9839,101.416c2.15473,1.276 4.417,2.51433 6.7868,3.715l-6.3254,12.489c-2.64447,-1.33933 -5.17653,-2.72567 -7.5962,-4.159zM47.8579,108.465c2.36773,1.03533 4.8132,2.031 7.3364,2.987l-4.9625,13.091c-2.74053,-1.03867 -5.40113,-2.122 -7.9818,-3.25zM62.6072,114.075c2.4348,0.80267 4.9231,1.568 7.4649,2.296l-3.8568,13.459c-2.71847,-0.77933 -5.38237,-1.599 -7.9917,-2.459zM77.6787,118.4c2.5978,0.64333 5.23673,1.24733 7.9168,1.812l-2.8883,13.699c-2.8394,-0.59867 -5.63697,-1.239 -8.3927,-1.921zM93.4309,121.732c2.57473,0.45667 5.17677,0.87767 7.8061,1.263l-2.0287,13.852c-2.76893,-0.40533 -5.5102,-0.84867 -8.2238,-1.33zM109.255,124.048c2.674,0.31067 5.367,0.58467 8.079,0.822l-1.22,13.947c-2.84533,-0.24867 -5.671,-0.53633 -8.477,-0.863zM125.215,125.453c2.66333,0.16067 5.33833,0.286 8.025,0.376l-0.469,13.992c-2.81133,-0.094 -5.61133,-0.22533 -8.4,-0.394zM141.371,125.993l2.153,0.007c2.022,0 4.04833,-0.02 6.079,-0.06l0.278,13.997c-2.12333,0.042 -4.25833,0.063 -6.405,0.063l-2.153,-0.007zM157.696,125.671c2.66467,-0.124 5.31667,-0.283 7.956,-0.477l1.027,13.962c-2.764,0.20333 -5.541,0.37 -8.331,0.5zM173.566,124.502c2.728,-0.276 5.43467,-0.59 8.12,-0.942l1.818,13.882c-2.82067,0.36933 -5.663,0.699 -8.527,0.989zM189.602,122.404c2.59533,-0.41867 5.161,-0.873 7.697,-1.363l2.654,13.746c-2.67667,0.51667 -5.383,0.996 -8.119,1.438zM205.308,119.355c2.63267,-0.60133 5.222,-1.241 7.768,-1.919l3.602,13.528c-2.706,0.72067 -5.45633,1.40033 -8.251,2.039zM220.523,115.305c2.574,-0.78933 5.08833,-1.61733 7.543,-2.484l4.662,13.201c-2.63867,0.932 -5.33867,1.82133 -8.1,2.668zM235.438,110.027c2.464,-1.002 4.846,-2.042 7.146,-3.12l5.943,12.676c-2.52133,1.182 -5.12733,2.31967 -7.818,3.413zM249.555,103.383c2.33867,-1.276 4.559,-2.58993 6.661,-3.9418l7.573,11.7748c-2.38533,1.534 -4.89533,3.01967 -7.53,4.457zM262.439,95.0582c2.05133,-1.58807 3.93267,-3.20853 5.644,-4.8614l9.725,10.0712c-2.078,2.00667 -4.34367,3.95967 -6.797,5.859zM272.941,84.8416c1.50067,-1.91873 2.76433,-3.8547 3.791,-5.8079l12.392,6.515c-1.41867,2.69733 -3.137,5.3365 -5.155,7.9175zM279.157,72.8898c0.55733,-2.104 0.83833,-4.21727 0.843,-6.3398l14,0.0288c-0.00667,3.328 -0.443,6.6267 -1.309,9.8961zM280,66.5c0,-2.12293 -0.27667,-4.23673 -0.83,-6.3414l13.54,-3.5592c0.86,3.27113 1.29,6.57133 1.29,9.9006z" 43 d="M276.756,54.0128c-1.02333,-1.954 -2.28367,-3.89097 -3.781,-5.8109l11.038,-8.6111c2.016,2.584 3.731,5.22613 5.145,7.9264zM268.125,42.843c-1.71,-1.65413 -3.58967,-3.27597 -5.639,-4.8655l8.58,-11.0626c2.452,1.90187 4.71633,3.85713 6.793,5.8658zM256.266,33.5906c-2.10133,-1.353 -4.321,-2.66803 -6.659,-3.9451l6.71,-12.2871c2.63467,1.43887 5.14433,2.92617 7.529,4.4619zM242.64,26.1197c-2.29933,-1.07933 -4.681,-2.12033 -7.145,-3.123l5.277,-12.9676c2.69067,1.09487 5.29633,2.23393 7.817,3.4172zM228.123,20.1993c-2.454,-0.8678 -4.96833,-1.6969 -7.543,-2.4873l4.108,-13.38356c2.76267,0.84795 5.46333,1.73851 8.102,2.67168zM213.135,15.58c-2.54467,-0.6784 -5.133,-1.31873 -7.765,-1.921l3.122,-13.64736c2.794,0.63929 5.54367,1.31956 8.249,2.04081zM197.358,11.9703c-2.536,-0.4902 -5.101,-0.94503 -7.695,-1.3645l2.235,-13.82046c2.73533,0.44229 5.441,0.92207 8.117,1.43934zM181.748,9.44776c-2.68467,-0.35221 -5.39067,-0.66678 -8.118,-0.94369l1.414,-13.92841c2.86333,0.29072 5.705,0.62107 8.525,0.99106zM165.714,7.81089c-2.63933,-0.19469 -5.291,-0.35438 -7.955,-0.47908l0.654,-13.98469c2.79,0.13057 5.567,0.29781 8.331,0.50172zM149.667,7.0617c-2.052,-0.04113 -4.10767,-0.0617 -6.167,-0.0617l-2.065,0.00686l-0.046,-13.99992l2.111,-0.00694c2.15333,0 4.30233,0.0215 6.447,0.06451zM133.303,7.16919c-2.68667,0.08947 -5.362,0.21433 -8.026,0.37457l-0.841,-13.97475c2.78867,-0.16774 5.589,-0.29843 8.401,-0.39206zM117.395,8.12421c-2.71133,0.23666 -5.40367,0.51024 -8.077,0.82075l-1.615,-13.90649c2.80533,-0.32589 5.63033,-0.61297 8.475,-0.86123zM101.299,9.99598c-2.63007,0.38455 -5.2328,0.80502 -7.8082,1.26142l-2.4431,-13.78517c2.71427,-0.48103 5.4561,-0.92402 8.2255,-1.32895zM85.6583,12.7744c-2.68093,0.56453 -5.32067,1.16807 -7.9192,1.8106l-3.3604,-13.59076c2.75653,-0.68157 5.55483,-1.32137 8.3949,-1.91939zM70.13,16.6121c-2.54127,0.7274 -5.02907,1.49197 -7.4634,2.2937l-4.3793,-13.29742c2.6088,-0.85917 5.27207,-1.67774 7.9898,-2.45572zM55.2503,21.5264c-2.52327,0.95553 -4.96897,1.95037 -7.3371,2.9845l-5.6027,-12.8301c2.58093,-1.12703 5.2416,-2.20941 7.982,-3.24713zM40.8249,27.8419c-2.37013,1.199 -4.63297,2.43607 -6.7885,3.7112l-7.128,-12.0496c2.4202,-1.43167 4.95253,-2.81637 7.597,-4.1541zM27.6192,35.686c-2.1324,1.49947 -4.11127,3.03317 -5.9366,4.6011l-9.1223,-10.62c2.16833,-1.86253 4.50363,-3.6736 7.0059,-5.4332zM16.3974,45.3937c-1.6812,1.847 -3.14113,3.7162 -4.3798,5.6076l-11.7119,-7.6701c1.64505,-2.51193 3.55783,-4.9657 5.73833,-7.3613zM8.86227,57.02c-0.8222,2.08013 -1.37211,4.1679 -1.64973,6.2633l-13.87872,-1.8387c0.42835,-3.23313 1.26454,-6.4234 2.50859,-9.5708zM7.20605,69.6673c0.27336,2.09567 0.81905,4.18373 1.63708,6.2642l-13.029,5.123c-1.23837,-3.14947 -2.06853,-6.3416 -2.49048,-9.5764zM11.9872,81.9522c1.23547,1.8924 2.69243,3.7627 4.3709,5.6109l-10.36391,9.4122c-2.17819,-2.39847 -4.08817,-4.8551 -5.72994,-7.3699zM21.6371,92.6738c1.82367,1.56927 3.8011,3.10433 5.9323,4.6052l-8.0609,11.446c-2.5016,-1.76133 -4.83597,-3.57433 -7.0031,-5.439zM33.9839,101.416c2.15473,1.276 4.417,2.51433 6.7868,3.715l-6.3254,12.489c-2.64447,-1.33933 -5.17653,-2.72567 -7.5962,-4.159zM47.8579,108.465c2.36773,1.03533 4.8132,2.031 7.3364,2.987l-4.9625,13.091c-2.74053,-1.03867 -5.40113,-2.122 -7.9818,-3.25zM62.6072,114.075c2.4348,0.80267 4.9231,1.568 7.4649,2.296l-3.8568,13.459c-2.71847,-0.77933 -5.38237,-1.599 -7.9917,-2.459zM77.6787,118.4c2.5978,0.64333 5.23673,1.24733 7.9168,1.812l-2.8883,13.699c-2.8394,-0.59867 -5.63697,-1.239 -8.3927,-1.921zM93.4309,121.732c2.57473,0.45667 5.17677,0.87767 7.8061,1.263l-2.0287,13.852c-2.76893,-0.40533 -5.5102,-0.84867 -8.2238,-1.33zM109.255,124.048c2.674,0.31067 5.367,0.58467 8.079,0.822l-1.22,13.947c-2.84533,-0.24867 -5.671,-0.53633 -8.477,-0.863zM125.215,125.453c2.66333,0.16067 5.33833,0.286 8.025,0.376l-0.469,13.992c-2.81133,-0.094 -5.61133,-0.22533 -8.4,-0.394zM141.371,125.993l2.153,0.007c2.022,0 4.04833,-0.02 6.079,-0.06l0.278,13.997c-2.12333,0.042 -4.25833,0.063 -6.405,0.063l-2.153,-0.007zM157.696,125.671c2.66467,-0.124 5.31667,-0.283 7.956,-0.477l1.027,13.962c-2.764,0.20333 -5.541,0.37 -8.331,0.5zM173.566,124.502c2.728,-0.276 5.43467,-0.59 8.12,-0.942l1.818,13.882c-2.82067,0.36933 -5.663,0.699 -8.527,0.989zM189.602,122.404c2.59533,-0.41867 5.161,-0.873 7.697,-1.363l2.654,13.746c-2.67667,0.51667 -5.383,0.996 -8.119,1.438zM205.308,119.355c2.63267,-0.60133 5.222,-1.241 7.768,-1.919l3.602,13.528c-2.706,0.72067 -5.45633,1.40033 -8.251,2.039zM220.523,115.305c2.574,-0.78933 5.08833,-1.61733 7.543,-2.484l4.662,13.201c-2.63867,0.932 -5.33867,1.82133 -8.1,2.668zM235.438,110.027c2.464,-1.002 4.846,-2.042 7.146,-3.12l5.943,12.676c-2.52133,1.182 -5.12733,2.31967 -7.818,3.413zM249.555,103.383c2.33867,-1.276 4.559,-2.58993 6.661,-3.9418l7.573,11.7748c-2.38533,1.534 -4.89533,3.01967 -7.53,4.457zM262.439,95.0582c2.05133,-1.58807 3.93267,-3.20853 5.644,-4.8614l9.725,10.0712c-2.078,2.00667 -4.34367,3.95967 -6.797,5.859zM272.941,84.8416c1.50067,-1.91873 2.76433,-3.8547 3.791,-5.8079l12.392,6.515c-1.41867,2.69733 -3.137,5.3365 -5.155,7.9175zM279.157,72.8898c0.55733,-2.104 0.83833,-4.21727 0.843,-6.3398l14,0.0288c-0.00667,3.328 -0.443,6.6267 -1.309,9.8961zM280,66.5c0,-2.12293 -0.27667,-4.23673 -0.83,-6.3414l13.54,-3.5592c0.86,3.27113 1.29,6.57133 1.29,9.9006z"
44 /> 44 />
45 </g> 45 </g>
@@ -86,9 +86,9 @@ @@ -86,9 +86,9 @@
86 y2="100%" 86 y2="100%"
87 gradientUnits="objectBoundingBox" 87 gradientUnits="objectBoundingBox"
88 > 88 >
89 - <stop offset="0" :stop-color="attribute.colors[1]" stop-opacity="0" />  
90 - <stop offset="0.6766349198750631" :stop-color="attribute.colors[2]" stop-opacity="0.8" />  
91 - <stop offset="1" :stop-color="attribute.colors[3]" stop-opacity="1" /> 89 + <stop offset="0" :stop-color="attribute.bgColor2" stop-opacity="0" />
  90 + <stop offset="0.6766349198750631" :stop-color="attribute.bgColor3" stop-opacity="0.8" />
  91 + <stop offset="1" :stop-color="attribute.bgColor1" stop-opacity="1" />
92 </linearGradient> 92 </linearGradient>
93 <filter 93 <filter
94 id="filter_4" 94 id="filter_4"
@@ -122,9 +122,9 @@ @@ -122,9 +122,9 @@
122 y2="100%" 122 y2="100%"
123 gradientUnits="objectBoundingBox" 123 gradientUnits="objectBoundingBox"
124 > 124 >
125 - <stop offset="0" :stop-color="attribute.colors[1]" stop-opacity="0" />  
126 - <stop offset="0.6766349198750631" :stop-color="attribute.colors[2]" stop-opacity="0.8" />  
127 - <stop offset="1" :stop-color="attribute.colors[3]" stop-opacity="1" /> 125 + <stop offset="0" :stop-color="attribute.bgColor2" stop-opacity="0" />
  126 + <stop offset="0.6766349198750631" :stop-color="attribute.bgColor3" stop-opacity="0.8" />
  127 + <stop offset="1" :stop-color="attribute.bgColor1" stop-opacity="1" />
128 </linearGradient> 128 </linearGradient>
129 <filter 129 <filter
130 id="filter_5" 130 id="filter_5"
@@ -158,8 +158,8 @@ @@ -158,8 +158,8 @@
158 y2="74.82884987113394%" 158 y2="74.82884987113394%"
159 gradientUnits="objectBoundingBox" 159 gradientUnits="objectBoundingBox"
160 > 160 >
161 - <stop offset="0" :stop-color="attribute.colors[4]" stop-opacity="0" />  
162 - <stop offset="1" :stop-color="attribute.colors[5]" stop-opacity="1" /> 161 + <stop offset="0" :stop-color="attribute.bgColor4" stop-opacity="0" />
  162 + <stop offset="1" :stop-color="attribute.bgColor5" stop-opacity="1" />
163 </linearGradient> 163 </linearGradient>
164 </defs> 164 </defs>
165 </svg> 165 </svg>
@@ -7,17 +7,11 @@ import { chartInitConfig } from '@/settings/designSetting' @@ -7,17 +7,11 @@ import { chartInitConfig } from '@/settings/designSetting'
7 export const option = { 7 export const option = {
8 dataset: '', 8 dataset: '',
9 attribute: { 9 attribute: {
10 - colors: [  
11 - '#66ffff',  
12 - '#025E81',  
13 - '#16CCE0',  
14 - '#025E81',  
15 - '#16CCE0',  
16 - '#17D4E7',  
17 - '#082C51',  
18 - '#17D4E7',  
19 - '#082C51',  
20 - ], 10 + bgColor1:'#66ffff',
  11 + bgColor2:'#025E81',
  12 + bgColor3:'#16CCE0',
  13 + bgColor4:'#17D4E7',
  14 + bgColor5:'#082C51',
21 } 15 }
22 } 16 }
23 17
1 <template> 1 <template>
2 <CollapseItem name="配置" :expanded="true"> 2 <CollapseItem name="配置" :expanded="true">
3 - <SettingItemBox  
4 - :name="`装饰颜色-${index + 1}`"  
5 - v-for="(item, index) in optionData.attribute.colors"  
6 - :key="index"  
7 - > 3 + <SettingItemBox :name="`装饰1`">
8 <SettingItem name="颜色"> 4 <SettingItem name="颜色">
9 - <n-color-picker  
10 - size="small"  
11 - :modes="['hex']"  
12 - v-model:value="optionData.attribute.colors[index]"  
13 - ></n-color-picker> 5 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
14 </SettingItem> 6 </SettingItem>
15 <SettingItem> 7 <SettingItem>
16 - <n-button size="small" @click="optionData.attribute.colors[index] = option.attribute.colors[index]">  
17 - 恢复默认  
18 - </n-button> 8 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#66ffff'"> 恢复默认 </n-button>
  9 + </SettingItem>
  10 + </SettingItemBox>
  11 + <SettingItemBox :name="`装饰2`">
  12 + <SettingItem name="颜色">
  13 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor2"></n-color-picker>
  14 + </SettingItem>
  15 + <SettingItem>
  16 + <n-button size="small" @click="optionData.attribute.bgColor2= '#025E81'"> 恢复默认 </n-button>
  17 + </SettingItem>
  18 + </SettingItemBox>
  19 + <SettingItemBox :name="`装饰3`">
  20 + <SettingItem name="颜色">
  21 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor3"></n-color-picker>
  22 + </SettingItem>
  23 + <SettingItem>
  24 + <n-button size="small" @click="optionData.attribute.bgColor3 = '#16CCE0'"> 恢复默认 </n-button>
  25 + </SettingItem>
  26 + </SettingItemBox>
  27 + <SettingItemBox :name="`装饰4`">
  28 + <SettingItem name="颜色">
  29 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor4"></n-color-picker>
  30 + </SettingItem>
  31 + <SettingItem>
  32 + <n-button size="small" @click="optionData.attribute.bgColor4= '#17D4E7'"> 恢复默认 </n-button>
  33 + </SettingItem>
  34 + </SettingItemBox>
  35 + <SettingItemBox :name="`装饰5`">
  36 + <SettingItem name="颜色">
  37 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor5"></n-color-picker>
  38 + </SettingItem>
  39 + <SettingItem>
  40 + <n-button size="small" @click="optionData.attribute.bgColor5 = '#082C51'"> 恢复默认 </n-button>
19 </SettingItem> 41 </SettingItem>
20 </SettingItemBox> 42 </SettingItemBox>
21 </CollapseItem> 43 </CollapseItem>
@@ -11,7 +11,7 @@ @@ -11,7 +11,7 @@
11 <g opacity="1" transform="translate(0 0) rotate(0)"> 11 <g opacity="1" transform="translate(0 0) rotate(0)">
12 <path 12 <path
13 id="椭圆形" 13 id="椭圆形"
14 - :style="{ fill: attribute.colors[0], opacity: 1 }" 14 + :style="{ fill: attribute.bgColor1, opacity: 1 }"
15 d="M139.621,136.251c-2.61,-2.04333 -5.588,-3.925 -8.934,-5.645l3.447,-6.71c3.772,1.938 7.15133,4.07633 10.138,6.415zM117.348,125.283c-3.40467,-1.03333 -6.94467,-1.89633 -10.62,-2.589l1.397,-7.413c3.944,0.74267 7.74833,1.67033 11.413,2.783zM92.22,120.92c-2.4356,-0.14533 -4.8863,-0.218 -7.3521,-0.218c-1.2664,0 -2.52947,0.01933 -3.7892,0.058l-0.2295,-7.541c1.3362,-0.04067 2.67577,-0.061 4.0187,-0.061c2.61553,0 5.21587,0.077 7.801,0.231zM66.4938,122.095c-3.67767,0.572 -7.24003,1.312 -10.6871,2.22l-1.9218,-7.295c3.69873,-0.97467 7.5155,-1.76767 11.4503,-2.379zM42.1309,129.118c-3.43633,1.55933 -6.54803,3.28567 -9.3351,5.179l-4.2389,-6.24c3.14287,-2.13533 6.6283,-4.07167 10.4563,-5.809zM22.907,143.636c-2.01593,2.854 -3.2796,5.77967 -3.791,8.777l-7.4364,-1.269c0.7032,-4.12133 2.39173,-8.075 5.0656,-11.861zM21.2625,164.572c1.45987,2.72667 3.54307,5.337 6.2496,7.831l-5.1119,5.548c-3.33127,-3.07 -5.9273,-6.34267 -7.7881,-9.818zM39.145,180.303c3.07327,1.57333 6.3896,2.97533 9.949,4.206l-2.466,7.13c-3.89267,-1.34667 -7.53267,-2.88667 -10.92,-4.62zM63.1185,188.187c3.54973,0.66533 7.17993,1.163 10.8906,1.493l-0.6688,7.514c-3.9524,-0.35133 -7.82277,-0.882 -11.6111,-1.592zM88.7721,190.097c3.68647,-0.11533 7.32063,-0.39367 10.9025,-0.835l0.9224,7.487c-3.80967,0.46933 -7.67247,0.76533 -11.5884,0.888zM114.041,186.516c3.61867,-0.958 7.05333,-2.08633 10.304,-3.385l2.799,7.006c-3.53467,1.412 -7.259,2.636 -11.173,3.672zM137.03,176.502c3.09067,-2.10867 5.693,-4.363 7.807,-6.763l5.661,4.986c-2.53133,2.874 -5.60333,5.54367 -9.216,8.009zM150.636,158.352c0.16,-0.97 0.24,-1.944 0.24,-2.922c0,-3.072 -0.78533,-6.09 -2.356,-9.054l6.666,-3.532c2.156,4.068 3.234,8.26333 3.234,12.586c0,1.39067 -0.11367,2.774 -0.341,4.15z" 15 d="M139.621,136.251c-2.61,-2.04333 -5.588,-3.925 -8.934,-5.645l3.447,-6.71c3.772,1.938 7.15133,4.07633 10.138,6.415zM117.348,125.283c-3.40467,-1.03333 -6.94467,-1.89633 -10.62,-2.589l1.397,-7.413c3.944,0.74267 7.74833,1.67033 11.413,2.783zM92.22,120.92c-2.4356,-0.14533 -4.8863,-0.218 -7.3521,-0.218c-1.2664,0 -2.52947,0.01933 -3.7892,0.058l-0.2295,-7.541c1.3362,-0.04067 2.67577,-0.061 4.0187,-0.061c2.61553,0 5.21587,0.077 7.801,0.231zM66.4938,122.095c-3.67767,0.572 -7.24003,1.312 -10.6871,2.22l-1.9218,-7.295c3.69873,-0.97467 7.5155,-1.76767 11.4503,-2.379zM42.1309,129.118c-3.43633,1.55933 -6.54803,3.28567 -9.3351,5.179l-4.2389,-6.24c3.14287,-2.13533 6.6283,-4.07167 10.4563,-5.809zM22.907,143.636c-2.01593,2.854 -3.2796,5.77967 -3.791,8.777l-7.4364,-1.269c0.7032,-4.12133 2.39173,-8.075 5.0656,-11.861zM21.2625,164.572c1.45987,2.72667 3.54307,5.337 6.2496,7.831l-5.1119,5.548c-3.33127,-3.07 -5.9273,-6.34267 -7.7881,-9.818zM39.145,180.303c3.07327,1.57333 6.3896,2.97533 9.949,4.206l-2.466,7.13c-3.89267,-1.34667 -7.53267,-2.88667 -10.92,-4.62zM63.1185,188.187c3.54973,0.66533 7.17993,1.163 10.8906,1.493l-0.6688,7.514c-3.9524,-0.35133 -7.82277,-0.882 -11.6111,-1.592zM88.7721,190.097c3.68647,-0.11533 7.32063,-0.39367 10.9025,-0.835l0.9224,7.487c-3.80967,0.46933 -7.67247,0.76533 -11.5884,0.888zM114.041,186.516c3.61867,-0.958 7.05333,-2.08633 10.304,-3.385l2.799,7.006c-3.53467,1.412 -7.259,2.636 -11.173,3.672zM137.03,176.502c3.09067,-2.10867 5.693,-4.363 7.807,-6.763l5.661,4.986c-2.53133,2.874 -5.60333,5.54367 -9.216,8.009zM150.636,158.352c0.16,-0.97 0.24,-1.944 0.24,-2.922c0,-3.072 -0.78533,-6.09 -2.356,-9.054l6.666,-3.532c2.156,4.068 3.234,8.26333 3.234,12.586c0,1.39067 -0.11367,2.774 -0.341,4.15z"
16 /> 16 />
17 <g opacity="1" transform="translate(0 0) rotate(0)" class="beat"> 17 <g opacity="1" transform="translate(0 0) rotate(0)" class="beat">
@@ -58,8 +58,8 @@ @@ -58,8 +58,8 @@
58 y2="35.79683373280602%" 58 y2="35.79683373280602%"
59 gradientUnits="objectBoundingBox" 59 gradientUnits="objectBoundingBox"
60 > 60 >
61 - <stop offset="0" :stop-color="attribute.colors[1]" stop-opacity="1" />  
62 - <stop offset="1" :stop-color="attribute.colors[2]" stop-opacity="1" /> 61 + <stop offset="0" :stop-color="attribute.bgColor2" stop-opacity="1" />
  62 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="1" />
63 </linearGradient> 63 </linearGradient>
64 <linearGradient 64 <linearGradient
65 id="decorates09_linear_1" 65 id="decorates09_linear_1"
@@ -69,8 +69,8 @@ @@ -69,8 +69,8 @@
69 y2="10.637680716914133%" 69 y2="10.637680716914133%"
70 gradientUnits="objectBoundingBox" 70 gradientUnits="objectBoundingBox"
71 > 71 >
72 - <stop offset="0" :stop-color="attribute.colors[3]" stop-opacity="1" />  
73 - <stop offset="1" :stop-color="attribute.colors[4]" stop-opacity="1" /> 72 + <stop offset="0" :stop-color="attribute.bgColor2" stop-opacity="1" />
  73 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="1" />
74 </linearGradient> 74 </linearGradient>
75 <linearGradient 75 <linearGradient
76 id="decorates09_linear_2" 76 id="decorates09_linear_2"
@@ -80,8 +80,8 @@ @@ -80,8 +80,8 @@
80 y2="96.00644548395181%" 80 y2="96.00644548395181%"
81 gradientUnits="objectBoundingBox" 81 gradientUnits="objectBoundingBox"
82 > 82 >
83 - <stop offset="0" :stop-color="attribute.colors[5]" stop-opacity="1" />  
84 - <stop offset="1" :stop-color="attribute.colors[6]" stop-opacity="1" /> 83 + <stop offset="0" :stop-color="attribute.bgColor4" stop-opacity="1" />
  84 + <stop offset="1" :stop-color="attribute.bgColor5" stop-opacity="1" />
85 </linearGradient> 85 </linearGradient>
86 <filter 86 <filter
87 id="decorates09_filter_5" 87 id="decorates09_filter_5"
@@ -115,8 +115,8 @@ @@ -115,8 +115,8 @@
115 y2="96.00644548395181%" 115 y2="96.00644548395181%"
116 gradientUnits="objectBoundingBox" 116 gradientUnits="objectBoundingBox"
117 > 117 >
118 - <stop offset="0" :stop-color="attribute.colors[7]" stop-opacity="1" />  
119 - <stop offset="1" :stop-color="attribute.colors[8]" stop-opacity="1" /> 118 + <stop offset="0" :stop-color="attribute.bgColor4" stop-opacity="1" />
  119 + <stop offset="1" :stop-color="attribute.bgColor5" stop-opacity="1" />
120 </linearGradient> 120 </linearGradient>
121 <filter 121 <filter
122 id="decorates09_filter_6" 122 id="decorates09_filter_6"
@@ -7,20 +7,12 @@ import { chartInitConfig } from '@/settings/designSetting' @@ -7,20 +7,12 @@ import { chartInitConfig } from '@/settings/designSetting'
7 export const option = { 7 export const option = {
8 dataset: '', 8 dataset: '',
9 attribute: { 9 attribute: {
10 - colors: [  
11 - '#22EB5F',  
12 - '#C48613',  
13 - '#FFFFFF',  
14 - '#39EF71',  
15 - '#FFFFFF',  
16 - '#39EF71',  
17 - '#CAFFE1',  
18 - '#04E848',  
19 - '#CAFFE1',  
20 - '#04E848',  
21 - '#CAFFE1',  
22 - '#04E848'  
23 - ] 10 + bgColor1:'#22EB5F',
  11 + bgColor2:'#C48613',
  12 + bgColor3:'#FFFFFF',
  13 + bgColor4:'#39EF71',
  14 + bgColor5:'#CAFFE1',
  15 + bgColor6:'#04E848',
24 } 16 }
25 } 17 }
26 18
1 <template> 1 <template>
2 <CollapseItem name="配置" :expanded="true"> 2 <CollapseItem name="配置" :expanded="true">
3 - <SettingItemBox  
4 - :name="`装饰颜色-${index + 1}`"  
5 - v-for="(item, index) in optionData.attribute.colors"  
6 - :key="index"  
7 - > 3 + <SettingItemBox :name="`装饰1`">
8 <SettingItem name="颜色"> 4 <SettingItem name="颜色">
9 - <n-color-picker  
10 - size="small"  
11 - :modes="['hex']"  
12 - v-model:value="optionData.attribute.colors[index]"  
13 - ></n-color-picker> 5 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
14 </SettingItem> 6 </SettingItem>
15 <SettingItem> 7 <SettingItem>
16 - <n-button size="small" @click="optionData.attribute.colors[index] = option.attribute.colors[index]">  
17 - 恢复默认  
18 - </n-button> 8 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#22EB5F'"> 恢复默认 </n-button>
  9 + </SettingItem>
  10 + </SettingItemBox>
  11 + <SettingItemBox :name="`装饰2`">
  12 + <SettingItem name="颜色">
  13 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor2"></n-color-picker>
  14 + </SettingItem>
  15 + <SettingItem>
  16 + <n-button size="small" @click="optionData.attribute.bgColor2 = '#C48613'"> 恢复默认 </n-button>
  17 + </SettingItem>
  18 + </SettingItemBox>
  19 + <SettingItemBox :name="`装饰3`">
  20 + <SettingItem name="颜色">
  21 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor3"></n-color-picker>
  22 + </SettingItem>
  23 + <SettingItem>
  24 + <n-button size="small" @click="optionData.attribute.bgColor3 = '#FFFFFF'"> 恢复默认 </n-button>
  25 + </SettingItem>
  26 + </SettingItemBox>
  27 + <SettingItemBox :name="`装饰4`">
  28 + <SettingItem name="颜色">
  29 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor4"></n-color-picker>
  30 + </SettingItem>
  31 + <SettingItem>
  32 + <n-button size="small" @click="optionData.attribute.bgColor4 = '#39EF71'"> 恢复默认 </n-button>
  33 + </SettingItem>
  34 + </SettingItemBox>
  35 + <SettingItemBox :name="`装饰5`">
  36 + <SettingItem name="颜色">
  37 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor5"></n-color-picker>
  38 + </SettingItem>
  39 + <SettingItem>
  40 + <n-button size="small" @click="optionData.attribute.bgColor5 = '#CAFFE1'"> 恢复默认 </n-button>
  41 + </SettingItem>
  42 + </SettingItemBox>
  43 + <SettingItemBox :name="`装饰6`">
  44 + <SettingItem name="颜色">
  45 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor6"></n-color-picker>
  46 + </SettingItem>
  47 + <SettingItem>
  48 + <n-button size="small" @click="optionData.attribute.bgColor6 = '#04E848'"> 恢复默认 </n-button>
19 </SettingItem> 49 </SettingItem>
20 </SettingItemBox> 50 </SettingItemBox>
21 </CollapseItem> 51 </CollapseItem>
@@ -67,8 +67,8 @@ @@ -67,8 +67,8 @@
67 y2="97.23011363636364%" 67 y2="97.23011363636364%"
68 gradientUnits="objectBoundingBox" 68 gradientUnits="objectBoundingBox"
69 > 69 >
70 - <stop offset="0" :stop-color="attribute.colors[0]" stop-opacity="1" />  
71 - <stop offset="1" :stop-color="attribute.colors[1]" stop-opacity="0" /> 70 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="1" />
  71 + <stop offset="1" :stop-color="attribute.bgColor2" stop-opacity="0" />
72 </linearGradient> 72 </linearGradient>
73 <linearGradient 73 <linearGradient
74 id="decorates10_linear_1" 74 id="decorates10_linear_1"
@@ -78,8 +78,8 @@ @@ -78,8 +78,8 @@
78 y2="39.858217592598066%" 78 y2="39.858217592598066%"
79 gradientUnits="objectBoundingBox" 79 gradientUnits="objectBoundingBox"
80 > 80 >
81 - <stop offset="0" :stop-color="attribute.colors[2]" stop-opacity="0.15" />  
82 - <stop offset="1" :stop-color="attribute.colors[3]" stop-opacity="1" /> 81 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="0.15" />
  82 + <stop offset="1" :stop-color="attribute.bgColor4" stop-opacity="1" />
83 </linearGradient> 83 </linearGradient>
84 <linearGradient 84 <linearGradient
85 id="decorates10_linear_2" 85 id="decorates10_linear_2"
@@ -89,8 +89,8 @@ @@ -89,8 +89,8 @@
89 y2="39.858217592598066%" 89 y2="39.858217592598066%"
90 gradientUnits="objectBoundingBox" 90 gradientUnits="objectBoundingBox"
91 > 91 >
92 - <stop offset="0" :stop-color="attribute.colors[4]" stop-opacity="0.15" />  
93 - <stop offset="1" :stop-color="attribute.colors[5]" stop-opacity="1" /> 92 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="0.15" />
  93 + <stop offset="1" :stop-color="attribute.bgColor4" stop-opacity="1" />
94 </linearGradient> 94 </linearGradient>
95 <linearGradient 95 <linearGradient
96 id="linear_3" 96 id="linear_3"
@@ -100,8 +100,8 @@ @@ -100,8 +100,8 @@
100 y2="98.39106206293707%" 100 y2="98.39106206293707%"
101 gradientUnits="objectBoundingBox" 101 gradientUnits="objectBoundingBox"
102 > 102 >
103 - <stop offset="0" :stop-color="attribute.colors[6]" stop-opacity="1" />  
104 - <stop offset="1" :stop-color="attribute.colors[7]" stop-opacity="1" /> 103 + <stop offset="0" :stop-color="attribute.bgColor5" stop-opacity="1" />
  104 + <stop offset="1" :stop-color="attribute.bgColor6" stop-opacity="1" />
105 </linearGradient> 105 </linearGradient>
106 <filter 106 <filter
107 id="decorates10_filter_6" 107 id="decorates10_filter_6"
@@ -135,8 +135,8 @@ @@ -135,8 +135,8 @@
135 y2="98.39106206293707%" 135 y2="98.39106206293707%"
136 gradientUnits="objectBoundingBox" 136 gradientUnits="objectBoundingBox"
137 > 137 >
138 - <stop offset="0" :stop-color="attribute.colors[8]" stop-opacity="1" />  
139 - <stop offset="1" :stop-color="attribute.colors[9]" stop-opacity="1" /> 138 + <stop offset="0" :stop-color="attribute.bgColor5" stop-opacity="1" />
  139 + <stop offset="1" :stop-color="attribute.bgColor6" stop-opacity="1" />
140 </linearGradient> 140 </linearGradient>
141 <filter 141 <filter
142 id="decorates10_filter_7" 142 id="decorates10_filter_7"
@@ -170,8 +170,8 @@ @@ -170,8 +170,8 @@
170 y2="98.39106206293707%" 170 y2="98.39106206293707%"
171 gradientUnits="objectBoundingBox" 171 gradientUnits="objectBoundingBox"
172 > 172 >
173 - <stop offset="0" :stop-color="attribute.colors[10]" stop-opacity="1" />  
174 - <stop offset="1" :stop-color="attribute.colors[11]" stop-opacity="1" /> 173 + <stop offset="0" :stop-color="attribute.bgColor5" stop-opacity="1" />
  174 + <stop offset="1" :stop-color="attribute.bgColor6" stop-opacity="1" />
175 </linearGradient> 175 </linearGradient>
176 <filter 176 <filter
177 id="decorates10_filter_8" 177 id="decorates10_filter_8"
@@ -7,14 +7,15 @@ import { chartInitConfig } from '@/settings/designSetting' @@ -7,14 +7,15 @@ import { chartInitConfig } from '@/settings/designSetting'
7 export const option = { 7 export const option = {
8 dataset: '我是标题', 8 dataset: '我是标题',
9 attribute: { 9 attribute: {
10 - linearColors: ['#0559A3', '#0654A3', '#2AFFFF', '#2AFFFF', '#2affff', ' #2affff', '#16d9d9'], 10 + bgColor:'#0559A3',
  11 + bgRightColor:'#2AFFFF',
  12 + rect17:'#16D9D9',
11 fontSize: 20, 13 fontSize: 20,
12 fontPos: { 14 fontPos: {
13 x: 0, 15 x: 0,
14 y: 20 16 y: 20
15 }, 17 },
16 fontColor: '#2AFFFF', 18 fontColor: '#2AFFFF',
17 - lineColor: '#2AFFFF'  
18 } 19 }
19 } 20 }
20 21
@@ -20,30 +20,28 @@ @@ -20,30 +20,28 @@
20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button> 20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
21 </SettingItem> 21 </SettingItem>
22 </SettingItemBox> 22 </SettingItemBox>
23 - <SettingItemBox  
24 - :name="`装饰颜色-${index + 1}`"  
25 - v-for="(item, index) in optionData.attribute.linearColors"  
26 - :key="index"  
27 - > 23 + <SettingItemBox :name="`左边装饰`">
28 <SettingItem name="颜色"> 24 <SettingItem name="颜色">
29 - <n-color-picker  
30 - size="small"  
31 - :modes="['hex']"  
32 - v-model:value="optionData.attribute.linearColors[index]"  
33 - ></n-color-picker> 25 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor"></n-color-picker>
34 </SettingItem> 26 </SettingItem>
35 <SettingItem> 27 <SettingItem>
36 - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">  
37 - 恢复默认  
38 - </n-button> 28 + <n-button size="small" @click="optionData.attribute.bgColor = '#0559A3'"> 恢复默认 </n-button>
39 </SettingItem> 29 </SettingItem>
40 </SettingItemBox> 30 </SettingItemBox>
41 - <SettingItemBox :name="`装饰颜色8`"> 31 + <SettingItemBox :name="`右边装饰`">
42 <SettingItem name="颜色"> 32 <SettingItem name="颜色">
43 - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.lineColor"></n-color-picker> 33 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgRightColor"></n-color-picker>
44 </SettingItem> 34 </SettingItem>
45 <SettingItem> 35 <SettingItem>
46 - <n-button size="small" @click="optionData.attribute.lineColor = '#2AFFFF'"> 恢复默认 </n-button> 36 + <n-button size="small" @click="optionData.attribute.bgRightColor = '#2AFFFF'"> 恢复默认 </n-button>
  37 + </SettingItem>
  38 + </SettingItemBox>
  39 + <SettingItemBox :name="`矩形装饰`">
  40 + <SettingItem name="颜色">
  41 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.rect17"></n-color-picker>
  42 + </SettingItem>
  43 + <SettingItem>
  44 + <n-button size="small" @click="optionData.attribute.rect17 = '#16D9D9'"> 恢复默认 </n-button>
47 </SettingItem> 45 </SettingItem>
48 </SettingItemBox> 46 </SettingItemBox>
49 </CollapseItem> 47 </CollapseItem>
@@ -9,12 +9,12 @@ @@ -9,12 +9,12 @@
9 > 9 >
10 <defs> 10 <defs>
11 <linearGradient id="linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 11 <linearGradient id="linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
12 - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />  
13 - <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="0" /> 12 + <stop offset="0" :stop-color="attribute.bgColor" stop-opacity="1" />
  13 + <stop offset="1" :stop-color="attribute.bgColor" stop-opacity="0" />
14 </linearGradient> 14 </linearGradient>
15 <linearGradient id="linear_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 15 <linearGradient id="linear_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
16 - <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="0" />  
17 - <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="0.2" /> 16 + <stop offset="0" :stop-color="attribute.bgRightColor" stop-opacity="0" />
  17 + <stop offset="1" :stop-color="attribute.bgRightColor" stop-opacity="0.2" />
18 </linearGradient> 18 </linearGradient>
19 </defs> 19 </defs>
20 <g opacity="1" transform="translate(0 0) rotate(0 246 15)"> 20 <g opacity="1" transform="translate(0 0) rotate(0 246 15)">
@@ -45,7 +45,7 @@ @@ -45,7 +45,7 @@
45 <path 45 <path
46 id="矩形 21" 46 id="矩形 21"
47 fill-rule="evenodd" 47 fill-rule="evenodd"
48 - :style="{ fill: attribute.lineColor }" 48 + :style="{ fill: attribute.bgRightColor }"
49 transform="translate(0 0) rotate(0 0.5 15)" 49 transform="translate(0 0) rotate(0 0.5 15)"
50 opacity="1" 50 opacity="1"
51 :d="`M0,${h}L1,${h}L1,0L0,0L0,${h}Z`" 51 :d="`M0,${h}L1,${h}L1,0L0,0L0,${h}Z`"
@@ -54,7 +54,7 @@ @@ -54,7 +54,7 @@
54 <path 54 <path
55 id="矩形 22" 55 id="矩形 22"
56 fill-rule="evenodd" 56 fill-rule="evenodd"
57 - :style="{ fill: attribute.linearColors[4] }" 57 + :style="{ fill: attribute.rect17 }"
58 transform="translate(2 0) rotate(0 5.5 3.5)" 58 transform="translate(2 0) rotate(0 5.5 3.5)"
59 opacity="1" 59 opacity="1"
60 :d="`M6,7 L11,7 L5,0 L0,0 L6,7 Z`" 60 :d="`M6,7 L11,7 L5,0 L0,0 L6,7 Z`"
@@ -62,7 +62,7 @@ @@ -62,7 +62,7 @@
62 <path 62 <path
63 id="圆形 7" 63 id="圆形 7"
64 fill-rule="evenodd" 64 fill-rule="evenodd"
65 - :style="{ fill: attribute.linearColors[5] }" 65 + :style="{ fill: attribute.rect17 }"
66 transform="translate(0 5) rotate(0 2 2)" 66 transform="translate(0 5) rotate(0 2 2)"
67 opacity="1" 67 opacity="1"
68 :d="`M2,0 C0.9,0 0,0.9 0,2 C0,3.1 0.9,4 2,4 C3.1,4 4,3.1 4,2 C4,0.9 3.1,0 2,0 Z`" 68 :d="`M2,0 C0.9,0 0,0.9 0,2 C0,3.1 0.9,4 2,4 C3.1,4 4,3.1 4,2 C4,0.9 3.1,0 2,0 Z`"
@@ -70,7 +70,7 @@ @@ -70,7 +70,7 @@
70 <path 70 <path
71 id="矩形 22" 71 id="矩形 22"
72 fill-rule="evenodd" 72 fill-rule="evenodd"
73 - :style="{ fill: attribute.linearColors[6] }" 73 + :style="{ fill: attribute.rect17 }"
74 transform="translate(2 7) rotate(0 5.5 3.5)" 74 transform="translate(2 7) rotate(0 5.5 3.5)"
75 opacity="1" 75 opacity="1"
76 :d="`M6,0L0,7L5,7L11,0L6,0Z `" 76 :d="`M6,0L0,7L5,7L11,0L6,0Z `"
@@ -7,7 +7,11 @@ import { chartInitConfig } from '@/settings/designSetting' @@ -7,7 +7,11 @@ import { chartInitConfig } from '@/settings/designSetting'
7 export const option = { 7 export const option = {
8 dataset: '我是标题', 8 dataset: '我是标题',
9 attribute: { 9 attribute: {
10 - linearColors: ['#21649C', '#060F1E', '#2AFFFF', '#000000', '#ffcc33', '#ffcc33'], 10 + bgLeftColor1:'#21649C',
  11 + bgLeftColor2:'#060F1E',
  12 + bgLeftColor3:'#2AFFFF',
  13 + bgLeftColor4:'#000000',
  14 + rect19:'#FFCC33',
11 fontSize: 20, 15 fontSize: 20,
12 fontPos: { 16 fontPos: {
13 x: 0, 17 x: 0,
@@ -20,22 +20,44 @@ @@ -20,22 +20,44 @@
20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button> 20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
21 </SettingItem> 21 </SettingItem>
22 </SettingItemBox> 22 </SettingItemBox>
23 - <SettingItemBox  
24 - :name="`装饰颜色-${index + 1}`"  
25 - v-for="(item, index) in optionData.attribute.linearColors"  
26 - :key="index"  
27 - > 23 + <SettingItemBox :name="`左边装饰1`">
28 <SettingItem name="颜色"> 24 <SettingItem name="颜色">
29 - <n-color-picker  
30 - size="small"  
31 - :modes="['hex']"  
32 - v-model:value="optionData.attribute.linearColors[index]"  
33 - ></n-color-picker> 25 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgLeftColor1"></n-color-picker>
34 </SettingItem> 26 </SettingItem>
35 <SettingItem> 27 <SettingItem>
36 - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">  
37 - 恢复默认  
38 - </n-button> 28 + <n-button size="small" @click="optionData.attribute.bgLeftColor1 = '#21649C'"> 恢复默认 </n-button>
  29 + </SettingItem>
  30 + </SettingItemBox>
  31 + <SettingItemBox :name="`右边装饰1`">
  32 + <SettingItem name="颜色">
  33 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgLeftColor2"></n-color-picker>
  34 + </SettingItem>
  35 + <SettingItem>
  36 + <n-button size="small" @click="optionData.attribute.bgLeftColor2 = '#060F1E'"> 恢复默认 </n-button>
  37 + </SettingItem>
  38 + </SettingItemBox>
  39 + <SettingItemBox :name="`右边装饰3`">
  40 + <SettingItem name="颜色">
  41 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgLeftColor3"></n-color-picker>
  42 + </SettingItem>
  43 + <SettingItem>
  44 + <n-button size="small" @click="optionData.attribute.bgLeftColor3 = '#2AFFFF'"> 恢复默认 </n-button>
  45 + </SettingItem>
  46 + </SettingItemBox>
  47 + <SettingItemBox :name="`右边装饰4`">
  48 + <SettingItem name="颜色">
  49 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgLeftColor4"></n-color-picker>
  50 + </SettingItem>
  51 + <SettingItem>
  52 + <n-button size="small" @click="optionData.attribute.bgLeftColor4 = '#000000'"> 恢复默认 </n-button>
  53 + </SettingItem>
  54 + </SettingItemBox>
  55 + <SettingItemBox :name="`矩形装饰`">
  56 + <SettingItem name="颜色">
  57 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.rect19"></n-color-picker>
  58 + </SettingItem>
  59 + <SettingItem>
  60 + <n-button size="small" @click="optionData.attribute.rect19 = '#FFCC33'"> 恢复默认 </n-button>
39 </SettingItem> 61 </SettingItem>
40 </SettingItemBox> 62 </SettingItemBox>
41 </CollapseItem> 63 </CollapseItem>
@@ -3,12 +3,12 @@ @@ -3,12 +3,12 @@
3 <svg :width="w" :height="h" fill="none"> 3 <svg :width="w" :height="h" fill="none">
4 <defs xmlns="http://www.w3.org/2000/svg"> 4 <defs xmlns="http://www.w3.org/2000/svg">
5 <linearGradient id="title2_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 5 <linearGradient id="title2_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
6 - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />  
7 - <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="1" /> 6 + <stop offset="0" :stop-color="attribute.bgLeftColor1" stop-opacity="1" />
  7 + <stop offset="1" :stop-color="attribute.bgLeftColor2" stop-opacity="1" />
8 </linearGradient> 8 </linearGradient>
9 <linearGradient id="title2_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 9 <linearGradient id="title2_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
10 - <stop offset="0" :stop-color="attribute.linearColors[3]" stop-opacity="1" />  
11 - <stop offset="1" :stop-color="attribute.linearColors[4]" stop-opacity="0" /> 10 + <stop offset="0" :stop-color="attribute.bgLeftColor3" stop-opacity="1" />
  11 + <stop offset="1" :stop-color="attribute.bgLeftColor4" stop-opacity="0" />
12 </linearGradient> 12 </linearGradient>
13 </defs> 13 </defs>
14 <g opacity="1" transform="translate(0 0) rotate(0 160 15)"> 14 <g opacity="1" transform="translate(0 0) rotate(0 160 15)">
@@ -47,7 +47,7 @@ @@ -47,7 +47,7 @@
47 <path 47 <path
48 id="矩形 title2_d" 48 id="矩形 title2_d"
49 fill-rule="evenodd" 49 fill-rule="evenodd"
50 - :style="{ fill: attribute.linearColors[4] }" 50 + :style="{ fill: attribute.rect19 }"
51 :transform="`translate(9 ${h / 2 - 15 / 2}) rotate(0 3.5 7.5)`" 51 :transform="`translate(9 ${h / 2 - 15 / 2}) rotate(0 3.5 7.5)`"
52 opacity="1" 52 opacity="1"
53 d="M0,15L2,15L7,0L5,0L0,15Z " 53 d="M0,15L2,15L7,0L5,0L0,15Z "
@@ -55,7 +55,7 @@ @@ -55,7 +55,7 @@
55 <path 55 <path
56 id="矩形 title2_d" 56 id="矩形 title2_d"
57 fill-rule="evenodd" 57 fill-rule="evenodd"
58 - :style="{ fill: attribute.linearColors[5] }" 58 + :style="{ fill: attribute.rect19}"
59 :transform="`translate(15 ${h / 2 - 15 / 2}) rotate(0 3.5 7.5)`" 59 :transform="`translate(15 ${h / 2 - 15 / 2}) rotate(0 3.5 7.5)`"
60 opacity="1" 60 opacity="1"
61 d="M0,15L2,15L7,0L5,0L0,15Z " 61 d="M0,15L2,15L7,0L5,0L0,15Z "
@@ -7,20 +7,9 @@ import { chartInitConfig } from '@/settings/designSetting' @@ -7,20 +7,9 @@ import { chartInitConfig } from '@/settings/designSetting'
7 export const option = { 7 export const option = {
8 dataset: '我是标题', 8 dataset: '我是标题',
9 attribute: { 9 attribute: {
10 - linearColors: [  
11 - '#21649C',  
12 - '#060F1E',  
13 - '#2AFFFF',  
14 - '#2AFFFF',  
15 - '#2AFFFF',  
16 - '#2AFFFF',  
17 - '#2affff',  
18 - '#16d9d9',  
19 - '#2affff',  
20 - '#2affff',  
21 - '#2affff',  
22 - '#2affff'  
23 - ], 10 + bgColor1:'#21649C',
  11 + bgColor2:'#060F1E',
  12 + bgColor3:'#2AFFFF',
24 fontSize: 20, 13 fontSize: 20,
25 fontPos: { 14 fontPos: {
26 x: 0, 15 x: 0,
@@ -20,22 +20,28 @@ @@ -20,22 +20,28 @@
20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button> 20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
21 </SettingItem> 21 </SettingItem>
22 </SettingItemBox> 22 </SettingItemBox>
23 - <SettingItemBox  
24 - :name="`装饰颜色-${index + 1}`"  
25 - v-for="(item, index) in optionData.attribute.linearColors"  
26 - :key="index"  
27 - > 23 + <SettingItemBox :name="`左边装饰`">
28 <SettingItem name="颜色"> 24 <SettingItem name="颜色">
29 - <n-color-picker  
30 - size="small"  
31 - :modes="['hex']"  
32 - v-model:value="optionData.attribute.linearColors[index]"  
33 - ></n-color-picker> 25 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
34 </SettingItem> 26 </SettingItem>
35 <SettingItem> 27 <SettingItem>
36 - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">  
37 - 恢复默认  
38 - </n-button> 28 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#21649C'"> 恢复默认 </n-button>
  29 + </SettingItem>
  30 + </SettingItemBox>
  31 + <SettingItemBox :name="`右边装饰`">
  32 + <SettingItem name="颜色">
  33 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor2"></n-color-picker>
  34 + </SettingItem>
  35 + <SettingItem>
  36 + <n-button size="small" @click="optionData.attribute.bgColor2 = '#060F1E'"> 恢复默认 </n-button>
  37 + </SettingItem>
  38 + </SettingItemBox>
  39 + <SettingItemBox :name="`其他装饰`">
  40 + <SettingItem name="颜色">
  41 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor3"></n-color-picker>
  42 + </SettingItem>
  43 + <SettingItem>
  44 + <n-button size="small" @click="optionData.attribute.bgColor3 = '#2AFFFF'"> 恢复默认 </n-button>
39 </SettingItem> 45 </SettingItem>
40 </SettingItemBox> 46 </SettingItemBox>
41 </CollapseItem> 47 </CollapseItem>
@@ -3,16 +3,16 @@ @@ -3,16 +3,16 @@
3 <svg :width="w" :height="h" fill="none"> 3 <svg :width="w" :height="h" fill="none">
4 <defs> 4 <defs>
5 <linearGradient id="title3_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 5 <linearGradient id="title3_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
6 - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />  
7 - <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="1" /> 6 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="1" />
  7 + <stop offset="1" :stop-color="attribute.bgColor2" stop-opacity="1" />
8 </linearGradient> 8 </linearGradient>
9 <linearGradient id="title3_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 9 <linearGradient id="title3_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
10 - <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="1" />  
11 - <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="0" /> 10 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  11 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="0" />
12 </linearGradient> 12 </linearGradient>
13 <linearGradient id="title3_2" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 13 <linearGradient id="title3_2" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
14 - <stop offset="0" :stop-color="attribute.linearColors[4]" stop-opacity="1" />  
15 - <stop offset="1" :stop-color="attribute.linearColors[5]" stop-opacity="0" /> 14 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  15 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="0" />
16 </linearGradient> 16 </linearGradient>
17 </defs> 17 </defs>
18 <g opacity="1" transform="translate(-6.249999273677531e-8 0.5) rotate(0 160.00000003125 15.000000000000005)"> 18 <g opacity="1" transform="translate(-6.249999273677531e-8 0.5) rotate(0 160.00000003125 15.000000000000005)">
@@ -54,13 +54,13 @@ @@ -54,13 +54,13 @@
54 /> 54 />
55 <path 55 <path
56 id="路径 5" 56 id="路径 5"
57 - :style="{ stroke: attribute.linearColors[10], strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }" 57 + :style="{ stroke: attribute.bgColor3, strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }"
58 transform="translate(0 0.0005) rotate(0 2.000000062499999 0)" 58 transform="translate(0 0.0005) rotate(0 2.000000062499999 0)"
59 d="M0,0L4,0 " 59 d="M0,0L4,0 "
60 /> 60 />
61 <path 61 <path
62 id="路径 5" 62 id="路径 5"
63 - :style="{ stroke: attribute.linearColors[11], strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }" 63 + :style="{ stroke: attribute.bgColor3, strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }"
64 :transform="`translate(0 ${h - 1}) rotate(0 2.000000062499999 0)`" 64 :transform="`translate(0 ${h - 1}) rotate(0 2.000000062499999 0)`"
65 d="M0,0 L4,0 " 65 d="M0,0 L4,0 "
66 /> 66 />
@@ -68,7 +68,7 @@ @@ -68,7 +68,7 @@
68 <path 68 <path
69 id="三角形 1" 69 id="三角形 1"
70 fill-rule="evenodd" 70 fill-rule="evenodd"
71 - :style="{ fill: attribute.linearColors[6] }" 71 + :style="{ fill: attribute.bgColor3 }"
72 transform="translate(4 0) rotate(0 6.598076211353316 4.5)" 72 transform="translate(4 0) rotate(0 6.598076211353316 4.5)"
73 opacity="1" 73 opacity="1"
74 d="M2.8,9L13.2,9L0,0L2.8,9Z " 74 d="M2.8,9L13.2,9L0,0L2.8,9Z "
@@ -76,7 +76,7 @@ @@ -76,7 +76,7 @@
76 <path 76 <path
77 id="三角形 1" 77 id="三角形 1"
78 fill-rule="evenodd" 78 fill-rule="evenodd"
79 - :style="{ fill: attribute.linearColors[7] }" 79 + :style="{ fill: attribute.bgColor3 }"
80 transform="translate(4 9) rotate(0 6.598076211353316 4.5)" 80 transform="translate(4 9) rotate(0 6.598076211353316 4.5)"
81 opacity="1" 81 opacity="1"
82 d="M13.2,0L2.8,0L0,9L13.2,0Z " 82 d="M13.2,0L2.8,0L0,9L13.2,0Z "
@@ -84,7 +84,7 @@ @@ -84,7 +84,7 @@
84 <path 84 <path
85 id="圆形 7" 85 id="圆形 7"
86 fill-rule="evenodd" 86 fill-rule="evenodd"
87 - :style="{ fill: attribute.linearColors[8] }" 87 + :style="{ fill: attribute.bgColor3 }"
88 transform="translate(0 7) rotate(0 2 2)" 88 transform="translate(0 7) rotate(0 2 2)"
89 opacity="1" 89 opacity="1"
90 d="M2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0Z " 90 d="M2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0Z "
@@ -93,7 +93,7 @@ @@ -93,7 +93,7 @@
93 <path 93 <path
94 id="矩形 17" 94 id="矩形 17"
95 fill-rule="evenodd" 95 fill-rule="evenodd"
96 - :style="{ fill: attribute.linearColors[9] }" 96 + :style="{ fill: attribute.bgColor3 }"
97 transform="translate(6.249999895402425e-8 2) rotate(0 0.5 13)" 97 transform="translate(6.249999895402425e-8 2) rotate(0 0.5 13)"
98 opacity="1" 98 opacity="1"
99 :d="`M0,${h - 5}L1,${h - 5}L1,0L0,0L0,${h - 5}Z`" 99 :d="`M0,${h - 5}L1,${h - 5}L1,0L0,0L0,${h - 5}Z`"
@@ -7,18 +7,7 @@ import { chartInitConfig } from '@/settings/designSetting' @@ -7,18 +7,7 @@ import { chartInitConfig } from '@/settings/designSetting'
7 export const option = { 7 export const option = {
8 dataset: '我是标题', 8 dataset: '我是标题',
9 attribute: { 9 attribute: {
10 - linearColors: [  
11 - '#2AFFFF',  
12 - '#2AFFFF',  
13 - '#2affff',  
14 - '#2affff',  
15 - '#2affff',  
16 - '#2affff',  
17 - '#2affff',  
18 - '#2affff',  
19 - '#2affff',  
20 - '#2affff',  
21 - ], 10 + bgColor1:'#2AFFFF',
22 fontSize: 20, 11 fontSize: 20,
23 fontPos: { 12 fontPos: {
24 x: 0, 13 x: 0,
@@ -20,22 +20,12 @@ @@ -20,22 +20,12 @@
20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button> 20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
21 </SettingItem> 21 </SettingItem>
22 </SettingItemBox> 22 </SettingItemBox>
23 - <SettingItemBox  
24 - :name="`装饰颜色-${index + 1}`"  
25 - v-for="(item, index) in optionData.attribute.linearColors"  
26 - :key="index"  
27 - > 23 + <SettingItemBox :name="`装饰`">
28 <SettingItem name="颜色"> 24 <SettingItem name="颜色">
29 - <n-color-picker  
30 - size="small"  
31 - :modes="['hex']"  
32 - v-model:value="optionData.attribute.linearColors[index]"  
33 - ></n-color-picker> 25 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
34 </SettingItem> 26 </SettingItem>
35 <SettingItem> 27 <SettingItem>
36 - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">  
37 - 恢复默认  
38 - </n-button> 28 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#2AFFFF'"> 恢复默认 </n-button>
39 </SettingItem> 29 </SettingItem>
40 </SettingItemBox> 30 </SettingItemBox>
41 </CollapseItem> 31 </CollapseItem>
@@ -9,14 +9,14 @@ @@ -9,14 +9,14 @@
9 > 9 >
10 <defs> 10 <defs>
11 <linearGradient id="subtitle4_linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 11 <linearGradient id="subtitle4_linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
12 - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="0.5" />  
13 - <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="0" /> 12 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="0.5" />
  13 + <stop offset="1" :stop-color="attribute.bgColor1" stop-opacity="0" />
14 </linearGradient> 14 </linearGradient>
15 </defs> 15 </defs>
16 <g opacity="1" :transform="`translate(0 ${h / 2 - 10}) rotate(0 248 17.5)`"> 16 <g opacity="1" :transform="`translate(0 ${h / 2 - 10}) rotate(0 248 17.5)`">
17 <path 17 <path
18 id="路径 13" 18 id="路径 13"
19 - :style="{ stroke: attribute.linearColors[2], strokeWidth: 1, strokeOpacity: 1 }" 19 + :style="{ stroke: attribute.bgColor1, strokeWidth: 1, strokeOpacity: 1 }"
20 :transform="`translate(8 12) rotate(0 243.5 8)`" 20 :transform="`translate(8 12) rotate(0 243.5 8)`"
21 :d="`M0,0 L14.01,16 L${w},16`" 21 :d="`M0,0 L14.01,16 L${w},16`"
22 /> 22 />
@@ -39,27 +39,27 @@ @@ -39,27 +39,27 @@
39 <path 39 <path
40 id="圆形 15" 40 id="圆形 15"
41 fill-rule="evenodd" 41 fill-rule="evenodd"
42 - :style="{ fill: attribute.linearColors[3] }" 42 + :style="{ fill: attribute.bgColor1 }"
43 transform="translate(6 10) rotate(0 2.5 2.5)" 43 transform="translate(6 10) rotate(0 2.5 2.5)"
44 opacity="1" 44 opacity="1"
45 d="M2.5,0C1.12,0 0,1.12 0,2.5C0,3.88 1.12,5 2.5,5C3.88,5 5,3.88 5,2.5C5,1.12 3.88,0 2.5,0Z " 45 d="M2.5,0C1.12,0 0,1.12 0,2.5C0,3.88 1.12,5 2.5,5C3.88,5 5,3.88 5,2.5C5,1.12 3.88,0 2.5,0Z "
46 /> 46 />
47 <path 47 <path
48 id="圆形 15" 48 id="圆形 15"
49 - :style="{ stroke: attribute.linearColors[4], strokeWidth: 0.5, strokeOpacity: 0.5 }" 49 + :style="{ stroke: attribute.bgColor1, strokeWidth: 0.5, strokeOpacity: 0.5 }"
50 transform="translate(3 7) rotate(0 5.5 5.5)" 50 transform="translate(3 7) rotate(0 5.5 5.5)"
51 d="M5.5,0C2.46,0 0,2.46 0,5.5C0,8.54 2.46,11 5.5,11C8.54,11 11,8.54 11,5.5C11,2.46 8.54,0 5.5,0Z " 51 d="M5.5,0C2.46,0 0,2.46 0,5.5C0,8.54 2.46,11 5.5,11C8.54,11 11,8.54 11,5.5C11,2.46 8.54,0 5.5,0Z "
52 /> 52 />
53 <path 53 <path
54 id="圆形 15" 54 id="圆形 15"
55 - :style="{ stroke: attribute.linearColors[5], strokeWidth: 0.5, strokeOpacity: 0.19 }" 55 + :style="{ stroke: attribute.bgColor1, strokeWidth: 0.5, strokeOpacity: 0.19 }"
56 transform="translate(0 4) rotate(0 8.5 8.5)" 56 transform="translate(0 4) rotate(0 8.5 8.5)"
57 d="M8.5,0C3.81,0 0,3.81 0,8.5C0,13.19 3.81,17 8.5,17C13.19,17 17,13.19 17,8.5C17,3.81 13.19,0 8.5,0Z " 57 d="M8.5,0C3.81,0 0,3.81 0,8.5C0,13.19 3.81,17 8.5,17C13.19,17 17,13.19 17,8.5C17,3.81 13.19,0 8.5,0Z "
58 /> 58 />
59 <path 59 <path
60 id="圆形 16" 60 id="圆形 16"
61 fill-rule="evenodd" 61 fill-rule="evenodd"
62 - :style="{ fill: attribute.linearColors[6] }" 62 + :style="{ fill: attribute.bgColor1 }"
63 transform="translate(2.5 12) rotate(0 1 1)" 63 transform="translate(2.5 12) rotate(0 1 1)"
64 opacity="1" 64 opacity="1"
65 d="M1,0C0.45,0 0,0.45 0,1C0,1.55 0.45,2 1,2C1.55,2 2,1.55 2,1C2,0.45 1.55,0 1,0Z " 65 d="M1,0C0.45,0 0,0.45 0,1C0,1.55 0.45,2 1,2C1.55,2 2,1.55 2,1C2,0.45 1.55,0 1,0Z "
@@ -67,7 +67,7 @@ @@ -67,7 +67,7 @@
67 <path 67 <path
68 id="圆形 16" 68 id="圆形 16"
69 fill-rule="evenodd" 69 fill-rule="evenodd"
70 - :style="{ fill: attribute.linearColors[7] }" 70 + :style="{ fill: attribute.bgColor1 }"
71 transform="translate(12.5 12) rotate(0 1 1)" 71 transform="translate(12.5 12) rotate(0 1 1)"
72 opacity="1" 72 opacity="1"
73 d="M1,0C0.45,0 0,0.45 0,1C0,1.55 0.45,2 1,2C1.55,2 2,1.55 2,1C2,0.45 1.55,0 1,0Z " 73 d="M1,0C0.45,0 0,0.45 0,1C0,1.55 0.45,2 1,2C1.55,2 2,1.55 2,1C2,0.45 1.55,0 1,0Z "
@@ -75,7 +75,7 @@ @@ -75,7 +75,7 @@
75 <path 75 <path
76 id="圆形 16" 76 id="圆形 16"
77 fill-rule="evenodd" 77 fill-rule="evenodd"
78 - :style="{ fill: attribute.linearColors[8] }" 78 + :style="{ fill: attribute.bgColor1 }"
79 transform="translate(8 6.5) rotate(0 1 1)" 79 transform="translate(8 6.5) rotate(0 1 1)"
80 opacity="1" 80 opacity="1"
81 d="M1,0C0.45,0 0,0.45 0,1C0,1.55 0.45,2 1,2C1.55,2 2,1.55 2,1C2,0.45 1.55,0 1,0Z " 81 d="M1,0C0.45,0 0,0.45 0,1C0,1.55 0.45,2 1,2C1.55,2 2,1.55 2,1C2,0.45 1.55,0 1,0Z "
@@ -83,7 +83,7 @@ @@ -83,7 +83,7 @@
83 <path 83 <path
84 id="圆形 17" 84 id="圆形 17"
85 fill-rule="evenodd" 85 fill-rule="evenodd"
86 - :style="{ fill: attribute.linearColors[9] }" 86 + :style="{ fill: attribute.bgColor1 }"
87 :transform="`translate(${w - 5} 26) rotate(0 2 2)`" 87 :transform="`translate(${w - 5} 26) rotate(0 2 2)`"
88 opacity="1" 88 opacity="1"
89 d="M2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0Z " 89 d="M2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0Z "
@@ -7,25 +7,9 @@ import { chartInitConfig } from '@/settings/designSetting' @@ -7,25 +7,9 @@ import { chartInitConfig } from '@/settings/designSetting'
7 export const option = { 7 export const option = {
8 dataset: '我是标题', 8 dataset: '我是标题',
9 attribute: { 9 attribute: {
10 - linearColors: [  
11 - '#060F1E',  
12 - '#032E52',  
13 - '#060F1E',  
14 - '#2affff',  
15 - '#2affff',  
16 - '#2affff',  
17 - '#2affff',  
18 - '#2affff',  
19 - '#2affff',  
20 - '#2affff',  
21 - '#2affff',  
22 - '#2affff',  
23 - '#2affff',  
24 - '#2affff',  
25 - '#2affff',  
26 - '#2affff',  
27 - '#2affff'  
28 - ], 10 + bgColor1:'#060F1E',
  11 + bgColor2:'#032E52',
  12 + bgColor3:'#2affff',
29 fontSize: 20, 13 fontSize: 20,
30 fontPos: { 14 fontPos: {
31 x: 0, 15 x: 0,
@@ -20,22 +20,28 @@ @@ -20,22 +20,28 @@
20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button> 20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
21 </SettingItem> 21 </SettingItem>
22 </SettingItemBox> 22 </SettingItemBox>
23 - <SettingItemBox  
24 - :name="`装饰颜色-${index + 1}`"  
25 - v-for="(item, index) in optionData.attribute.linearColors"  
26 - :key="index"  
27 - > 23 + <SettingItemBox :name="`两侧装饰`">
28 <SettingItem name="颜色"> 24 <SettingItem name="颜色">
29 - <n-color-picker  
30 - size="small"  
31 - :modes="['hex']"  
32 - v-model:value="optionData.attribute.linearColors[index]"  
33 - ></n-color-picker> 25 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
34 </SettingItem> 26 </SettingItem>
35 <SettingItem> 27 <SettingItem>
36 - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">  
37 - 恢复默认  
38 - </n-button> 28 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#060F1E'"> 恢复默认 </n-button>
  29 + </SettingItem>
  30 + </SettingItemBox>
  31 + <SettingItemBox :name="`中间装饰`">
  32 + <SettingItem name="颜色">
  33 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor2"></n-color-picker>
  34 + </SettingItem>
  35 + <SettingItem>
  36 + <n-button size="small" @click="optionData.attribute.bgColor2 = '#032E52'"> 恢复默认 </n-button>
  37 + </SettingItem>
  38 + </SettingItemBox>
  39 + <SettingItemBox :name="`其他装饰`">
  40 + <SettingItem name="颜色">
  41 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor3"></n-color-picker>
  42 + </SettingItem>
  43 + <SettingItem>
  44 + <n-button size="small" @click="optionData.attribute.bgColor3 = '#2affff'"> 恢复默认 </n-button>
39 </SettingItem> 45 </SettingItem>
40 </SettingItemBox> 46 </SettingItemBox>
41 </CollapseItem> 47 </CollapseItem>
@@ -9,27 +9,27 @@ @@ -9,27 +9,27 @@
9 > 9 >
10 <defs> 10 <defs>
11 <linearGradient id="subtitle5_linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 11 <linearGradient id="subtitle5_linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
12 - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />  
13 - <stop offset="0.498" :stop-color="attribute.linearColors[1]" stop-opacity="1" />  
14 - <stop offset="1" :stop-color="attribute.linearColors[2]" stop-opacity="1" /> 12 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="1" />
  13 + <stop offset="0.498" :stop-color="attribute.bgColor2" stop-opacity="1" />
  14 + <stop offset="1" :stop-color="attribute.bgColor1" stop-opacity="1" />
15 </linearGradient> 15 </linearGradient>
16 <linearGradient id="subtitle5_linear_1" x1="0%" y1="0%" x2="1%" y2="100%" gradientUnits="objectBoundingBox"> 16 <linearGradient id="subtitle5_linear_1" x1="0%" y1="0%" x2="1%" y2="100%" gradientUnits="objectBoundingBox">
17 - <stop offset="0" :stop-color="attribute.linearColors[3]" stop-opacity="0" />  
18 - <stop offset="0.5313" :stop-color="attribute.linearColors[4]" stop-opacity="1" />  
19 - <stop offset="0.9988" :stop-color="attribute.linearColors[5]" stop-opacity="0" /> 17 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="0" />
  18 + <stop offset="0.5313" :stop-color="attribute.bgColor3" stop-opacity="1" />
  19 + <stop offset="0.9988" :stop-color="attribute.bgColor3" stop-opacity="0" />
20 </linearGradient> 20 </linearGradient>
21 <linearGradient id="subtitle5_linear_2" x1="0%" y1="0%" x2="1%" y2="100%" gradientUnits="objectBoundingBox"> 21 <linearGradient id="subtitle5_linear_2" x1="0%" y1="0%" x2="1%" y2="100%" gradientUnits="objectBoundingBox">
22 - <stop offset="0" :stop-color="attribute.linearColors[6]" stop-opacity="0" />  
23 - <stop offset="0.5313" :stop-color="attribute.linearColors[7]" stop-opacity="1" />  
24 - <stop offset="0.9988" :stop-color="attribute.linearColors[8]" stop-opacity="0" /> 22 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="0" />
  23 + <stop offset="0.5313" :stop-color="attribute.bgColor3" stop-opacity="1" />
  24 + <stop offset="0.9988" :stop-color="attribute.bgColor3" stop-opacity="0" />
25 </linearGradient> 25 </linearGradient>
26 <linearGradient id="subtitle5_linear_3" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 26 <linearGradient id="subtitle5_linear_3" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
27 - <stop offset="0" :stop-color="attribute.linearColors[9]" stop-opacity="1" />  
28 - <stop offset="1" :stop-color="attribute.linearColors[10]" stop-opacity="0" /> 27 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  28 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="0" />
29 </linearGradient> 29 </linearGradient>
30 <linearGradient id="subtitle5_linear_4" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox"> 30 <linearGradient id="subtitle5_linear_4" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox">
31 - <stop offset="0" :stop-color="attribute.linearColors[11]" stop-opacity="1" />  
32 - <stop offset="1" :stop-color="attribute.linearColors[12]" stop-opacity="0" /> 31 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  32 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="0" />
33 </linearGradient> 33 </linearGradient>
34 </defs> 34 </defs>
35 <g opacity="1" transform="translate(0 0) rotate(0 246 15)"> 35 <g opacity="1" transform="translate(0 0) rotate(0 246 15)">
@@ -89,14 +89,14 @@ @@ -89,14 +89,14 @@
89 /> 89 />
90 <path 90 <path
91 id="多边形 1" 91 id="多边形 1"
92 - :style="{stroke: attribute.linearColors[13], strokeWidth: 1,strokeOpacity: 1}" 92 + :style="{stroke: attribute.bgColor3, strokeWidth: 1,strokeOpacity: 1}"
93 transform="translate(2.348076211353317 2.3480762113533187) rotate(30 6.415063509461105 6.4150635094611035)" 93 transform="translate(2.348076211353317 2.3480762113533187) rotate(30 6.415063509461105 6.4150635094611035)"
94 d="M6.42,0L0.86,3.21L0.86,9.62L6.42,12.83L11.97,9.62L11.97,3.21L6.42,0Z " 94 d="M6.42,0L0.86,3.21L0.86,9.62L6.42,12.83L11.97,9.62L11.97,3.21L6.42,0Z "
95 /> 95 />
96 <path 96 <path
97 id="圆形 8" 97 id="圆形 8"
98 fill-rule="evenodd" 98 fill-rule="evenodd"
99 - :style="{ fill: attribute.linearColors[14] }" 99 + :style="{ fill: attribute.bgColor3 }"
100 transform="translate(6.763139720814309 6.763139720814425) rotate(0 2 2)" 100 transform="translate(6.763139720814309 6.763139720814425) rotate(0 2 2)"
101 opacity="1" 101 opacity="1"
102 d="M2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0Z " 102 d="M2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0Z "
@@ -118,14 +118,14 @@ @@ -118,14 +118,14 @@
118 /> 118 />
119 <path 119 <path
120 id="多边形 1" 120 id="多边形 1"
121 - :style="{stroke: attribute.linearColors[15], strokeWidth: 1, strokeOpacity: 1}" 121 + :style="{stroke: attribute.bgColor3, strokeWidth: 1, strokeOpacity: 1}"
122 transform="translate(28.07836663013154 2.3480762113533187) rotate(-30 6.415063509461105 6.4150635094611035)" 122 transform="translate(28.07836663013154 2.3480762113533187) rotate(-30 6.415063509461105 6.4150635094611035)"
123 d="M0.86,9.62L6.42,12.83L11.97,9.62L11.97,3.21L6.42,0L0.86,3.21L0.86,9.62Z " 123 d="M0.86,9.62L6.42,12.83L11.97,9.62L11.97,3.21L6.42,0L0.86,3.21L0.86,9.62Z "
124 /> 124 />
125 <path 125 <path
126 id="圆形 8" 126 id="圆形 8"
127 fill-rule="evenodd" 127 fill-rule="evenodd"
128 - :style="{ fill: attribute.linearColors[16] }" 128 + :style="{ fill: attribute.bgColor3 }"
129 transform="translate(32.49343013959276 6.763139720814425) rotate(0 2 2)" 129 transform="translate(32.49343013959276 6.763139720814425) rotate(0 2 2)"
130 opacity="1" 130 opacity="1"
131 d="M2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4Z " 131 d="M2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4Z "
@@ -7,33 +7,14 @@ import { chartInitConfig } from '@/settings/designSetting' @@ -7,33 +7,14 @@ import { chartInitConfig } from '@/settings/designSetting'
7 export const option = { 7 export const option = {
8 dataset: '我是标题', 8 dataset: '我是标题',
9 attribute: { 9 attribute: {
10 - linearColors: [  
11 - '#0C4370',  
12 - '#0557A0',  
13 - '#2AFFFF',  
14 - '#2AFFFF',  
15 - '#2AFFFF',  
16 - '#2AFFFF',  
17 - '#ffcc33',  
18 - '#ffcc33',  
19 - '#25e4ea',  
20 - '#73faff',  
21 - '#73faff',  
22 - '#2affff',  
23 - '#2affff',  
24 - '#2affff',  
25 - '#2affff',  
26 - '#2affff',  
27 - '#2affff',  
28 - '#2affff',  
29 - '#2affff',  
30 - '#2affff',  
31 - '#2affff',  
32 - '#2affff',  
33 - '#2affff',  
34 - '#2affff',  
35 - '#009696'  
36 - ], 10 + bgColor1:'#0C4370',
  11 + bgColor2:'#0557A0',
  12 + bgColor3:'#2AFFFF',
  13 + bgColor4:'#ffcc33',
  14 + bgColor5:'#25e4ea',
  15 + bgColor6:'#73faff',
  16 + bgColor7:'#2affff',
  17 + bgColor8:'#009696',
37 fontSize: 20, 18 fontSize: 20,
38 fontPos: { 19 fontPos: {
39 x: 0, 20 x: 0,
@@ -20,22 +20,68 @@ @@ -20,22 +20,68 @@
20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button> 20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
21 </SettingItem> 21 </SettingItem>
22 </SettingItemBox> 22 </SettingItemBox>
23 - <SettingItemBox  
24 - :name="`装饰颜色-${index + 1}`"  
25 - v-for="(item, index) in optionData.attribute.linearColors"  
26 - :key="index"  
27 - >  
28 - <SettingItem name="颜色">  
29 - <n-color-picker  
30 - size="small"  
31 - :modes="['hex']"  
32 - v-model:value="optionData.attribute.linearColors[index]"  
33 - ></n-color-picker>  
34 - </SettingItem>  
35 - <SettingItem>  
36 - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">  
37 - 恢复默认  
38 - </n-button> 23 + <SettingItemBox :name="`左边装饰`">
  24 + <SettingItem name="颜色">
  25 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
  26 + </SettingItem>
  27 + <SettingItem>
  28 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#0C4370'"> 恢复默认 </n-button>
  29 + </SettingItem>
  30 + </SettingItemBox>
  31 + <SettingItemBox :name="`中间装饰`">
  32 + <SettingItem name="颜色">
  33 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor2"></n-color-picker>
  34 + </SettingItem>
  35 + <SettingItem>
  36 + <n-button size="small" @click="optionData.attribute.bgColor2 = '#0557A0'"> 恢复默认 </n-button>
  37 + </SettingItem>
  38 + </SettingItemBox>
  39 + <SettingItemBox :name="`上下边线装饰`">
  40 + <SettingItem name="颜色">
  41 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor3"></n-color-picker>
  42 + </SettingItem>
  43 + <SettingItem>
  44 + <n-button size="small" @click="optionData.attribute.bgColor3 = '#2AFFFF'"> 恢复默认 </n-button>
  45 + </SettingItem>
  46 + </SettingItemBox>
  47 + <SettingItemBox :name="`圆形装饰`">
  48 + <SettingItem name="颜色">
  49 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor4"></n-color-picker>
  50 + </SettingItem>
  51 + <SettingItem>
  52 + <n-button size="small" @click="optionData.attribute.bgColor4 = '#ffcc33'"> 恢复默认 </n-button>
  53 + </SettingItem>
  54 + </SettingItemBox>
  55 + <SettingItemBox :name="`圆形装饰`">
  56 + <SettingItem name="颜色">
  57 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor5"></n-color-picker>
  58 + </SettingItem>
  59 + <SettingItem>
  60 + <n-button size="small" @click="optionData.attribute.bgColor5 = '#25e4ea'"> 恢复默认 </n-button>
  61 + </SettingItem>
  62 + </SettingItemBox>
  63 + <SettingItemBox :name="`圆形装饰`">
  64 + <SettingItem name="颜色">
  65 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor6"></n-color-picker>
  66 + </SettingItem>
  67 + <SettingItem>
  68 + <n-button size="small" @click="optionData.attribute.bgColor6 = '#73faff'"> 恢复默认 </n-button>
  69 + </SettingItem>
  70 + </SettingItemBox>
  71 + <SettingItemBox :name="`其他装饰1`">
  72 + <SettingItem name="颜色">
  73 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor7"></n-color-picker>
  74 + </SettingItem>
  75 + <SettingItem>
  76 + <n-button size="small" @click="optionData.attribute.bgColor7 = '#2affff'"> 恢复默认 </n-button>
  77 + </SettingItem>
  78 + </SettingItemBox>
  79 + <SettingItemBox :name="`其他装饰2`">
  80 + <SettingItem name="颜色">
  81 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor8"></n-color-picker>
  82 + </SettingItem>
  83 + <SettingItem>
  84 + <n-button size="small" @click="optionData.attribute.bgColor8= '#009696'"> 恢复默认 </n-button>
39 </SettingItem> 85 </SettingItem>
40 </SettingItemBox> 86 </SettingItemBox>
41 </CollapseItem> 87 </CollapseItem>
@@ -9,16 +9,16 @@ @@ -9,16 +9,16 @@
9 > 9 >
10 <defs> 10 <defs>
11 <linearGradient id="subtitle6_linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 11 <linearGradient id="subtitle6_linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
12 - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />  
13 - <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="0" /> 12 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="1" />
  13 + <stop offset="1" :stop-color="attribute.bgColor2" stop-opacity="0" />
14 </linearGradient> 14 </linearGradient>
15 <linearGradient id="subtitle6_linear_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 15 <linearGradient id="subtitle6_linear_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
16 - <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="1" />  
17 - <stop offset="0.9988" :stop-color="attribute.linearColors[3]" stop-opacity="0" /> 16 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  17 + <stop offset="0.9988" :stop-color="attribute.bgColor3" stop-opacity="0" />
18 </linearGradient> 18 </linearGradient>
19 <linearGradient id="subtitle6_linear_2" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 19 <linearGradient id="subtitle6_linear_2" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
20 - <stop offset="0" :stop-color="attribute.linearColors[4]" stop-opacity="1" />  
21 - <stop offset="0.9988" :stop-color="attribute.linearColors[5]" stop-opacity="0" /> 20 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  21 + <stop offset="0.9988" :stop-color="attribute.bgColor3" stop-opacity="0" />
22 </linearGradient> 22 </linearGradient>
23 </defs> 23 </defs>
24 <g opacity="1" transform="translate(0 0) rotate(0 246 15)"> 24 <g opacity="1" transform="translate(0 0) rotate(0 246 15)">
@@ -66,46 +66,46 @@ @@ -66,46 +66,46 @@
66 <path 66 <path
67 id="圆形 18" 67 id="圆形 18"
68 fill-rule="evenodd" 68 fill-rule="evenodd"
69 - :style="{ fill: attribute.linearColors[6] }" 69 + :style="{ fill: attribute.bgColor4 }"
70 transform="translate(6 6) rotate(0 3 3)" 70 transform="translate(6 6) rotate(0 3 3)"
71 opacity="1" 71 opacity="1"
72 d="M3,0C1.34,0 0,1.34 0,3C0,4.66 1.34,6 3,6C4.66,6 6,4.66 6,3C6,1.34 4.66,0 3,0Z " 72 d="M3,0C1.34,0 0,1.34 0,3C0,4.66 1.34,6 3,6C4.66,6 6,4.66 6,3C6,1.34 4.66,0 3,0Z "
73 /> 73 />
74 <path 74 <path
75 id="圆形 18" 75 id="圆形 18"
76 - :style="{ stroke: attribute.linearColors[7], strokeWidth: 1, strokeOpacity: 1 }" 76 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 1 }"
77 transform="translate(3 3) rotate(0 6 6)" 77 transform="translate(3 3) rotate(0 6 6)"
78 d="M6,0C2.69,0 0,2.69 0,6C0,9.31 2.69,12 6,12C9.31,12 12,9.31 12,6C12,2.69 9.31,0 6,0Z " 78 d="M6,0C2.69,0 0,2.69 0,6C0,9.31 2.69,12 6,12C9.31,12 12,9.31 12,6C12,2.69 9.31,0 6,0Z "
79 /> 79 />
80 <path 80 <path
81 id="圆形 18" 81 id="圆形 18"
82 - :style="{ stroke: attribute.linearColors[8], strokeWidth: 1, strokeOpacity: 0.18 }" 82 + :style="{ stroke: attribute.bgColor5, strokeWidth: 1, strokeOpacity: 0.18 }"
83 transform="translate(0 0) rotate(0 9 9)" 83 transform="translate(0 0) rotate(0 9 9)"
84 d="M9,0C4.03,0 0,4.03 0,9C0,13.97 4.03,18 9,18C13.97,18 18,13.97 18,9C18,4.03 13.97,0 9,0Z " 84 d="M9,0C4.03,0 0,4.03 0,9C0,13.97 4.03,18 9,18C13.97,18 18,13.97 18,9C18,4.03 13.97,0 9,0Z "
85 /> 85 />
86 <path 86 <path
87 id="圆形 18" 87 id="圆形 18"
88 - :style="{ stroke: attribute.linearColors[9], strokeWidth: 1, strokeOpacity: 1 }" 88 + :style="{ stroke: attribute.bgColor6, strokeWidth: 1, strokeOpacity: 1 }"
89 transform="translate(0 0) rotate(0 4.5 4.5)" 89 transform="translate(0 0) rotate(0 4.5 4.5)"
90 d="M9,0C4.03,0 0,4.03 0,9 " 90 d="M9,0C4.03,0 0,4.03 0,9 "
91 /> 91 />
92 <path 92 <path
93 id="圆形 18" 93 id="圆形 18"
94 - :style="{ stroke: attribute.linearColors[10], strokeWidth: 1, strokeOpacity: 1 }" 94 + :style="{ stroke: attribute.bgColor6, strokeWidth: 1, strokeOpacity: 1 }"
95 transform="translate(9 9) rotate(180 4.5 4.5)" 95 transform="translate(9 9) rotate(180 4.5 4.5)"
96 d="M9,0C4.03,0 0,4.03 0,9 " 96 d="M9,0C4.03,0 0,4.03 0,9 "
97 /> 97 />
98 </g> 98 </g>
99 <path 99 <path
100 id="路径 14" 100 id="路径 14"
101 - :style="{ stroke: attribute.linearColors[11], strokeWidth: 0.5, strokeOpacity: 1 }" 101 + :style="{ stroke: attribute.bgColor7, strokeWidth: 0.5, strokeOpacity: 1 }"
102 :transform="`translate(28 ${h / 2 - 8 / 2 + 8}) rotate(0 230.25 4)`" 102 :transform="`translate(28 ${h / 2 - 8 / 2 + 8}) rotate(0 230.25 4)`"
103 :d="`M0,3 L7.49,8 L321.99,8 L332.25,0 L396.37,0 L401.44,4 L460.5,4 `" 103 :d="`M0,3 L7.49,8 L321.99,8 L332.25,0 L396.37,0 L401.44,4 L460.5,4 `"
104 /> 104 />
105 <path 105 <path
106 id="并集" 106 id="并集"
107 fill-rule="evenodd" 107 fill-rule="evenodd"
108 - :style="{ fill: attribute.linearColors[12] }" 108 + :style="{ fill: attribute.bgColor7 }"
109 :transform="`translate(375 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`" 109 :transform="`translate(375 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
110 opacity="0.5" 110 opacity="0.5"
111 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z " 111 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
@@ -113,7 +113,7 @@ @@ -113,7 +113,7 @@
113 <path 113 <path
114 id="并集" 114 id="并集"
115 fill-rule="evenodd" 115 fill-rule="evenodd"
116 - :style="{ fill: attribute.linearColors[13] }" 116 + :style="{ fill: attribute.bgColor7 }"
117 :transform="`translate(380 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`" 117 :transform="`translate(380 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
118 opacity="0.5" 118 opacity="0.5"
119 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z " 119 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
@@ -121,7 +121,7 @@ @@ -121,7 +121,7 @@
121 <path 121 <path
122 id="并集" 122 id="并集"
123 fill-rule="evenodd" 123 fill-rule="evenodd"
124 - :style="{ fill: attribute.linearColors[14] }" 124 + :style="{ fill: attribute.bgColor7 }"
125 :transform="`translate(385 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`" 125 :transform="`translate(385 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
126 opacity="0.5" 126 opacity="0.5"
127 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z " 127 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
@@ -129,7 +129,7 @@ @@ -129,7 +129,7 @@
129 <path 129 <path
130 id="并集" 130 id="并集"
131 fill-rule="evenodd" 131 fill-rule="evenodd"
132 - :style="{ fill: attribute.linearColors[15] }" 132 + :style="{ fill: attribute.bgColor7 }"
133 :transform="`translate(390 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`" 133 :transform="`translate(390 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
134 opacity="0.5" 134 opacity="0.5"
135 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z " 135 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
@@ -137,7 +137,7 @@ @@ -137,7 +137,7 @@
137 <path 137 <path
138 id="并集" 138 id="并集"
139 fill-rule="evenodd" 139 fill-rule="evenodd"
140 - :style="{ fill: attribute.linearColors[16] }" 140 + :style="{ fill: attribute.bgColor7 }"
141 :transform="`translate(395 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`" 141 :transform="`translate(395 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
142 opacity="0.5" 142 opacity="0.5"
143 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z " 143 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
@@ -145,7 +145,7 @@ @@ -145,7 +145,7 @@
145 <path 145 <path
146 id="并集" 146 id="并集"
147 fill-rule="evenodd" 147 fill-rule="evenodd"
148 - :style="{ fill: attribute.linearColors[17] }" 148 + :style="{ fill: attribute.bgColor7}"
149 :transform="`translate(400 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`" 149 :transform="`translate(400 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
150 opacity="0.5" 150 opacity="0.5"
151 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z " 151 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
@@ -153,7 +153,7 @@ @@ -153,7 +153,7 @@
153 <path 153 <path
154 id="并集" 154 id="并集"
155 fill-rule="evenodd" 155 fill-rule="evenodd"
156 - :style="{ fill: attribute.linearColors[18] }" 156 + :style="{ fill: attribute.bgColor7 }"
157 :transform="`translate(405 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`" 157 :transform="`translate(405 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
158 opacity="0.5" 158 opacity="0.5"
159 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z " 159 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
@@ -161,7 +161,7 @@ @@ -161,7 +161,7 @@
161 <path 161 <path
162 id="矩形 47" 162 id="矩形 47"
163 fill-rule="evenodd" 163 fill-rule="evenodd"
164 - :style="{ fill: attribute.linearColors[19] }" 164 + :style="{ fill: attribute.bgColor7 }"
165 :transform="`translate(346 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`" 165 :transform="`translate(346 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
166 opacity="1" 166 opacity="1"
167 d="M0,7L2,7L11,0L9,0L0,7Z " 167 d="M0,7L2,7L11,0L9,0L0,7Z "
@@ -169,7 +169,7 @@ @@ -169,7 +169,7 @@
169 <path 169 <path
170 id="矩形 47" 170 id="矩形 47"
171 fill-rule="evenodd" 171 fill-rule="evenodd"
172 - :style="{ fill: attribute.linearColors[20] }" 172 + :style="{ fill: attribute.bgColor7 }"
173 :transform="`translate(342 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`" 173 :transform="`translate(342 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
174 opacity="0.8" 174 opacity="0.8"
175 d="M0,7L2,7L11,0L9,0L0,7Z " 175 d="M0,7L2,7L11,0L9,0L0,7Z "
@@ -177,7 +177,7 @@ @@ -177,7 +177,7 @@
177 <path 177 <path
178 id="矩形 47" 178 id="矩形 47"
179 fill-rule="evenodd" 179 fill-rule="evenodd"
180 - :style="{ fill: attribute.linearColors[21] }" 180 + :style="{ fill: attribute.bgColor7 }"
181 :transform="`translate(338 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`" 181 :transform="`translate(338 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
182 opacity="0.6" 182 opacity="0.6"
183 d="M0,7L2,7L11,0L9,0L0,7Z " 183 d="M0,7L2,7L11,0L9,0L0,7Z "
@@ -185,14 +185,14 @@ @@ -185,14 +185,14 @@
185 <path 185 <path
186 id="矩形 47" 186 id="矩形 47"
187 fill-rule="evenodd" 187 fill-rule="evenodd"
188 - :style="{ fill: attribute.linearColors[22] }" 188 + :style="{ fill: attribute.bgColor7 }"
189 :transform="`translate(334 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`" 189 :transform="`translate(334 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
190 opacity="0.4" 190 opacity="0.4"
191 d="M0,7L2,7L11,0L9,0L0,7Z " 191 d="M0,7L2,7L11,0L9,0L0,7Z "
192 /> 192 />
193 <path 193 <path
194 id="路径 15" 194 id="路径 15"
195 - :style="{ stroke: attribute.linearColors[23], strokeWidth: 1, strokeOpacity: 1 }" 195 + :style="{ stroke: attribute.bgColor8, strokeWidth: 1, strokeOpacity: 1 }"
196 :transform="`translate(426 ${h / 2 - 4 / 2 + 3.5}) rotate(0 30.999999999999993 2)`" 196 :transform="`translate(426 ${h / 2 - 4 / 2 + 3.5}) rotate(0 30.999999999999993 2)`"
197 d="M0,4L25,4L33.5,0L62,0 " 197 d="M0,4L25,4L33.5,0L62,0 "
198 /> 198 />
@@ -7,21 +7,12 @@ import { chartInitConfig } from '@/settings/designSetting' @@ -7,21 +7,12 @@ import { chartInitConfig } from '@/settings/designSetting'
7 export const option = { 7 export const option = {
8 dataset: '我是标题', 8 dataset: '我是标题',
9 attribute: { 9 attribute: {
10 - linearColors: [  
11 - '#21649C',  
12 - '#060F1E',  
13 - '#2284D5',  
14 - '#000F1B',  
15 - '#2affff',  
16 - '#2affff',  
17 - '#2affff',  
18 - '#2affff',  
19 - '#2affff',  
20 - '#2affff',  
21 - '#ffcc33',  
22 - '#ffcc33',  
23 - '#ffcc33',  
24 - ], 10 + bgColor1:'#21649C',
  11 + bgColor2:'#060F1E',
  12 + bgColor3:'#2284D5',
  13 + bgColor4:'#000F1B',
  14 + bgColor5:'#2affff',
  15 + bgColor6:'#ffcc33',
25 fontSize: 20, 16 fontSize: 20,
26 fontPos: { 17 fontPos: {
27 x: 0, 18 x: 0,
@@ -20,22 +20,52 @@ @@ -20,22 +20,52 @@
20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button> 20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
21 </SettingItem> 21 </SettingItem>
22 </SettingItemBox> 22 </SettingItemBox>
23 - <SettingItemBox  
24 - :name="`装饰颜色-${index + 1}`"  
25 - v-for="(item, index) in optionData.attribute.linearColors"  
26 - :key="index"  
27 - >  
28 - <SettingItem name="颜色">  
29 - <n-color-picker  
30 - size="small"  
31 - :modes="['hex']"  
32 - v-model:value="optionData.attribute.linearColors[index]"  
33 - ></n-color-picker> 23 + <SettingItemBox :name="`左边装饰`">
  24 + <SettingItem name="颜色">
  25 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
  26 + </SettingItem>
  27 + <SettingItem>
  28 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#21649C'"> 恢复默认 </n-button>
  29 + </SettingItem>
  30 + </SettingItemBox>
  31 + <SettingItemBox :name="`右边装饰`">
  32 + <SettingItem name="颜色">
  33 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor2"></n-color-picker>
  34 + </SettingItem>
  35 + <SettingItem>
  36 + <n-button size="small" @click="optionData.attribute.bgColor2 = '#060F1E'"> 恢复默认 </n-button>
  37 + </SettingItem>
  38 + </SettingItemBox>
  39 + <SettingItemBox :name="`边框装饰`">
  40 + <SettingItem name="颜色">
  41 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor3"></n-color-picker>
  42 + </SettingItem>
  43 + <SettingItem>
  44 + <n-button size="small" @click="optionData.attribute.bgColor3 = '#2284D5'"> 恢复默认 </n-button>
  45 + </SettingItem>
  46 + </SettingItemBox>
  47 + <SettingItemBox :name="`正方形装饰`">
  48 + <SettingItem name="颜色">
  49 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor4"></n-color-picker>
  50 + </SettingItem>
  51 + <SettingItem>
  52 + <n-button size="small" @click="optionData.attribute.bgColor4 = '#000F1B'"> 恢复默认 </n-button>
  53 + </SettingItem>
  54 + </SettingItemBox>
  55 + <SettingItemBox :name="`其他装饰`">
  56 + <SettingItem name="颜色">
  57 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor5"></n-color-picker>
  58 + </SettingItem>
  59 + <SettingItem>
  60 + <n-button size="small" @click="optionData.attribute.bgColor5 = '#2affff'"> 恢复默认 </n-button>
  61 + </SettingItem>
  62 + </SettingItemBox>
  63 + <SettingItemBox :name="`菱形装饰`">
  64 + <SettingItem name="颜色">
  65 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor6"></n-color-picker>
34 </SettingItem> 66 </SettingItem>
35 <SettingItem> 67 <SettingItem>
36 - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">  
37 - 恢复默认  
38 - </n-button> 68 + <n-button size="small" @click="optionData.attribute.bgColor6 = '#ffcc33'"> 恢复默认 </n-button>
39 </SettingItem> 69 </SettingItem>
40 </SettingItemBox> 70 </SettingItemBox>
41 </CollapseItem> 71 </CollapseItem>
@@ -16,12 +16,12 @@ @@ -16,12 +16,12 @@
16 y2="50%" 16 y2="50%"
17 gradientUnits="objectBoundingBox" 17 gradientUnits="objectBoundingBox"
18 > 18 >
19 - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />  
20 - <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="1" /> 19 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="1" />
  20 + <stop offset="1" :stop-color="attribute.bgColor2" stop-opacity="1" />
21 </linearGradient> 21 </linearGradient>
22 <linearGradient id="subtitle7_linear_1" x1="0%" y1="50%" x2="87.75%" y2="50%" gradientUnits="objectBoundingBox"> 22 <linearGradient id="subtitle7_linear_1" x1="0%" y1="50%" x2="87.75%" y2="50%" gradientUnits="objectBoundingBox">
23 - <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="1" />  
24 - <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="1" /> 23 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  24 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="1" />
25 </linearGradient> 25 </linearGradient>
26 </defs> 26 </defs>
27 <g opacity="1" transform="translate(0 0) rotate(0 246 15.000499999999972)"> 27 <g opacity="1" transform="translate(0 0) rotate(0 246 15.000499999999972)">
@@ -62,7 +62,7 @@ @@ -62,7 +62,7 @@
62 <g opacity="1" :transform="`translate(7 ${h / 2 - 17 / 2 - 4}) rotate(0 9 9)`"> 62 <g opacity="1" :transform="`translate(7 ${h / 2 - 17 / 2 - 4}) rotate(0 9 9)`">
63 <rect 63 <rect
64 id="矩形 13" 64 id="矩形 13"
65 - :style="{ stroke: attribute.linearColors[4], strokeWidth: 1, strokeOpacity: 1 }" 65 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 1 }"
66 transform="translate(0 0) rotate(0 9 9)" 66 transform="translate(0 0) rotate(0 9 9)"
67 x="0.5" 67 x="0.5"
68 y="0.5" 68 y="0.5"
@@ -72,20 +72,20 @@ @@ -72,20 +72,20 @@
72 /> 72 />
73 <path 73 <path
74 id="直线 1" 74 id="直线 1"
75 - :style="{ stroke: attribute.linearColors[5], strokeWidth: 1, strokeOpacity: 0.43 }" 75 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 0.43 }"
76 transform="translate(1 1) rotate(0 8 8)" 76 transform="translate(1 1) rotate(0 8 8)"
77 d="M0,0L16,16 " 77 d="M0,0L16,16 "
78 /> 78 />
79 <path 79 <path
80 id="直线 1" 80 id="直线 1"
81 - :style="{ stroke: attribute.linearColors[6], strokeWidth: 1, strokeOpacity: 0.43 }" 81 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 0.43 }"
82 transform="translate(1 1) rotate(0 8 8)" 82 transform="translate(1 1) rotate(0 8 8)"
83 d="M16,0L0,16 " 83 d="M16,0L0,16 "
84 /> 84 />
85 <path 85 <path
86 id="矩形 14" 86 id="矩形 14"
87 fill-rule="evenodd" 87 fill-rule="evenodd"
88 - :style="{ fill: attribute.linearColors[7] }" 88 + :style="{ fill: attribute.bgColor4 }"
89 transform="translate(5 5) rotate(0 4 4)" 89 transform="translate(5 5) rotate(0 4 4)"
90 opacity="1" 90 opacity="1"
91 d="M0,8L8,8L8,0L0,0L0,8Z " 91 d="M0,8L8,8L8,0L0,0L0,8Z "
@@ -93,20 +93,20 @@ @@ -93,20 +93,20 @@
93 </g> 93 </g>
94 <path 94 <path
95 id="路径 4" 95 id="路径 4"
96 - :style="{ stroke: attribute.linearColors[8], strokeWidth: 1, strokeOpacity: 0.2 }" 96 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 0.2 }"
97 :transform="`translate(0 ${h - 10}) rotate(0 221.50000000000003 3.5)`" 97 :transform="`translate(0 ${h - 10}) rotate(0 221.50000000000003 3.5)`"
98 d="M0,7L435.04,7L443,0 " 98 d="M0,7L435.04,7L443,0 "
99 /> 99 />
100 <path 100 <path
101 id="路径 4" 101 id="路径 4"
102 - :style="{ stroke: attribute.linearColors[9], strokeWidth: 1, strokeOpacity: 1 }" 102 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 1 }"
103 :transform="`translate(0 ${h - 3}) rotate(0 17.5208019893046 0.0005)`" 103 :transform="`translate(0 ${h - 3}) rotate(0 17.5208019893046 0.0005)`"
104 d="M0,0L35.04,0 " 104 d="M0,0L35.04,0 "
105 /> 105 />
106 <path 106 <path
107 id="矩形 15" 107 id="矩形 15"
108 fill-rule="evenodd" 108 fill-rule="evenodd"
109 - :style="{ fill: attribute.linearColors[10] }" 109 + :style="{ fill: attribute.bgColor6 }"
110 :transform="`translate(441 ${h - 10}) rotate(0 9.5 3.5)`" 110 :transform="`translate(441 ${h - 10}) rotate(0 9.5 3.5)`"
111 opacity="0.2" 111 opacity="0.2"
112 d="M0,7L12.09,7L19,0L6.91,0L0,7Z " 112 d="M0,7L12.09,7L19,0L6.91,0L0,7Z "
@@ -114,7 +114,7 @@ @@ -114,7 +114,7 @@
114 <path 114 <path
115 id="矩形 15" 115 id="矩形 15"
116 fill-rule="evenodd" 116 fill-rule="evenodd"
117 - :style="{ fill: attribute.linearColors[11] }" 117 + :style="{ fill: attribute.bgColor6 }"
118 :transform="`translate(457 ${h - 10}) rotate(0 9.5 3.5)`" 118 :transform="`translate(457 ${h - 10}) rotate(0 9.5 3.5)`"
119 opacity="0.6" 119 opacity="0.6"
120 d="M0,7L12.09,7L19,0L6.91,0L0,7Z " 120 d="M0,7L12.09,7L19,0L6.91,0L0,7Z "
@@ -122,7 +122,7 @@ @@ -122,7 +122,7 @@
122 <path 122 <path
123 id="矩形 15" 123 id="矩形 15"
124 fill-rule="evenodd" 124 fill-rule="evenodd"
125 - :style="{ fill: attribute.linearColors[12] }" 125 + :style="{ fill: attribute.bgColor6 }"
126 :transform="`translate(473 ${h - 10}) rotate(0 9.5 3.5)`" 126 :transform="`translate(473 ${h - 10}) rotate(0 9.5 3.5)`"
127 opacity="1" 127 opacity="1"
128 d="M0,7L12.09,7L19,0L6.91,0L0,7Z " 128 d="M0,7L12.09,7L19,0L6.91,0L0,7Z "
@@ -7,16 +7,11 @@ import { chartInitConfig } from '@/settings/designSetting' @@ -7,16 +7,11 @@ import { chartInitConfig } from '@/settings/designSetting'
7 export const option = { 7 export const option = {
8 dataset: '我是标题', 8 dataset: '我是标题',
9 attribute: { 9 attribute: {
10 - linearColors: [  
11 - '#2AFFFF',  
12 - '#2AFFFF',  
13 - '#2AFFFF',  
14 - '#2AFFFF',  
15 - '#0084ff',  
16 - '#0d4ea8',  
17 - '#4592ff',  
18 - '#ffcc33',  
19 - ], 10 + bgColor1:'#2AFFFF',
  11 + bgColor2:'#0084ff',
  12 + bgColor3:'#0d4ea8',
  13 + bgColor4:'#4592ff',
  14 + bgColor5:'#ffcc33',
20 fontSize: 20, 15 fontSize: 20,
21 fontPos: { 16 fontPos: {
22 x: 0, 17 x: 0,
@@ -20,22 +20,44 @@ @@ -20,22 +20,44 @@
20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button> 20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
21 </SettingItem> 21 </SettingItem>
22 </SettingItemBox> 22 </SettingItemBox>
23 - <SettingItemBox  
24 - :name="`装饰颜色-${index + 1}`"  
25 - v-for="(item, index) in optionData.attribute.linearColors"  
26 - :key="index"  
27 - > 23 + <SettingItemBox :name="`上下边线装饰`">
28 <SettingItem name="颜色"> 24 <SettingItem name="颜色">
29 - <n-color-picker  
30 - size="small"  
31 - :modes="['hex']"  
32 - v-model:value="optionData.attribute.linearColors[index]"  
33 - ></n-color-picker> 25 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
34 </SettingItem> 26 </SettingItem>
35 <SettingItem> 27 <SettingItem>
36 - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">  
37 - 恢复默认  
38 - </n-button> 28 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#2affff'"> 恢复默认 </n-button>
  29 + </SettingItem>
  30 + </SettingItemBox>
  31 + <SettingItemBox :name="`背景装饰`">
  32 + <SettingItem name="颜色">
  33 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor2"></n-color-picker>
  34 + </SettingItem>
  35 + <SettingItem>
  36 + <n-button size="small" @click="optionData.attribute.bgColor2 = '#0084ff'"> 恢复默认 </n-button>
  37 + </SettingItem>
  38 + </SettingItemBox>
  39 + <SettingItemBox :name="`图形装饰`">
  40 + <SettingItem name="颜色">
  41 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor3"></n-color-picker>
  42 + </SettingItem>
  43 + <SettingItem>
  44 + <n-button size="small" @click="optionData.attribute.bgColor3 = '#0d4ea8'"> 恢复默认 </n-button>
  45 + </SettingItem>
  46 + </SettingItemBox>
  47 + <SettingItemBox :name="`图形边框装饰`">
  48 + <SettingItem name="颜色">
  49 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor4"></n-color-picker>
  50 + </SettingItem>
  51 + <SettingItem>
  52 + <n-button size="small" @click="optionData.attribute.bgColor4 = '#4592ff'"> 恢复默认 </n-button>
  53 + </SettingItem>
  54 + </SettingItemBox>
  55 + <SettingItemBox :name="`圆形装饰`">
  56 + <SettingItem name="颜色">
  57 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor5"></n-color-picker>
  58 + </SettingItem>
  59 + <SettingItem>
  60 + <n-button size="small" @click="optionData.attribute.bgColor5 = '#ffcc33'"> 恢复默认 </n-button>
39 </SettingItem> 61 </SettingItem>
40 </SettingItemBox> 62 </SettingItemBox>
41 </CollapseItem> 63 </CollapseItem>
@@ -9,12 +9,12 @@ @@ -9,12 +9,12 @@
9 > 9 >
10 <defs> 10 <defs>
11 <linearGradient id="subtitle8_linear_0" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox"> 11 <linearGradient id="subtitle8_linear_0" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox">
12 - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="0.5" />  
13 - <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="0" /> 12 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="0.5" />
  13 + <stop offset="1" :stop-color="attribute.bgColor1" stop-opacity="0" />
14 </linearGradient> 14 </linearGradient>
15 <linearGradient id="subtitle8_linear_1" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox"> 15 <linearGradient id="subtitle8_linear_1" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox">
16 - <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="0.5" />  
17 - <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="0" /> 16 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="0.5" />
  17 + <stop offset="1" :stop-color="attribute.bgColor1" stop-opacity="0" />
18 </linearGradient> 18 </linearGradient>
19 <filter 19 <filter
20 id="subtitle8_filter_14" 20 id="subtitle8_filter_14"
@@ -55,7 +55,7 @@ @@ -55,7 +55,7 @@
55 <path 55 <path
56 id="矩形 31" 56 id="矩形 31"
57 fill-rule="evenodd" 57 fill-rule="evenodd"
58 - :style="{ fill: attribute.linearColors[4] }" 58 + :style="{ fill: attribute.bgColor2 }"
59 transform="translate(17 1.9999999999999183) rotate(0 237.5 15)" 59 transform="translate(17 1.9999999999999183) rotate(0 237.5 15)"
60 opacity="0.2" 60 opacity="0.2"
61 :d="`M0,${h}L${w - 10},${h}L${w - 10},0L0,0L0,${h}Z `" 61 :d="`M0,${h}L${w - 10},${h}L${w - 10},0L0,0L0,${h}Z `"
@@ -79,7 +79,7 @@ @@ -79,7 +79,7 @@
79 <path 79 <path
80 id="矩形 32" 80 id="矩形 32"
81 fill-rule="evenodd" 81 fill-rule="evenodd"
82 - :style="{ fill: attribute.linearColors[5] }" 82 + :style="{ fill: attribute.bgColor3 }"
83 :transform="`translate(4.979184719828627 ${ 83 :transform="`translate(4.979184719828627 ${
84 h / 2 - 34 / 2 + 6 84 h / 2 - 34 / 2 + 6
85 }) rotate(-45 12.020815280171146 12.020815280171146)`" 85 }) rotate(-45 12.020815280171146 12.020815280171146)`"
@@ -88,7 +88,7 @@ @@ -88,7 +88,7 @@
88 /> 88 />
89 <rect 89 <rect
90 id="矩形 32" 90 id="矩形 32"
91 - :style="{ stroke: attribute.linearColors[6], strokeWidth: 1, strokeOpacity: 1 }" 91 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 1 }"
92 :transform="`translate(4.979184719828627 ${ 92 :transform="`translate(4.979184719828627 ${
93 h / 2 - 34 / 2 + 6 93 h / 2 - 34 / 2 + 6
94 }) rotate(-45 12.020815280171146 12.020815280171146)`" 94 }) rotate(-45 12.020815280171146 12.020815280171146)`"
@@ -101,7 +101,7 @@ @@ -101,7 +101,7 @@
101 <path 101 <path
102 id="圆形 10" 102 id="圆形 10"
103 fill-rule="evenodd" 103 fill-rule="evenodd"
104 - :style="{ fill: attribute.linearColors[7] }" 104 + :style="{ fill: attribute.bgColor5 }"
105 :transform="`translate(11.999999999999805 ${h / 2 - 34 / 2 + 12}) rotate(0 5 5)`" 105 :transform="`translate(11.999999999999805 ${h / 2 - 34 / 2 + 12}) rotate(0 5 5)`"
106 opacity="1" 106 opacity="1"
107 d="M5,0C2.24,0 0,2.24 0,5C0,7.76 2.24,10 5,10C7.76,10 10,7.76 10,5C10,2.24 7.76,0 5,0Z " 107 d="M5,0C2.24,0 0,2.24 0,5C0,7.76 2.24,10 5,10C7.76,10 10,7.76 10,5C10,2.24 7.76,0 5,0Z "
1 -import { PublicConfigClass } from '@/packages/public'  
2 -import { CreateComponentType } from '@/packages/index.d'  
3 -import { chartInitConfig } from '@/settings/designSetting'  
4 -import { OverrideILoadConfigurationframeConfig } from './index' 1 +import {PublicConfigClass} from '@/packages/public'
  2 +import {CreateComponentType} from '@/packages/index.d'
  3 +import {chartInitConfig} from '@/settings/designSetting'
  4 +import {OverrideILoadConfigurationframeConfig} from './index'
5 import cloneDeep from 'lodash/cloneDeep' 5 import cloneDeep from 'lodash/cloneDeep'
6 6
  7 +export const enum shareEnum {
  8 + PRIVATE_VIEW = "PRIVATE_VIEW",
  9 +}
  10 +
7 export const option = { 11 export const option = {
8 - // 网站路径  
9 - dataset: '',  
10 - // 圆角  
11 - borderRadius: 10,  
12 - pages: {  
13 - page: 1,  
14 - pageSize: 10  
15 - },  
16 - color: 'black' 12 + // 网站路径
  13 + dataset: '',
  14 + // 圆角
  15 + borderRadius: 10,
  16 + pages: {
  17 + page: 1,
  18 + pageSize: 10
  19 + },
  20 + color: 'black',
  21 + isShare: false,
17 } 22 }
18 23
19 export default class Config extends PublicConfigClass implements CreateComponentType { 24 export default class Config extends PublicConfigClass implements CreateComponentType {
20 - public key = OverrideILoadConfigurationframeConfig.key  
21 - public attr = { ...chartInitConfig, w: 1200, h: 800, zIndex: -1 }  
22 - public chartConfig = cloneDeep(OverrideILoadConfigurationframeConfig)  
23 - public option = cloneDeep(option) 25 + public key = OverrideILoadConfigurationframeConfig.key
  26 + public attr = {...chartInitConfig, w: 1200, h: 800, zIndex: -1}
  27 + public chartConfig = cloneDeep(OverrideILoadConfigurationframeConfig)
  28 + public option = cloneDeep(option)
24 } 29 }
@@ -2,16 +2,22 @@ @@ -2,16 +2,22 @@
2 <collapse-item name="属性" :expanded="true"> 2 <collapse-item name="属性" :expanded="true">
3 <setting-item-box name="路径" :alone="true"> 3 <setting-item-box name="路径" :alone="true">
4 <setting-item name="请选择要加载的组态"> 4 <setting-item name="请选择要加载的组态">
5 - <n-select filterable size="small" v-model:value="optionData.dataset" :options="configurationOptions" /> 5 + <n-select label-in-value @change="handleUpdateValue" filterable size="small" v-model:value="optionData.dataset"
  6 + :options="configurationOptions"/>
  7 + </setting-item>
  8 + </setting-item-box>
  9 + <setting-item-box name="是否公开" :alone="true">
  10 + <setting-item name="">
  11 + <n-switch @change="handleChange" v-model:value="optionData.isShare" size="small"/>
6 </setting-item> 12 </setting-item>
7 </setting-item-box> 13 </setting-item-box>
8 <setting-item-box name="样式"> 14 <setting-item-box name="样式">
9 <setting-item name="圆角"> 15 <setting-item name="圆角">
10 <n-input-number 16 <n-input-number
11 - v-model:value="optionData.borderRadius"  
12 - size="small"  
13 - :min="0"  
14 - placeholder="圆角" 17 + v-model:value="optionData.borderRadius"
  18 + size="small"
  19 + :min="0"
  20 + placeholder="圆角"
15 ></n-input-number> 21 ></n-input-number>
16 </setting-item> 22 </setting-item>
17 </setting-item-box> 23 </setting-item-box>
@@ -21,11 +27,11 @@ @@ -21,11 +27,11 @@
21 </setting-item> 27 </setting-item>
22 <setting-item name="页数"> 28 <setting-item name="页数">
23 <n-input-number 29 <n-input-number
24 - disabled  
25 - v-model:value="optionData.pages.pageSize"  
26 - size="small"  
27 - :min="10"  
28 - placeholder="页数" 30 + disabled
  31 + v-model:value="optionData.pages.pageSize"
  32 + size="small"
  33 + :min="10"
  34 + placeholder="页数"
29 ></n-input-number> 35 ></n-input-number>
30 </setting-item> 36 </setting-item>
31 </setting-item-box> 37 </setting-item-box>
@@ -34,17 +40,18 @@ @@ -34,17 +40,18 @@
34 <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker> 40 <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
35 </SettingItem> 41 </SettingItem>
36 <SettingItem> 42 <SettingItem>
37 - <n-button size="small" @click="optionData.color = 'black'"> 恢复默认 </n-button> 43 + <n-button size="small" @click="optionData.color = 'black'"> 恢复默认</n-button>
38 </SettingItem> 44 </SettingItem>
39 </setting-item-box> 45 </setting-item-box>
40 </collapse-item> 46 </collapse-item>
41 </template> 47 </template>
42 48
43 <script setup lang="ts"> 49 <script setup lang="ts">
44 -import { PropType, onMounted, ref, watch } from 'vue'  
45 -import { option } from './config'  
46 -import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'  
47 -import { getConfigurationList } from '@/api/external/common/index' 50 +import {PropType, onMounted, ref, watch} from 'vue'
  51 +import {option, shareEnum} from './config'
  52 +import {CollapseItem, SettingItemBox, SettingItem} from '@/components/Pages/ChartItemSetting'
  53 +import {getConfigurationList, setConfigurationIsShare} from '@/api/external/common/index'
  54 +import {SelectOption} from 'naive-ui'
48 55
49 const props = defineProps({ 56 const props = defineProps({
50 optionData: { 57 optionData: {
@@ -55,25 +62,51 @@ const props = defineProps({ @@ -55,25 +62,51 @@ const props = defineProps({
55 62
56 const configurationOptions = ref([]) 63 const configurationOptions = ref([])
57 64
  65 +const configurationId = ref('')
  66 +
58 const getConfigurationOptions = async (params: object) => { 67 const getConfigurationOptions = async (params: object) => {
59 - const { items } = await getConfigurationList(params) 68 + const {items} = await getConfigurationList(params)
60 if (items) { 69 if (items) {
61 - configurationOptions.value = items.map((item: Record<string, string>) => ({ label: item.name, value: item.id })) 70 + configurationOptions.value = items.map((item: SelectOption) => ({
  71 + label: item.name,
  72 + value: item.id,
  73 + viewType: item.viewType
  74 + }))
62 } 75 }
63 } 76 }
64 77
65 watch( 78 watch(
66 - () => props.optionData.pages,  
67 - (newData: any) => {  
68 - getConfigurationOptions({ page: newData.page, pageSize: newData.pageSize })  
69 - },  
70 - {  
71 - deep: true,  
72 - immediate: true  
73 - } 79 + () => props.optionData.pages,
  80 + (newData: any) => {
  81 + getConfigurationOptions({page: newData.page, pageSize: newData.pageSize})
  82 + },
  83 + {
  84 + deep: true,
  85 + immediate: true
  86 + }
74 ) 87 )
75 88
76 onMounted(() => { 89 onMounted(() => {
77 - getConfigurationOptions({ page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize }) 90 + getConfigurationOptions({page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize})
78 }) 91 })
  92 +
  93 +const handleUpdateValue = (value: string, options: SelectOption) => {
  94 + const {viewType} = options
  95 + configurationId.value = value
  96 + if (viewType === shareEnum.PRIVATE_VIEW) {
  97 + props.optionData.isShare = false
  98 + } else {
  99 + props.optionData.isShare = true
  100 + }
  101 +}
  102 +
  103 +const handleChange = async (value: boolean) => {
  104 + const res = await setConfigurationIsShare(!configurationId.value ? props.optionData.dataset : configurationId.value, value, {
  105 + isShare: value
  106 + })
  107 + if (res) {
  108 + window.$message.success('操作成功！')
  109 + await getConfigurationOptions({page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize})
  110 + }
  111 +}
79 </script> 112 </script>
1 import { defineStore } from "pinia"; 1 import { defineStore } from "pinia";
2 import { KeyBoundComponentList, SocketComponentRecord, SocketReceiveMessageType, SocketSendMessageItemType, SocketSendMessageType, SocketStoreType, UnsubscribePoolType } from '@/store/external/modules/socketStore.d' 2 import { KeyBoundComponentList, SocketComponentRecord, SocketReceiveMessageType, SocketSendMessageItemType, SocketSendMessageType, SocketStoreType, UnsubscribePoolType } from '@/store/external/modules/socketStore.d'
3 -import { CreateComponentType } from "@/packages/index.d"; 3 +import { CreateComponentGroupType, CreateComponentType } from "@/packages/index.d";
4 import { RequestContentTypeEnum } from "@/enums/external/httpEnum"; 4 import { RequestContentTypeEnum } from "@/enums/external/httpEnum";
5 import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore"; 5 import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
6 import { pinia } from '@/store' 6 import { pinia } from '@/store'
@@ -241,17 +241,41 @@ export const useSocketStore = defineStore({ @@ -241,17 +241,41 @@ export const useSocketStore = defineStore({
241 * @param value 241 * @param value
242 */ 242 */
243 updateComponentById(id: string, value: SocketReceiveMessageType) { 243 updateComponentById(id: string, value: SocketReceiveMessageType) {
244 - const targetComponent = this.getSocketComponentsRecord.find(item => item.componentId === id)  
245 - const targetComponentIndex = chartEditStore.fetchTargetIndex(targetComponent?.componentId)  
246 - const target = chartEditStore.componentList[targetComponentIndex] as CreateComponentType  
247 - const _target = cloneDeep(target)  
248 - const { filter } = _target  
249 - const _value = this.getComponentValueByKeys(target, value)  
250 - const { value: filterValue, reason, flag } = useFilterFn(filter, _value)  
251 - _target.option.dataset = flag ? filterValue : reason  
252 - // TODO 存在重复更新未变化的值  
253 - // console.log({ _target })  
254 - chartEditStore.updateComponentList(targetComponentIndex, _target) 244 + /**
  245 + * 原来的代码
  246 + // const targetComponent = this.getSocketComponentsRecord.find(item => item.componentId === id)
  247 + // const targetComponentIndex = chartEditStore.fetchTargetIndex(targetComponent?.componentId)
  248 + // const target = chartEditStore.componentList[targetComponentIndex] as CreateComponentType
  249 + // const _target = cloneDeep(target)
  250 + // const { filter } = _target
  251 + // const _value = this.getComponentValueByKeys(target, value)
  252 + // const { value: filterValue, reason, flag } = useFilterFn(filter, _value)
  253 + // _target.option.dataset = flag ? filterValue : reason
  254 + // // TODO 存在重复更新未变化的值
  255 + // // console.log({ _target })
  256 + // chartEditStore.updateComponentList(targetComponentIndex, _target)
  257 + */
  258 +
  259 + /**
  260 + * 修改后的代码
  261 + * 修改ws绑定单个文本组件，然后有多个，并且进行分组，显示的信息为原始信息，而非过滤函数返回的信息
  262 + */
  263 + const target = chartEditStore.getComponentList?.reduce((prev: Array<CreateComponentType | CreateComponentGroupType>, acc) => {
  264 + acc?.isGroup ? (prev = [...(acc?.groupList as CreateComponentGroupType[])]) : prev?.push(acc)
  265 + return prev
  266 + }, [])
  267 + ?.filter(
  268 + item => (item?.request?.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET
  269 + )
  270 + target.forEach(item => {
  271 + if (item.id === id) {
  272 + const _value = this.getComponentValueByKeys(item, value)
  273 + const { filter } = item
  274 + const { value: filterValue, reason, flag } = useFilterFn(filter, _value)
  275 + item.option.dataset = flag ? filterValue : reason
  276 + }
  277 + })
  278 + //
255 }, 279 },
256 280
257 /** 281 /**
@@ -31,6 +31,7 @@ import { @@ -31,6 +31,7 @@ import {
31 31
32 // THINGS_KIT 引入store解决报错 Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia? 32 // THINGS_KIT 引入store解决报错 Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
33 import { pinia } from '@/store' 33 import { pinia } from '@/store'
  34 +import {useChartDataSocket} from "@/hooks/external/useChartDataSocket";
34 const chartHistoryStore = useChartHistoryStore(pinia) 35 const chartHistoryStore = useChartHistoryStore(pinia)
35 const settingStore = useSettingStore(pinia) 36 const settingStore = useSettingStore(pinia)
36 37
@@ -316,6 +317,14 @@ export const useChartEditStore = defineStore({ @@ -316,6 +317,14 @@ export const useChartEditStore = defineStore({
316 const index = this.fetchTargetIndex(ids) 317 const index = this.fetchTargetIndex(ids)
317 if (index !== -1) { 318 if (index !== -1) {
318 history.push(this.getComponentList[index]) 319 history.push(this.getComponentList[index])
  320 + /**
  321 + * THINGS_KIT 这里升级版本有冲突
  322 + * 修改ws绑定组件，然后删除这个组件，ws还在继续发送消息问题
  323 + * 修改代码在//之间，其余源码未做修改
  324 + */
  325 + const {disconnectWs}=useChartDataSocket()
  326 + disconnectWs(this.getComponentList[index])
  327 + //
319 this.componentList.splice(index, 1) 328 this.componentList.splice(index, 1)
320 } 329 }
321 }) 330 })
@@ -512,7 +521,7 @@ export const useChartEditStore = defineStore({ @@ -512,7 +521,7 @@ export const useChartEditStore = defineStore({
512 item.id = getUUID() 521 item.id = getUUID()
513 }) 522 })
514 } 523 }
515 - 524 +
516 return e 525 return e
517 } 526 }
518 const isCut = recordCharts.type === HistoryActionTypeEnum.CUT 527 const isCut = recordCharts.type === HistoryActionTypeEnum.CUT