From 617c7825b4b22d5bf003fec37a6a635a4bc48e66 Mon Sep 17 00:00:00 2001 From: Caozhenhui <823914102@qq.com> Date: Tue, 4 Jan 2022 11:25:46 +0800 Subject: [PATCH 1/3] fixed issue 183 --- web/package.json | 3 ++- .../MyEMS/AuxiliarySystem/EnergyFlowDiagram.js | 2 +- web/src/components/MyEMS/common/SharePie.js | 5 +++-- web/src/components/dashboard-alt/MarketShare.js | 3 +-- web/src/components/dashboard-alt/TopProducts.js | 9 ++++----- web/src/components/dashboard-alt/TotalOrder.js | 5 +++-- web/src/components/dashboard-alt/TotalSales.js | 8 ++++---- web/src/components/dashboard-alt/WeeklySales.js | 7 ++++--- web/src/components/dashboard-alt/react-echart/index.js | 2 +- web/src/components/plugins/EchartMap.js | 2 +- web/src/components/plugins/Echarts.js | 2 +- 11 files changed, 25 insertions(+), 23 deletions(-) diff --git a/web/package.json b/web/package.json index 2b3764d3..eebd5cef 100644 --- a/web/package.json +++ b/web/package.json @@ -21,7 +21,8 @@ "bootstrap": "^4.5.3", "chart.js": "^2.9.3", "classnames": "^2.2.6", - "echarts": "^4.9.0", + "zrender": "^5.2.1", + "echarts": "^5.2.2", "echarts-for-react": "^2.0.16", "element-resize-event": "^3.0.3", "emoji-mart": "^3.0.0", diff --git a/web/src/components/MyEMS/AuxiliarySystem/EnergyFlowDiagram.js b/web/src/components/MyEMS/AuxiliarySystem/EnergyFlowDiagram.js index 4754ff6b..e04b4252 100644 --- a/web/src/components/MyEMS/AuxiliarySystem/EnergyFlowDiagram.js +++ b/web/src/components/MyEMS/AuxiliarySystem/EnergyFlowDiagram.js @@ -17,7 +17,7 @@ import { import Datetime from 'react-datetime'; import moment from 'moment'; import ReactEchartsCore from 'echarts-for-react'; -import echarts from 'echarts/lib/echarts'; +import * as echarts from 'echarts/lib/echarts'; import AppContext from '../../../context/Context'; import { getCookieValue, createCookie } from '../../../helpers/utils'; import withRedirect from '../../../hoc/withRedirect'; diff --git a/web/src/components/MyEMS/common/SharePie.js b/web/src/components/MyEMS/common/SharePie.js index ceef868c..22f2f059 100644 --- a/web/src/components/MyEMS/common/SharePie.js +++ b/web/src/components/MyEMS/common/SharePie.js @@ -3,12 +3,13 @@ import PropTypes from 'prop-types'; import { getGrays, getPosition, isIterableArray, numberFormatter } from '../../../helpers/utils'; import SharePieItem from './SharePieItem'; import { Card, CardBody, Col, Row } from 'reactstrap'; -import echarts from 'echarts/lib/echarts'; +import * as echarts from 'echarts/lib/echarts'; import ReactEchartsCore from 'echarts-for-react/lib/core'; -import 'echarts/lib/chart/pie'; +import { PieChart } from 'echarts/charts'; import { useContext } from 'react'; import AppContext from '../../../context/Context'; +echarts.use([PieChart]); const getOption = (data, isDark) => { const grays = getGrays(isDark); return { diff --git a/web/src/components/dashboard-alt/MarketShare.js b/web/src/components/dashboard-alt/MarketShare.js index af57092b..f1797103 100644 --- a/web/src/components/dashboard-alt/MarketShare.js +++ b/web/src/components/dashboard-alt/MarketShare.js @@ -3,9 +3,8 @@ import PropTypes from 'prop-types'; import { getGrays, getPosition, isIterableArray, numberFormatter } from '../../helpers/utils'; import MarketShareItem from './MarketShareItem'; import { Card, CardBody, Col, Row } from 'reactstrap'; -import echarts from 'echarts/lib/echarts'; +import * as echarts from 'echarts/lib/echarts'; import ReactEchartsCore from 'echarts-for-react/lib/core'; -import 'echarts/lib/chart/pie'; import { useContext } from 'react'; import AppContext from '../../context/Context'; diff --git a/web/src/components/dashboard-alt/TopProducts.js b/web/src/components/dashboard-alt/TopProducts.js index 881fa6b8..42e17d6d 100644 --- a/web/src/components/dashboard-alt/TopProducts.js +++ b/web/src/components/dashboard-alt/TopProducts.js @@ -5,15 +5,14 @@ import CardDropdown from './CardDropdown'; import { Button, Card, CardBody } from 'reactstrap'; import { Link } from 'react-router-dom'; import Flex from '../common/Flex'; -import echarts from 'echarts/lib/echarts'; +import * as echarts from 'echarts/lib/echarts'; import ReactEchartsCore from 'echarts-for-react/lib/core'; import { getPosition, getGrays } from '../../helpers/utils'; import AppContext from '../../context/Context'; +import { BarChart } from 'echarts/charts'; +import { TooltipComponent, LegendComponent } from 'echarts/components'; -import 'echarts/lib/chart/bar'; -import 'echarts/lib/component/tooltip'; -import 'echarts/lib/component/legend'; - +echarts.use([BarChart, TooltipComponent, LegendComponent]); const getOption = (data, colors, isDark) => { const grays = getGrays(isDark); return { diff --git a/web/src/components/dashboard-alt/TotalOrder.js b/web/src/components/dashboard-alt/TotalOrder.js index b9c2b6e5..753286e6 100644 --- a/web/src/components/dashboard-alt/TotalOrder.js +++ b/web/src/components/dashboard-alt/TotalOrder.js @@ -4,12 +4,13 @@ import FalconCardHeader from '../common/FalconCardHeader'; import { Badge, Card, CardBody, Col, Row } from 'reactstrap'; import Flex from '../common/Flex'; import ReactEchartsCore from 'echarts-for-react/lib/core'; -import echarts from 'echarts/lib/echarts'; -import 'echarts/lib/chart/line'; +import * as echarts from 'echarts/lib/echarts'; +import { LineChart } from 'echarts/charts'; import { getGrays, themeColors, rgbaColor, getPosition, numberFormatter } from '../../helpers/utils'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import AppContext from '../../context/Context'; +echarts.use([LineChart]); const getOption = (data, isDark) => { const grays = getGrays(isDark); return { diff --git a/web/src/components/dashboard-alt/TotalSales.js b/web/src/components/dashboard-alt/TotalSales.js index 0073c53f..8b7578d4 100644 --- a/web/src/components/dashboard-alt/TotalSales.js +++ b/web/src/components/dashboard-alt/TotalSales.js @@ -1,7 +1,7 @@ import React, { useContext, useState } from 'react'; import { Card, CardBody, CustomInput } from 'reactstrap'; import PropTypes from 'prop-types'; -import echarts from 'echarts/lib/echarts'; +import * as echarts from 'echarts/lib/echarts'; import ReactEchartsCore from 'echarts-for-react/lib/core'; import { getPosition, getGrays, themeColors, rgbaColor, isIterableArray, capitalize } from '../../helpers/utils'; import CardDropdown from './CardDropdown'; @@ -9,12 +9,12 @@ import FalconCardHeader from '../common/FalconCardHeader'; import Flex from '../common/Flex'; import AppContext from '../../context/Context'; -import 'echarts/lib/chart/bar'; -import 'echarts/lib/component/tooltip'; -import 'echarts/lib/component/legend'; +import { BarChart } from 'echarts/charts'; +import { TooltipComponent, LegendComponent} from 'echarts/components'; import { totalSalesByMonth } from '../../data/dashboard/topProducts'; +echarts.use([BarChart, TooltipComponent, LegendComponent]); function getFormatter(params) { const { name, value } = params[0]; return `${Object.keys(totalSalesByMonth)[0]} ${name}, ${value}`; diff --git a/web/src/components/dashboard-alt/WeeklySales.js b/web/src/components/dashboard-alt/WeeklySales.js index e9263de8..337ce270 100644 --- a/web/src/components/dashboard-alt/WeeklySales.js +++ b/web/src/components/dashboard-alt/WeeklySales.js @@ -5,13 +5,14 @@ import { Badge, Card, CardBody, Col, Row, UncontrolledTooltip } from 'reactstrap import FalconCardHeader from '../common/FalconCardHeader'; import Flex from '../common/Flex'; import ReactEchartsCore from 'echarts-for-react/lib/core'; -import echarts from 'echarts/lib/echarts'; +import * as echarts from 'echarts/lib/echarts'; import { themeColors, getPosition, numberFormatter, getGrays } from '../../helpers/utils'; -import 'echarts/lib/chart/bar'; -import 'echarts/lib/component/tooltip'; +import { BarChart } from 'echarts/charts'; +import { TooltipComponent } from 'echarts/components'; import AppContext from '../../context/Context'; +echarts.use([BarChart, TooltipComponent]); const getOption = (data, dataBackground, isDark) => { const grays = getGrays(isDark); return { diff --git a/web/src/components/dashboard-alt/react-echart/index.js b/web/src/components/dashboard-alt/react-echart/index.js index b5067203..a78173fe 100644 --- a/web/src/components/dashboard-alt/react-echart/index.js +++ b/web/src/components/dashboard-alt/react-echart/index.js @@ -1,4 +1,4 @@ -import echarts from 'echarts'; +import * as echarts from 'echarts'; import Core from './core'; // export the Component the echarts Object. diff --git a/web/src/components/plugins/EchartMap.js b/web/src/components/plugins/EchartMap.js index 2fc35e7b..1cb4899b 100644 --- a/web/src/components/plugins/EchartMap.js +++ b/web/src/components/plugins/EchartMap.js @@ -2,7 +2,7 @@ import React, { Fragment } from 'react'; import { Button, Card, CardBody } from 'reactstrap'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import ReactEchartsCore from 'echarts-for-react/lib/core'; -import echarts from 'echarts/lib/echarts'; +import * as echarts from 'echarts/lib/echarts'; import PageHeader from '../common/PageHeader'; import FalconCardHeader from '../common/FalconCardHeader'; import FalconEditor from '../common/FalconEditor'; diff --git a/web/src/components/plugins/Echarts.js b/web/src/components/plugins/Echarts.js index 1bc1c7f0..a0225001 100644 --- a/web/src/components/plugins/Echarts.js +++ b/web/src/components/plugins/Echarts.js @@ -2,7 +2,7 @@ import React, { Fragment, useContext } from 'react'; import { Button, Card, CardBody, Row, Col } from 'reactstrap'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import ReactEchartsCore from 'echarts-for-react/lib/core'; -import echarts from 'echarts/lib/echarts'; +import * as echarts from 'echarts/lib/echarts'; import PageHeader from '../common/PageHeader'; import FalconCardHeader from '../common/FalconCardHeader'; import FalconEditor from '../common/FalconEditor'; From 4d5e58f9cffd248b15f99a7c650305021c4b1ca8 Mon Sep 17 00:00:00 2001 From: Caozhenhui <823914102@qq.com> Date: Tue, 4 Jan 2022 11:32:28 +0800 Subject: [PATCH 2/3] fixed issue 183 --- web/src/components/dashboard-alt/MarketShare.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/web/src/components/dashboard-alt/MarketShare.js b/web/src/components/dashboard-alt/MarketShare.js index f1797103..bddc45f7 100644 --- a/web/src/components/dashboard-alt/MarketShare.js +++ b/web/src/components/dashboard-alt/MarketShare.js @@ -7,7 +7,9 @@ import * as echarts from 'echarts/lib/echarts'; import ReactEchartsCore from 'echarts-for-react/lib/core'; import { useContext } from 'react'; import AppContext from '../../context/Context'; +import { PieChart } from 'echarts/charts'; +echarts.use([PieChart]); const getOption = (data, isDark) => { const grays = getGrays(isDark); return { From 827d42e89879d4728c93100aa0a669081fcf1c4a Mon Sep 17 00:00:00 2001 From: Caozhenhui <823914102@qq.com> Date: Tue, 4 Jan 2022 11:53:31 +0800 Subject: [PATCH 3/3] fixed issue 183 --- web/src/components/MyEMS/common/SharePie.js | 4 +++- web/src/components/dashboard-alt/MarketShare.js | 4 +++- web/src/components/dashboard-alt/TotalOrder.js | 4 +++- web/src/components/dashboard-alt/TotalSales.js | 4 +++- web/src/components/plugins/Echarts.js | 4 +++- 5 files changed, 15 insertions(+), 5 deletions(-) diff --git a/web/src/components/MyEMS/common/SharePie.js b/web/src/components/MyEMS/common/SharePie.js index 22f2f059..63e3ed29 100644 --- a/web/src/components/MyEMS/common/SharePie.js +++ b/web/src/components/MyEMS/common/SharePie.js @@ -35,7 +35,9 @@ const getOption = (data, isDark) => { type: 'pie', radius: ['100%', '87%'], avoidLabelOverlap: false, - hoverAnimation: false, + emphasis: { + scale: false + }, itemStyle: { borderWidth: 2, borderColor: isDark ? '#0E1C2F' : '#fff' diff --git a/web/src/components/dashboard-alt/MarketShare.js b/web/src/components/dashboard-alt/MarketShare.js index bddc45f7..9ea83164 100644 --- a/web/src/components/dashboard-alt/MarketShare.js +++ b/web/src/components/dashboard-alt/MarketShare.js @@ -35,7 +35,9 @@ const getOption = (data, isDark) => { type: 'pie', radius: ['100%', '87%'], avoidLabelOverlap: false, - hoverAnimation: false, + emphasis: { + scale: false + }, itemStyle: { borderWidth: 2, borderColor: isDark ? '#0E1C2F' : '#fff' diff --git a/web/src/components/dashboard-alt/TotalOrder.js b/web/src/components/dashboard-alt/TotalOrder.js index 753286e6..e754e603 100644 --- a/web/src/components/dashboard-alt/TotalOrder.js +++ b/web/src/components/dashboard-alt/TotalOrder.js @@ -64,7 +64,9 @@ const getOption = (data, isDark) => { borderColor: themeColors.primary, borderWidth: 2 }, - hoverAnimation: true, + emphasis: { + scale: true + }, data: data, connectNulls: true, smooth: 0.6, diff --git a/web/src/components/dashboard-alt/TotalSales.js b/web/src/components/dashboard-alt/TotalSales.js index 8b7578d4..85a082b3 100644 --- a/web/src/components/dashboard-alt/TotalSales.js +++ b/web/src/components/dashboard-alt/TotalSales.js @@ -95,7 +95,9 @@ const getOption = (month, isDark) => { symbol: 'circle', symbolSize: 10, smooth: false, - hoverAnimation: true, + emphasis: { + scale: true + }, areaStyle: { color: { type: 'linear', diff --git a/web/src/components/plugins/Echarts.js b/web/src/components/plugins/Echarts.js index a0225001..2025122e 100644 --- a/web/src/components/plugins/Echarts.js +++ b/web/src/components/plugins/Echarts.js @@ -140,7 +140,9 @@ const lineChartCode = `function linechartExample(){ borderColor: themeColors.primary, borderWidth: 2 }, - hoverAnimation: true, + emphasis: { + scale: true + }, data: totalOrderData, connectNulls: true, smooth: 0.6,