-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6a392e7
commit 1984113
Showing
7 changed files
with
239 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,32 @@ | ||
| // local imports | ||
| import React from 'react' | ||
| import Chart1 from './Chart1' | ||
|
|
||
| const Body: React.FC = () => { | ||
| return <div>Body</div> | ||
| const [chartNum, setChartNum] = React.useState<number>(1) | ||
|
|
||
| const updateChart = (e: React.MouseEvent<HTMLButtonElement>): void => { | ||
| e.preventDefault() | ||
| setChartNum((chartNum) => { | ||
| if (chartNum === 1) return 2 | ||
| else return 1 | ||
| }) | ||
| } | ||
| return ( | ||
| <section className="w-full h-8/10 flex flex-col justify-center items-center"> | ||
| <div className="w-full h-8/10 px-4"> | ||
| {chartNum === 1 && <Chart1 />} | ||
| </div> | ||
| <div className="w-full h-2/10 flex justify-center items-center"> | ||
| <button | ||
| className="bg-blue-700 text-white font-bold py-4 px-8 rounded" | ||
| onClick={updateChart} | ||
| > | ||
| Show Chart {chartNum === 1 ? 2 : 1} | ||
| </button> | ||
| </div> | ||
| </section> | ||
| ) | ||
| } | ||
|
|
||
| export default Body |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| // local imports | ||
| import React from 'react' | ||
| import { option } from '../static/static' | ||
|
|
||
| // importing the core library. | ||
| import ReactEChartsCore from 'echarts-for-react/lib/core' | ||
|
|
||
| // Importing the echarts core module, which provides the necessary interfaces for using echarts. | ||
| import * as echarts from 'echarts/core' | ||
| import { BarChart, LineChart } from 'echarts/charts' | ||
|
|
||
| // importing required components, all suffixed with Component | ||
| import { | ||
| GridComponent, | ||
| TooltipComponent, | ||
| TitleComponent, | ||
| LegendComponent, | ||
| ToolboxComponent | ||
| } from 'echarts/components' | ||
|
|
||
| // importing default canvas renderer | ||
| import { CanvasRenderer } from 'echarts/renderers' | ||
|
|
||
| // Register the required components | ||
| echarts.use([ | ||
| TitleComponent, | ||
| TooltipComponent, | ||
| GridComponent, | ||
| BarChart, | ||
| LineChart, | ||
| CanvasRenderer, | ||
| LegendComponent, | ||
| ToolboxComponent | ||
| ]) | ||
|
|
||
| const Chart1: React.FC = () => { | ||
| return ( | ||
| <ReactEChartsCore | ||
| echarts={echarts} | ||
| option={option} | ||
| notMerge={true} | ||
| lazyUpdate={true} | ||
| theme={'dark'} | ||
| opts={{ renderer: 'canvas' }} | ||
| style={{ width: '100%', height: '100%' }} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| export default Chart1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| // importing the json data | ||
| import data from '../assets/Wine-Data.json' | ||
|
|
||
| const getData = (): void => { | ||
| console.log(data) | ||
| } | ||
|
|
||
| export { getData } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| const option = { | ||
| title: { | ||
| text: 'Trial', | ||
| padding: 20 | ||
| }, | ||
| tooltip: { | ||
| trigger: 'axis' | ||
| }, | ||
| legend: { | ||
| data: ['a', 'b', 'c'] | ||
| }, | ||
| toolbox: { | ||
| feature: { | ||
| saveAsImage: {} | ||
| } | ||
| }, | ||
| grid: { | ||
| left: '3%', | ||
| right: '4%', | ||
| bottom: '3%', | ||
| containLabel: true | ||
| }, | ||
| xAxis: [ | ||
| { | ||
| type: 'category', | ||
| boundaryGap: false, | ||
| name: 'x-axis', | ||
| nameLocation: 'center', | ||
| nameGap: 30, | ||
| data: ['x', 'c', 'v', 'y', 'z', 'n', 'l'] | ||
| } | ||
| ], | ||
| yAxis: [ | ||
| { | ||
| type: 'value' | ||
| } | ||
| ], | ||
| series: [ | ||
| { | ||
| name: 'q', | ||
| type: 'line', | ||
| stack: 'x', | ||
| smooth: true, | ||
| areaStyle: { normal: {} }, | ||
| data: [120, 132, 101, 134, 90, 230, 210] | ||
| }, | ||
| { | ||
| name: 'w', | ||
| type: 'line', | ||
| stack: 'x', | ||
| smooth: true, | ||
| areaStyle: { normal: {} }, | ||
| data: [220, 182, 191, 234, 290, 330, 310] | ||
| }, | ||
| { | ||
| name: 'r', | ||
| type: 'line', | ||
| stack: 'x', | ||
| smooth: true, | ||
| areaStyle: { normal: {} }, | ||
| data: [150, 232, 201, 154, 190, 330, 410] | ||
| } | ||
| ] | ||
| } | ||
|
|
||
| export { option } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters