diff --git a/public/fx_zfqd.png b/public/fx_zfqd.png new file mode 100644 index 0000000..b70b315 Binary files /dev/null and b/public/fx_zfqd.png differ diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue index abe2eb1..038ac6b 100644 --- a/src/layout/Layout.vue +++ b/src/layout/Layout.vue @@ -19,7 +19,6 @@ const mobile = computed(() => appStore.getMobile) const collapse = computed(() => appStore.getCollapse) const layout = computed(() => appStore.getLayout) - const handleClickOutside = () => { appStore.setCollapse(true) } diff --git a/src/layout/components/useRenderLayout.tsx b/src/layout/components/useRenderLayout.tsx index a631aa0..668a5a5 100644 --- a/src/layout/components/useRenderLayout.tsx +++ b/src/layout/components/useRenderLayout.tsx @@ -39,12 +39,7 @@ export const useRenderLayout = () => { const renderClassic = () => { return ( <> -
+
{logo.value ? ( { style="transition: all var(--transition-time-02);" > ) : undefined} - +
{ const initMap = () => { const chartInstance = unref(mapChartRef).getChartRef() - const BARWIDTH = 10 + const BARWIDTH = 18 + const SYMBOLHEIGHT = 10 echarts.util.each(mapPoint, (dataItem, id) => { //获取对应城市的经纬度 const geoCoord = dataItem.value.reverse() @@ -197,7 +198,7 @@ const initMap = () => { }) mapOption.value.grid.push({ id: idx, - width: 30, + width: 45, height: 60, left: coord[0] - 10, top: coord[1] - 65, @@ -216,7 +217,7 @@ const initMap = () => { borderRadius: [3, 3, 0, 0] }, label: { - show: true, + show: false, position: 'top', offset: [0, 5], color: '#fff', @@ -226,19 +227,19 @@ const initMap = () => { { value: value1, itemStyle: { - color: '#FBE947' + color: 'rgba(251,233,71,0.8)' }, label: { - formatter: value1.toString() + // formatter: value1.toString() } }, { value: value2, itemStyle: { - color: '#58D764' + color: 'rgba(88,215,100,0.8)' }, label: { - formatter: value2.toString() + // formatter: value2.toString() } } ] @@ -263,13 +264,53 @@ const initMap = () => { { value: 100, itemStyle: { - color: 'rgba(251, 233, 71, .2)' + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + // { + // offset: 0, + // color: 'transparent' + // }, + { + offset: 0, + color: 'rgba(251, 233, 71, .2)' + }, + { + offset: 1, + color: 'rgba(251, 233, 71, .4)' + } + ] + } } }, { value: 100, itemStyle: { - color: 'rgba(88, 215, 100, .2)' + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + // { + // offset: 0, + // color: 'transparent' + // }, + { + offset: 0, + color: 'rgba(88, 215, 100, .2)' + }, + { + offset: 1, + color: 'rgba(88, 215, 100, .4)' + } + ] + } } } ] @@ -281,8 +322,8 @@ const initMap = () => { coordinateSystem: 'cartesian2d', xAxisIndex: idx, yAxisIndex: idx, - symbolSize: [BARWIDTH, 2], - symbolOffset: [0, 0], + symbolSize: [BARWIDTH, SYMBOLHEIGHT], + symbolOffset: [0, -5], symbolPosition: 'end', symbol: 'circle', zLevel: 4, @@ -290,18 +331,18 @@ const initMap = () => { { value: value1, itemStyle: { - color: '#FBE947' + color: '#fbe947' } }, { value: value2, itemStyle: { - color: '#58D764' + color: 'rgb(88,215,100)' } } ] }) - // 背景顶部圆形装饰 + // 背景顶部圆形装饰 mapOption.value.series.push({ name: `${dataItem.name}3`, type: 'pictorialBar', @@ -314,25 +355,25 @@ const initMap = () => { label: { show: false }, - symbolSize: [BARWIDTH, 3], - symbolOffset: [0, -1], + symbolSize: [BARWIDTH, SYMBOLHEIGHT], + symbolOffset: [0, -5], barGap: '-100%', data: [ { value: 100, itemStyle: { - color: 'rgba(251, 233, 71, .2)' + color: 'rgba(251,233,71,0.6)' } }, { value: 100, itemStyle: { - color: 'rgba(88, 215, 100, .2)' + color: 'rgba(88,215,100,0.6)' } } ] }) - // 背景顶部底部装饰 + // 背景顶部底部装饰 mapOption.value.series.push({ name: `${dataItem.name}3`, type: 'pictorialBar', @@ -346,19 +387,19 @@ const initMap = () => { show: false }, barGap: '-100%', - symbolSize: [BARWIDTH, 3], - symbolOffset: [0, -1], + symbolSize: [BARWIDTH, SYMBOLHEIGHT], + symbolOffset: [0, -5], data: [ { value: 0, itemStyle: { - color: 'rgba(251, 233, 71, 1)' + color: 'rgba(251, 233, 71,.8)' } }, { value: 0, itemStyle: { - color: 'rgba(88, 215, 100, 1)' + color: 'rgba(88, 215, 100, .8)' } } ]