diff --git a/package.json b/package.json index 0902e09dc7d49532388bd15f176d1de1045d2d89..a69829e81cc8938a24c029b1154cfd2f274063df 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "gsap": "^3.12.5", "js-base64": "^3.7.7", "js-cookie": "^3.0.5", - "loadsh": "^0.0.4", "lodash": "^4.17.21", "react-bmapgl": "^0.2.28", "react-countup": "^6.5.3", diff --git a/src/pages/GlobalModalServices/components/BothwayBar/index.tsx b/src/pages/GlobalModalServices/components/BothwayBar/index.tsx index 657fddca62492395274556e6eca4c41a564a5f91..cd94f0d293ddd0b9e376269f643cc2bfda510c84 100644 --- a/src/pages/GlobalModalServices/components/BothwayBar/index.tsx +++ b/src/pages/GlobalModalServices/components/BothwayBar/index.tsx @@ -1,10 +1,7 @@ -import { color } from 'echarts'; import ReactEcharts from 'echarts-for-react'; -import { forEach, get, map, merge } from 'loadsh'; +import { get, map, merge } from 'lodash'; import { useEffect, useMemo, useState } from 'react'; const BothwayBar = () => { - - let top = 60; let bottom = 60; let data = { @@ -86,204 +83,200 @@ const BothwayBar = () => { const [yAxisData, setyAxisData] = useState([]); useEffect(() => { const list = []; - data?.female?.data?.forEach(item=>{ - list.push(item.label) - }) + data?.female?.data?.forEach((item) => { + list.push(item.label); + }); setyAxisData([...list]); }, []); - - const option =useMemo(()=>{ - return{ - tooltip: { - show: true, - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, + const option = useMemo(() => { + return { + tooltip: { + show: true, + trigger: 'axis', + axisPointer: { + type: 'shadow', + }, + }, + // legend: { + // left: 'center', + // bottom: 24, + // itemWidth: 15, + // itemHeight: 11, + // itemGap: 20, + // borderRadius: 4, + // textStyle: { + // color: '#262C41', + // fontSize: 14 + // }, + // data: legendData + // }, + grid: [ + { + left: '12%', + width: '28%', + containLabel: true, + bottom, + }, + { + left: '52%', + width: '0%', + bottom: bottom + 16, + }, + { + right: '12%', + width: '28%', + containLabel: true, + bottom, }, - // legend: { - // left: 'center', - // bottom: 24, - // itemWidth: 15, - // itemHeight: 11, - // itemGap: 20, - // borderRadius: 4, - // textStyle: { - // color: '#262C41', - // fontSize: 14 - // }, - // data: legendData - // }, - grid: [ + ].map((item) => + merge( { - left: '12%', - width: '28%', - containLabel: true, - bottom, + top, }, - { - left: '52%', - width: '0%', - bottom: bottom + 16, + item, + ), + ), + xAxis: [ + { + type: 'value', + inverse: true, + axisLabel: { + show: true, }, - { - right: '12%', - width: '28%', - containLabel: true, - bottom, + axisLine: { + show: false, }, - ].map((item) => - merge( - { - top, - }, - item, - ), - ), - xAxis: [ - { - type: 'value', - inverse: true, - axisLabel: { - show: true, - }, - axisLine: { - show: false, - }, - axisTick: { - show: false, - }, - splitLine: { - show: false, - }, + axisTick: { + show: false, }, - { - gridIndex: 1, + splitLine: { + show: false, + }, + }, + { + gridIndex: 1, + show: true, + }, + { + gridIndex: 2, + type: 'value', + axisLabel: { show: true, }, - { - gridIndex: 2, - type: 'value', - axisLabel: { - show: true, - }, - axisLine: { - show: false, - }, - axisTick: { - show: false, - }, - splitLine: { - show: false, - }, + axisLine: { + show: false, }, - ].map((item) => - merge(item, { - axisLabel: { - color: '#949AA8', - margin: 0, - }, - splitLine: { - lineStyle: { - color: '#E0E0E0', - type: 'dashed', - }, - }, - }), - ), - yAxis: [ - { - position: 'right', - axisLabel: { - show: false, - }, - axisLine: { - show: false, - }, + axisTick: { + show: false, }, - { - gridIndex: 1, - position: 'center', - axisLabel: { - align: 'center', - padding: [8, 0, 0, 0], - fontSize: 16, - color: `rgb(203, 237, 255)`, - }, - axisLine: { - show: false, - }, + splitLine: { + show: false, }, - { - gridIndex: 2, - position: 'left', - axisLabel: { - show: false, - }, - axisLine: { - show:false, - }, + }, + ].map((item) => + merge(item, { + axisLabel: { + color: '#949AA8', + margin: 0, }, - ].map((item) => { - - - return merge(item, { - type: 'category', - inverse: false, - // axisLine: { - // lineStyle: { - // color: '#E0E0E0', - // }, - // }, - axisTick: { - show: false, + splitLine: { + lineStyle: { + color: '#E0E0E0', + type: 'dashed', }, - data: yAxisData, - }); + }, }), - series: [ - { - name: get(data, 'male.name'), - label: { - position: 'left', - }, - itemStyle: { - color: 'rgb(50, 177, 255)', + ), + yAxis: [ + { + position: 'right', + axisLabel: { + show: false, + }, + axisLine: { + show: false, + }, + }, + { + gridIndex: 1, + position: 'center', + axisLabel: { + align: 'center', + padding: [8, 0, 0, 0], + fontSize: 16, + color: `rgb(203, 237, 255)`, + }, + axisLine: { + show: false, + }, + }, + { + gridIndex: 2, + position: 'left', + axisLabel: { + show: false, + }, + axisLine: { + show: false, + }, + }, + ].map((item) => { + return merge(item, { + type: 'category', + inverse: false, + // axisLine: { + // lineStyle: { + // color: '#E0E0E0', + // }, + // }, + axisTick: { + show: false, + }, + data: yAxisData, + }); + }), + series: [ + { + name: get(data, 'male.name'), + label: { + position: 'left', + }, + itemStyle: { + color: 'rgb(50, 177, 255)', // barBorderRadius: [4, 0, 0, 4], - }, - data: map(get(data, 'male.data'), (d) => d.value), }, - { - xAxisIndex: 2, - yAxisIndex: 2, - name: get(data, 'female.name'), - label: { - position: 'right', - }, - itemStyle: { - color: 'rgb(255, 155, 93)', + data: map(get(data, 'male.data'), (d) => d.value), + }, + { + xAxisIndex: 2, + yAxisIndex: 2, + name: get(data, 'female.name'), + label: { + position: 'right', + }, + itemStyle: { + color: 'rgb(255, 155, 93)', // barBorderRadius: [0, 4, 4, 0], - }, - data: map(get(data, 'female.data'), (d) => d.value), }, - ].map((item) => - merge(item, { - type: 'bar', - barWidth: 11, - label: { - show: true, + data: map(get(data, 'female.data'), (d) => d.value), + }, + ].map((item) => + merge(item, { + type: 'bar', + barWidth: 11, + label: { + show: true, // fontFamily: 'Rubik-Medium', - fontSize: 16, - distance: 10, - color:"#fff" - }, - }), - ), - }; - },[yAxisData]) + fontSize: 16, + distance: 10, + color: '#fff', + }, + }), + ), + }; + }, [yAxisData]); - return (