Commit b4ffa26d authored by 郭铭瑶's avatar 郭铭瑶 🤘

添加试验测绘院3D地图

parent b39a0e77
...@@ -10,6 +10,8 @@ ...@@ -10,6 +10,8 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="/SMap.min.js"></script>
<script src="/Plugins.min.js"></script>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
......
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -51,7 +51,8 @@ html, body ...@@ -51,7 +51,8 @@ html, body
height 100% height 100%
overflow hidden overflow hidden
font-size .1rem font-size .1rem
background url('@/assets/images/background.jpg') center/cover no-repeat // background url('@/assets/images/background.jpg') center/cover no-repeat
background #000
color #fff color #fff
/* 设置滚动条的样式 */ /* 设置滚动条的样式 */
......
...@@ -9,10 +9,10 @@ switch (process.env.NODE_ENV) { ...@@ -9,10 +9,10 @@ switch (process.env.NODE_ENV) {
export default { export default {
BASE_URL, BASE_URL,
GET_BUILDING: '/service-basicdatasync-ddd/building', GET_BUILDING: '/service-basicdatasync-ddd/building', // 门牌幢列表
GET_STATION: '/service-special-nandong/workstations', GET_STATION: '/service-special-nandong/workstations', // 工作站列表
GET_INDUSTRY_AUTHORITY: '/service-basicdatasync-ddd/indCous', GET_INDUSTRY_AUTHORITY: '/service-basicdatasync-ddd/indCous', // 业委会列表
GET_COMMITTEE: '/service-basicdatasync-ddd/residentsCommittees', GET_COMMITTEE: '/service-basicdatasync-ddd/residentsCommittees', // 居委会列表
GET_COMPANY: '/service-basicdatasync-ddd/propCompanies', GET_COMPANY: '/service-basicdatasync-ddd/propCompanies', // 物业列表
GET_CASE: '/service-special-nandong/compairs', GET_CASE: '/service-special-nandong/compairs', // 案件汇总列表
} }
...@@ -11,7 +11,7 @@ Axios.interceptors.request.use( ...@@ -11,7 +11,7 @@ Axios.interceptors.request.use(
(config) => { (config) => {
// 添加token // 添加token
config.headers.Authorization = config.headers.Authorization =
'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMSIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE2NzQ5MjI3LCJqdGkiOiJjYjY4YjhmMC1mODM0LTRjMzEtOGEzYS05ZWQ2OTE4OWFjYjYiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTY3NDIwMjc5NzJ9.B2o40R6Tb1jxxcBF9e-MEPNCERDblYtaOoqmHiVgWXJTaZJw_I2i4xFwdmC9wDm1aqWGNHjUPUO9knF3wv_U7g1IwAiVIp_kbk158qjrOBG7C72x5Tl-0DHiCd78nQvDsQiB2rldo9lGh0JF5oD9LgL1iEUsQshJjQlyYMePIS_bYlClQP3uYyNKaFEEZcQH5EqciCIcTLa5y8WtiSzDCnc7fDpNmfDxmb54M39r-2QsxOrtTJ_9QkerzupPCu7XX_GCWqNvtbAV3FuaLYk3sw6jxj07aIe1QOLKAiF233v8T8mPstrp6BNzIBBVDeoHu__XcpyqDJxRNuQXRp-n8w' 'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiMSIsImVuYWJsZSI6dHJ1ZSwic2NvcGUiOlsicmVhZCIsIndyaXRlIiwidHJ1c3QiXSwiZXhwIjoxNjE3Njg3MTY2LCJqdGkiOiIwMTJmNGRlOC1jZTlkLTQ0NzYtYmQzMC0yMGJlZGQyMjE1Y2QiLCJjbGllbnRfaWQiOiJzc28iLCJ0aW1lc3RhbXAiOjE2MTc2Nzk5NjY2Mjd9.eZ1fXintx7bEW1xeglW_10yGje4Bx5qpsCeQPo_0VBm3Di2kb01_0nYX98rtJNloIZVv8mSyZC8dG-xqBbF4i8PtrkvphLvEDLs3ztQu1JckLEswumDx7yVjmOaLo2FegvWskltbYpH32nkG4jU9WgAJSV0MLNe2x9q76rlTP8EyrnOYOEwK2KHW6lszEmZf4YeXHkpaF1XzqwSJCRkplKn6Yv4bmdCGiOxCTX8gGxLaatkv4_uH8g6ji4sUjeS_VIXL1UvuOUrPOLGoVvPv0hxsSe3EPP8MJw7NVYWjT8l_DtXWGHF9kuIGFpU4ILrSEsAN1obqxAQYhoynrk8F3Q'
return config return config
}, },
(error) => { (error) => {
...@@ -32,7 +32,7 @@ Axios.interceptors.response.use( ...@@ -32,7 +32,7 @@ Axios.interceptors.response.use(
) )
interface ParamsProp { interface ParamsProp {
[propName: string]: any [propName: string]: unknown
} }
interface RequestOptions { interface RequestOptions {
......
...@@ -137,7 +137,7 @@ export default defineComponent({ ...@@ -137,7 +137,7 @@ export default defineComponent({
.row .row
display flex display flex
background $table-content-bg background $table-content-bg
padding .04rem 0 padding .03rem 0
&:nth-child(odd) &:nth-child(odd)
background transparent background transparent
.col .col
......
...@@ -4,118 +4,103 @@ ...@@ -4,118 +4,103 @@
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, nextTick, onMounted, ref } from 'vue' import { computed, defineComponent, nextTick, onMounted, ref } from 'vue'
declare const AMap: any declare const SMap: any
interface MarkersProp { declare const Plugins: any
x: number | string
y: number | string
}
export default defineComponent({ export default defineComponent({
name: 'MyMap', name: 'MyMap',
displayName: 'm-map', displayName: 'm-map',
emits: ['complete', 'marker-click'], emits: ['complete', 'event'],
setup(props, ctx) { setup(_, ctx) {
const map = ref<any>(null) let map: any = null
const markers = ref<any[]>([]) onMounted(async () => {
const sizeRate = computed(() => Number((screen.height / 800).toFixed(1)))
const injectMapJs = () => {
if (!document.querySelector('#_MapJs')) {
const mapJs = document.createElement('script')
mapJs.src =
'http://webapi.amap.com/maps?v=1.4.15&key=ee2b5d5c0c44c768f1d2593eb4a7dfa6&plugin=Map3D,AMap.DistrictSearch'
mapJs.setAttribute('id', '_MapJs')
mapJs.onload = async () => {
await nextTick() await nextTick()
initMap() initMap()
})
function initMap() {
map = new SMap.Map('MapContainer', {
viewMode: '3D',
center: [1141.75319496382872, -480.0854532701907],
zooms: [6, 9],
zoom: 7,
pitch: 45,
mapStyle: 'smap://styles/dark', // 'smap://styles/dark' 'smap://styles/image'
showBuildingBlock: true,
}).on(SMap.MapEvent.maploaded, () => {
ctx.emit('complete')
hideCommunity()
addListener()
map.getLayer('model_white_zw').visible = true
map.getLayer('model_white_WEIHAI33').visible = true
map.getLayer('model_white_zhenxing2').visible = true
map.getLayer('model_white_zw').opacity = 0.8
map.getLayer('model_white_WEIHAI33').opacity = 0.8
map.getLayer('model_white_zhenxing2').opacity = 0.8
})
} }
document.head.appendChild(mapJs) function hideCommunity() {
map.hideXQ_Poly()
map.hideMPZ()
map.hideXQ_Point()
} }
// function showCommunity() {
// map.showXQ_Poly()
// map.showMPZ()
// map.showXQ_Point()
// }
function addListener() {
// 触发地图点击事件
map.on(SMap.MapEvent.click, (view: any, eventParamter: any) => {
const { x, y } = eventParamter.mapPoint
console.log([x, y])
view.hitTest(eventParamter).then((res: any) => {
if (res.results && res.results.length > 0) {
ctx.emit(
'event',
res.results[0] && res.results[0].graphic.attributes
)
} }
const initWallLayer = (
name = '黄浦区',
color = 'rgba(0,242,255,0.3)',
height = 1500
) => {
const object3DLayer = new AMap.Object3DLayer({ zIndex: 100 })
map.value.add(object3DLayer)
const district = new AMap.DistrictSearch({
subdistrict: 0,
extensions: 'all',
level: 'city',
}) })
district.search(name, function (status, result) {
const wall = new AMap.Object3D.Wall({
path: result.districtList[0].boundaries,
height,
color,
}) })
wall.backOrFront = 'both'
wall.transparent = true
object3DLayer.add(wall)
})
}
const initMap = () => {
const mapConfig = {
resizeEnable: true,
rotateEnable: true,
pitchEnable: true,
showLabel: true,
zoom: 14,
pitch: 50,
rotation: 45,
viewMode: '3D', // 开启3D视图,默认为关闭
buildingAnimation: true, // 楼块出现是否带动画
expandZoomRange: true,
zooms: [10, 20],
center: [121.5112, 31.195],
showIndoorMap: false,
// mapStyle: 'amap://styles/grey',
mapStyle: 'amap://styles/fa9ac17bb73a5cc74c551d8e8162086d',
features: ['bg', 'road', 'building'],
layers: [
new AMap.TileLayer(),
new AMap.Buildings({
zooms: [10, 20],
zIndex: 10,
}),
],
} }
map.value = new AMap.Map('MapContainer', mapConfig).on( /**
'click', * ------ 聚焦点位 -------
({ lnglat }) => { * @param {String} x [必填 - x坐标]
console.log('click-lnglat: ', [lnglat.lng, lnglat.lat]) * @param {String} y [必填 - y坐标]
* @param {Number} zoom [可选 - 放大比例(默认为6)]
*/
function focus(x: string | number, y: string | number, zoom = 6) {
if (!map || !x || !y) {
console.error('传入的坐标点不能为空')
return
} }
) map.setZoomAndCenter(zoom, [+x, +y])
initWallLayer()
ctx.emit('complete', true)
} }
const addMarkers = (data: MarkersProp[]) => {
map.value.remove(markers.value) // 添加边界
markers.value = data.map((item) => { function addBoundary({
const { x, y } = item // TODO name = '',
const marker = new AMap.Marker({ weight = 10,
position: [+x, +y], count = 10,
zIndex: 99, color = 'rgba(51,145,255,.6)',
icon: new AMap.Icon({ maskColor = [0, 17, 33, 0.9],
size: [16 * sizeRate.value, 20 * sizeRate.value], }) {
image: '/src/assets/images/dimond1.png', const boundary = {
}), boundaryType: 'jd_boundary',
extData: { ...item }, boundaryDefinition: `name like '%${name}%'`,
}).on('click', () => ctx.emit('marker-click', marker.getExtData())) boundarydistance: weight,
return marker bounarycount: count,
}) boundaryColor: color,
map.value.add(markers.value) maskColor: maskColor,
} }
const focus = (x: number | string, y: number | string, zoom = 18.5) => { const Boundary = new Plugins.MaskBoundary(map.view)
map.value.setZoomAndCenter(zoom, [x, y]) Boundary.add(boundary)
return Boundary
} }
onMounted(injectMapJs)
return { return {
map,
markers,
initWallLayer,
addMarkers,
focus, focus,
addBoundary,
} }
}, },
}) })
...@@ -124,17 +109,12 @@ export default defineComponent({ ...@@ -124,17 +109,12 @@ export default defineComponent({
<style lang="stylus" scoped> <style lang="stylus" scoped>
#MapContainer #MapContainer
position fixed position fixed
width 100%
height 100vh
top 0 top 0
right 0
bottom 0
left 0 left 0
</style> </style>
<style lang="stylus"> <style lang="stylus">
.amap-logo .esri-component.esri-attribution.esri-widget
.amap-copyright display none
display none !important
.amap-icon
img
width 100%
height 100%
</style> </style>
...@@ -81,6 +81,7 @@ export default defineComponent({ ...@@ -81,6 +81,7 @@ export default defineComponent({
background-size cover background-size cover
background-position center background-position center
font-weight bold font-weight bold
z-index 1
.date .date
z-index 2 z-index 2
position absolute position absolute
......
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import MyComponent from '@/components/MyComponent' import MyComponent from '@/components/MyComponent'
import { Progress, Select, Input, Row, Col } from 'ant-design-vue' import { Progress, Select, Input } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css' import 'ant-design-vue/dist/antd.css'
import './assets/style/reset.styl' import './assets/style/reset.styl'
...@@ -10,6 +10,4 @@ createApp(App) ...@@ -10,6 +10,4 @@ createApp(App)
.use(Progress) .use(Progress)
.use(Select) .use(Select)
.use(Input) .use(Input)
.use(Row)
.use(Col)
.mount('#app') .mount('#app')
...@@ -4,8 +4,9 @@ import { Dispatch, Commit } from 'vuex' ...@@ -4,8 +4,9 @@ import { Dispatch, Commit } from 'vuex'
export default { export default {
initData({ dispatch }: { dispatch: Dispatch }): void { initData({ dispatch }: { dispatch: Dispatch }): void {
dispatch('getPropertySummary') dispatch('getPropertySummary')
dispatch('getCaseList')
}, },
// 物业三架马车数据 // 物业三架马车数据 (缺交叉任职数)
async getPropertySummary({ commit }: { commit: Commit }): Promise<void> { async getPropertySummary({ commit }: { commit: Commit }): Promise<void> {
const { const {
GET_COMMITTEE: url1, GET_COMMITTEE: url1,
...@@ -19,4 +20,18 @@ export default { ...@@ -19,4 +20,18 @@ export default {
) )
commit('SET_PROPERTY_SUMMARY', { num1: +num1, num2: +num2, num3: +num3 }) commit('SET_PROPERTY_SUMMARY', { num1: +num1, num2: +num2, num3: +num3 })
}, },
// 案件汇总列表
async getCaseList({ commit }: { commit: Commit }): Promise<void> {
const { content } = (
await ajax.get({ url: api.GET_CASE, params: { pageSize: 100 } })
).data
commit('SET_CASE_LIST', content)
},
// 工作站列表
async getStation({ commit }: { commit: Commit }): Promise<void> {
const { content } = (await ajax.get({ url: api.GET_STATION })).data
commit('SET_STATION_LIST', content)
},
} }
...@@ -14,6 +14,8 @@ export interface GlobalStateProps { ...@@ -14,6 +14,8 @@ export interface GlobalStateProps {
readonly viewOptions: ViewType[] readonly viewOptions: ViewType[]
curTheme: ThemeType curTheme: ThemeType
propertySummary: { [key: string]: number } propertySummary: { [key: string]: number }
caseList: unknown[]
stationList: unknown[]
} }
export default createStore<GlobalStateProps>({ export default createStore<GlobalStateProps>({
state, state,
......
...@@ -10,7 +10,16 @@ export default { ...@@ -10,7 +10,16 @@ export default {
SET_CURRENT_THEME(state: GlobalStateProps, val: ThemeType): void { SET_CURRENT_THEME(state: GlobalStateProps, val: ThemeType): void {
state.curTheme = val state.curTheme = val
}, },
SET_PROPERTY_SUMMARY(state: GlobalStateProps, val: number[]): void { SET_PROPERTY_SUMMARY(
state: GlobalStateProps,
val: { [key: string]: number }
): void {
state.propertySummary = val state.propertySummary = val
}, },
SET_CASE_LIST(state: GlobalStateProps, data: unknown[]): void {
state.caseList = data
},
SET_MUTATION_LIST(state: GlobalStateProps, data: unknown[]): void {
state.stationList = data
},
} }
import { GlobalStateProps } from './index' import { GlobalStateProps } from './index'
export default { export default {
showLoading: false, showLoading: false,
curView: { name: '南京东路街道', type: 'street' }, curView: { name: '南京东路街道', type: 'street' },
...@@ -10,4 +11,6 @@ export default { ...@@ -10,4 +11,6 @@ export default {
], ],
curTheme: 'manage', curTheme: 'manage',
propertySummary: {}, propertySummary: {},
caseList: [],
stationList: [],
} as GlobalStateProps } as GlobalStateProps
...@@ -31,13 +31,13 @@ ...@@ -31,13 +31,13 @@
> >
<div> <div>
<p> <p>
<span>{{ item.type }}</span> <span>{{ item.troubleType }}</span>
{{ item.address }} {{ item.address }}
</p> </p>
<p>{{ item.date }}</p> <p>{{ item.acceptTime }} ~ {{ item.backTime }}</p>
</div> </div>
<div>{{ item.content }}</div> <div>{{ item.reportContent }}</div>
<div v-if="item.status === 1" class="flag">已结案</div> <div v-if="item.status === '已结'" class="flag">已结案</div>
<div v-else class="flag">处置中</div> <div v-else class="flag">处置中</div>
</div> </div>
</div> </div>
...@@ -45,18 +45,19 @@ ...@@ -45,18 +45,19 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from 'vue' import { computed, defineComponent, ref } from 'vue'
import btn1 from '@/assets/images/map-btn1.png' import btn1 from '@/assets/images/map-btn1.png'
import btn2 from '@/assets/images/map-btn2.png' import btn2 from '@/assets/images/map-btn2.png'
import btn3 from '@/assets/images/map-btn3.png' import btn3 from '@/assets/images/map-btn3.png'
import btn4 from '@/assets/images/map-btn4.png' import btn4 from '@/assets/images/map-btn4.png'
import btn5 from '@/assets/images/map-btn5.png' import btn5 from '@/assets/images/map-btn5.png'
import btn6 from '@/assets/images/map-btn6.png' import btn6 from '@/assets/images/map-btn6.png'
import store from '@/store'
export default defineComponent({ export default defineComponent({
name: 'MapBtns', name: 'MapBtns',
emits: ['full'], emits: ['full'],
setup(props, ctx) { setup(_, ctx) {
const btns = ref([ const btns = ref([
{ key: 'search', icon: btn1 }, { key: 'search', icon: btn1 },
{ key: 'full', icon: btn2 }, { key: 'full', icon: btn2 },
...@@ -82,32 +83,7 @@ export default defineComponent({ ...@@ -82,32 +83,7 @@ export default defineComponent({
} }
const searchType = ref('case') const searchType = ref('case')
const searchKey = ref('') const searchKey = ref('')
const caseList = ref([ const caseList = computed(() => store.state.caseList)
{
address: 'XX区XX路XX弄XX号',
date: '2021-01-23 ~ 2021-01-24',
type: '案件分类',
status: 1,
content:
'案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述',
},
{
address: 'XX区XX路XX弄XX号',
date: '2021-01-23 ~ 2021-01-24',
type: '案件分类',
status: 0,
content:
'案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述',
},
{
address: 'XX区XX路XX弄XX号',
date: '2021-01-23 ~ 2021-01-24',
type: '案件分类',
status: 0,
content:
'案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述案件内容及描述',
},
])
return { return {
btns, btns,
fullScreen, fullScreen,
......
...@@ -3,17 +3,35 @@ ...@@ -3,17 +3,35 @@
<m-card title="房屋档案"> <m-card title="房屋档案">
<SubTitle>小区信息</SubTitle> <SubTitle>小区信息</SubTitle>
<m-form <m-form
:layout="formLayout" :template="[
:model="formData" 'name:小区名称',
:size="0.08" 'address:小区地址',
:label-width="1.1" 'belong:所属居委会',
'buildingNum:总门牌幢数',
'roomNum:总户数',
'buidlingArea:总建筑面积',
'area:占地面积',
'rang:小区四至范围',
'excludeRang:小区四至范围不包括',
]"
:data="formData"
label-width="1.4rem"
/> />
<SubTitle>物业信息</SubTitle> <SubTitle>物业信息</SubTitle>
<m-form <m-form
:layout="formLayout" :template="[
:model="formData" 'name:小区名称',
:size="0.08" 'address:小区地址',
:label-width="1.1" 'belong:所属居委会',
'buildingNum:总门牌幢数',
'roomNum:总户数',
'buidlingArea:总建筑面积',
'area:占地面积',
'rang:小区四至范围',
'excludeRang:小区四至范围不包括',
]"
:data="formData"
label-width="1.4rem"
/> />
</m-card> </m-card>
<m-card title="案件详情"> <m-card title="案件详情">
...@@ -47,62 +65,6 @@ export default defineComponent({ ...@@ -47,62 +65,6 @@ export default defineComponent({
name: 'CaseDrawer', name: 'CaseDrawer',
components: { SubTitle }, components: { SubTitle },
setup() { setup() {
const formLayout = ref([
{
name: {
label: '小区名称',
width: 24,
},
},
{
address: {
label: '小区地址',
width: 24,
},
},
{
belong: {
label: '所属居委会',
width: 24,
},
},
{
buildingNum: {
label: '总门牌幢数',
width: 24,
},
},
{
roomNum: {
label: '总户数',
width: 24,
},
},
{
buidlingArea: {
label: '总建筑面积',
width: 24,
},
},
{
area: {
label: '占地面积',
width: 24,
},
},
{
rang: {
label: '小区四至范围',
width: 24,
},
},
{
excludeRang: {
label: '小区四至范围不包括',
width: 24,
},
},
])
const formData = ref({ const formData = ref({
name: '测试文字', name: '测试文字',
address: '测试文字', address: '测试文字',
...@@ -144,7 +106,6 @@ export default defineComponent({ ...@@ -144,7 +106,6 @@ export default defineComponent({
}, },
]) ])
return { return {
formLayout,
formData, formData,
details, details,
} }
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
gap="0.05rem" gap="0.05rem"
> >
<m-title area="title" @click="showDrawer = true">南东城运</m-title> <m-title area="title" @click="showDrawer = true">南东城运</m-title>
<m-map ref="map" @complete="handleMapComplete" />
<m-animate enter="fadeInLeft" leave="fadeOutLeft"> <m-animate enter="fadeInLeft" leave="fadeOutLeft">
<Command v-show="'street' === curViewType && !fullScreen" area="left" /> <Command v-show="'street' === curViewType && !fullScreen" area="left" />
</m-animate> </m-animate>
...@@ -39,8 +40,8 @@ ...@@ -39,8 +40,8 @@
<ViewSelector /> <ViewSelector />
<MapBtns @full="fullScreen = $event" /> <MapBtns @full="fullScreen = $event" />
<m-drawer v-model="showDrawer"> <m-drawer v-model="showDrawer">
<!-- <CaseDrawer /> --> <CaseDrawer />
<PopulationDrawer /> <!-- <PopulationDrawer /> -->
</m-drawer> </m-drawer>
</m-grid> </m-grid>
</template> </template>
...@@ -94,19 +95,26 @@ export default defineComponent({ ...@@ -94,19 +95,26 @@ export default defineComponent({
]) ])
const fullScreen = ref(false) const fullScreen = ref(false)
const showDrawer = ref(false) const showDrawer = ref(false)
ajax const map = ref<any>(null)
.get({ // ajax
url: api.GET_CASE, // .get({
}) // url: api.GET_CASE,
.then((res) => { // })
console.log(res) // .then((res) => {
}) // console.log(res)
// })
const handleMapComplete = () => {
console.log('complete', map.value)
map.value.addBoundary({ name: '南京东路街道', color: 'rgba(0,0,0,0)' })
}
return { return {
map,
curViewType, curViewType,
curTheme, curTheme,
streetComponentList, streetComponentList,
fullScreen, fullScreen,
showDrawer, showDrawer,
handleMapComplete,
} }
}, },
}) })
......
...@@ -135,29 +135,15 @@ export default defineComponent({ ...@@ -135,29 +135,15 @@ export default defineComponent({
itemWidth: fontSize.value * 0.6, itemWidth: fontSize.value * 0.6,
itemHeight: fontSize.value * 0.8, itemHeight: fontSize.value * 0.8,
}, },
series: [ series: [1, 2, 3].map(() => ({
{
type: 'bar',
barWidth: '18%',
itemStyle: { borderRadius: 8 },
barGap: 0,
stack: '总量',
},
{
type: 'bar', type: 'bar',
barWidth: '18%', barWidth: '18%',
itemStyle: { borderRadius: 8 }, itemStyle: {
barGap: 0, borderRadius: 8,
stack: '总量',
}, },
{
type: 'bar',
barWidth: '18%',
itemStyle: { borderRadius: 8 },
barGap: 0, barGap: 0,
stack: '总量', stack: '总量',
}, })),
],
}) })
const pieData = ref([ const pieData = ref([
{ {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment