Skip to content

Commit

Permalink
添加echarts组件
Browse files Browse the repository at this point in the history
  • Loading branch information
@yangfei4913438
yangfei4913438 committed Sep 20, 2022
1 parent 8a88968 commit fc4b9f6
Show file tree
Hide file tree
Showing 8 changed files with 977 additions and 22 deletions.
351 changes: 330 additions & 21 deletions LICENSE
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@
"preview": "vite preview"
},
"dependencies": {
"classnames": "^2.3.1",
"axios": "^0.27.2",
"classnames": "^2.3.1",
"echarts": "^5.3.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
Expand Down
112 changes: 112 additions & 0 deletions src/components/echarts/Echart.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
import { ECharts, init, registerTheme } from 'echarts';
import { EchartsHandler, EchartsProps } from './types';
import choiceForm from './themes/choiceform.json';
import ringPie from './themes/ringPie.json';
import customBar from './themes/customBar.json';

function Echart(
{
width,
height,
themeType = choiceForm.themeName,
echartOptions,
eventHandlers,
zrEventHandlers,
selectedValues = {},
}: EchartsProps,
ref: React.Ref<EchartsHandler>
) {
const divRef = useRef<HTMLDivElement>(null);
const chartRef = useRef<ECharts>();
const currentSelection = useMemo(() => Object.keys(selectedValues) || [], [selectedValues]);
const previousSelection = useRef<string[]>([]);
const lastTheme = useRef<string>();

useImperativeHandle(ref, () => ({
getEchartInstance: () => chartRef.current,
}));

useEffect(() => {
// 注册多种主题
registerTheme(choiceForm.themeName, choiceForm.theme);
registerTheme(ringPie.themeName, ringPie.theme);
registerTheme(customBar.themeName, customBar.theme);
}, []);

const options = useMemo(() => {
const { toolbox = { feature: {} }, ...baseOptions } = echartOptions;
return {
...baseOptions,
toolbox: {
// @ts-ignore
...toolbox,
show: true,
feature: {
// @ts-ignore
...toolbox?.feature,
dataView: { readOnly: true },
},
},
};
}, [echartOptions]);

useEffect(() => {
if (!divRef.current) return;
if (!chartRef.current) {
lastTheme.current = themeType;
// 初始化
chartRef.current = init(divRef.current, themeType);
}

Object.entries(eventHandlers || {}).forEach(([name, handler]) => {
chartRef.current?.off(name);
chartRef.current?.on(name, handler);
});

Object.entries(zrEventHandlers || {}).forEach(([name, handler]) => {
chartRef.current?.getZr().off(name);
chartRef.current?.getZr().on(name, handler);
});

chartRef.current?.setOption(options, true, true);
}, [options, eventHandlers, zrEventHandlers, themeType]);

useEffect(() => {
// 只有主题变化才会触发更新
if (chartRef.current && divRef.current && lastTheme.current !== themeType) {
lastTheme.current = themeType;
chartRef.current?.clear();
chartRef.current?.dispose();
chartRef.current = init(divRef.current, themeType);
chartRef.current.setOption(options, true, true);
chartRef.current.resize({ width, height });
}
}, [height, options, themeType, width]);

// highlighting
useEffect(() => {
if (!chartRef.current) return;
chartRef.current.dispatchAction({
type: 'downplay',
dataIndex: previousSelection.current.filter((value) => !currentSelection.includes(value)),
});
if (currentSelection.length) {
chartRef.current.dispatchAction({
type: 'highlight',
dataIndex: currentSelection,
});
}
previousSelection.current = currentSelection;
}, [currentSelection]);

useEffect(() => {
if (chartRef.current) {
chartRef.current.resize({ width, height });
}
}, [width, height]);

return <div ref={divRef} style={{ width, height }} />;
}

export default forwardRef(Echart);
165 changes: 165 additions & 0 deletions src/components/echarts/themes/choiceform.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
{
"version": 1,
"themeName": "choiceForm",
"theme": {
"seriesCnt": "5",
"backgroundColor": "rgba(0, 0, 0, 0)",
"titleColor": "#464646",
"subtitleColor": "#6E7079",
"textColorShow": false,
"textColor": "#333",
"markTextColor": "#eee",
"color": [
"#0055ff",
"#33cc59",
"#ffbf00",
"#df2020",
"#aa00ff",
"#cccccc",
"#fc8452",
"#9a60b4",
"#ea7ccc"
],
"borderColor": "#ccc",
"borderWidth": 0,
"visualMapColor": [
"#bf444c",
"#d88273",
"#f6efa6"
],
"legendTextColor": "#333",
"kColor": "#eb5454",
"kColor0": "#47b262",
"kBorderColor": "#eb5454",
"kBorderColor0": "#47b262",
"kBorderWidth": 1,
"lineWidth": 2,
"symbolSize": 4,
"symbol": "emptyCircle",
"symbolBorderWidth": 1,
"lineSmooth": false,
"graphLineWidth": 1,
"graphLineColor": "#aaa",
"mapLabelColor": "#000",
"mapLabelColorE": "rgb(100,0,0)",
"mapBorderColor": "#444",
"mapBorderColorE": "#444",
"mapBorderWidth": 0.5,
"mapBorderWidthE": 1,
"mapAreaColor": "#eee",
"mapAreaColorE": "rgba(255,215,0,0.8)",
"axes": [
{
"type": "all",
"name": "通用坐标轴",
"axisLineShow": true,
"axisLineColor": "#6E7079",
"axisTickShow": true,
"axisTickColor": "#6E7079",
"axisLabelShow": true,
"axisLabelColor": "#6E7079",
"splitLineShow": true,
"splitLineColor": [
"#E0E6F1"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.2)",
"rgba(210,219,238,0.2)"
]
},
{
"type": "category",
"name": "类目坐标轴",
"axisLineShow": true,
"axisLineColor": "#6E7079",
"axisTickShow": true,
"axisTickColor": "#6E7079",
"axisLabelShow": true,
"axisLabelColor": "#6E7079",
"splitLineShow": false,
"splitLineColor": [
"#E0E6F1"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.2)",
"rgba(210,219,238,0.2)"
]
},
{
"type": "value",
"name": "数值坐标轴",
"axisLineShow": false,
"axisLineColor": "#6E7079",
"axisTickShow": false,
"axisTickColor": "#6E7079",
"axisLabelShow": true,
"axisLabelColor": "#6E7079",
"splitLineShow": true,
"splitLineColor": [
"#E0E6F1"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.2)",
"rgba(210,219,238,0.2)"
]
},
{
"type": "log",
"name": "对数坐标轴",
"axisLineShow": false,
"axisLineColor": "#6E7079",
"axisTickShow": false,
"axisTickColor": "#6E7079",
"axisLabelShow": true,
"axisLabelColor": "#6E7079",
"splitLineShow": true,
"splitLineColor": [
"#E0E6F1"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.2)",
"rgba(210,219,238,0.2)"
]
},
{
"type": "time",
"name": "时间坐标轴",
"axisLineShow": true,
"axisLineColor": "#6E7079",
"axisTickShow": true,
"axisTickColor": "#6E7079",
"axisLabelShow": true,
"axisLabelColor": "#6E7079",
"splitLineShow": false,
"splitLineColor": [
"#E0E6F1"
],
"splitAreaShow": false,
"splitAreaColor": [
"rgba(250,250,250,0.2)",
"rgba(210,219,238,0.2)"
]
}
],
"axisSeperateSetting": true,
"toolboxColor": "#999",
"toolboxEmphasisColor": "#666",
"tooltipAxisColor": "#ccc",
"tooltipAxisWidth": 1,
"timelineLineColor": "#DAE1F5",
"timelineLineWidth": 2,
"timelineItemColor": "#A4B1D7",
"timelineItemColorE": "#FFF",
"timelineCheckColor": "#316bf3",
"timelineCheckBorderColor": "fff",
"timelineItemBorderWidth": 1,
"timelineControlColor": "#A4B1D7",
"timelineControlBorderColor": "#A4B1D7",
"timelineControlBorderWidth": 1,
"timelineLabelColor": "#A4B1D7"
}
}
Loading

0 comments on commit fc4b9f6

Please sign in to comment.