123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- /*
- //y轴显示数据
- Data:{
- type:number, 0(实线) 1虚线(预测) 2(填充)
- name:string,
- yIndex:number, //yName的下标索引(第几个y坐标轴)
- data:string[],
- }
- props:{
- yName:string || string[], //y轴名称 一个或多个
- xData:string[], //x轴时间数据
- dataList:Data[], //折线的数据列表
- currentType:string, //当前选择那个tabs 需要外部更新当前选中type时传入
- typeList:string[], //图表下的选择类型列表
- onChange:(id:number)=>{}
- }
- */
- import { Empty } from 'antd';
- import * as echarts from 'echarts';
- import { useEffect, useRef } from 'react';
- import styles from './index.less';
- //图表模块
- const RadarChartModule = (props) => {
- const chartDomRef = useRef();
- const chartRef = useRef();
- const { indicator, data, name = '' } = props;
- useEffect(() => {
- chartRef.current = echarts.init(chartDomRef.current);
- window.addEventListener('resize', resetChart);
- return () => window.removeEventListener('resize', resetChart);
- }, []);
- useEffect(() => {
- if (!chartRef.current) return;
- const option = { ...defaultOption };
- option.radar.indicator = indicator;
- option.series = [{ ...option.series[0], data: data, name }];
- console.log(JSON.stringify(option));
- chartRef.current.clear();
- chartRef.current.setOption(option);
- chartRef.current.resize();
- }, [indicator, data]);
- const resetChart = () => {
- if (chartRef.current) chartRef.current.resize();
- };
- const getStyle = () => {
- if (data && data.length != 0) return { width: '100%', height: '100%' };
- else return { width: '100%', height: '100%', display: 'none' };
- };
- return (
- <div className={styles.content}>
- <div style={getStyle()} ref={chartDomRef} />
- {(!data || data.length == 0) && <Empty />}
- </div>
- );
- };
- export default RadarChartModule;
- const colors = [
- // '#666600',
- // '#91cc75',
- '#fac858',
- '#ee6666',
- '#73c0de',
- '#3ba272',
- '#fc8452',
- '#9a60b4',
- '#ea7ccc',
- ];
- const defaultOption = {
- color: colors,
- tooltip: {
- trigger: 'item',
- },
- radar: {
- name: {
- textStyle: {
- fontSize: 12,
- },
- },
- splitArea: {
- areaStyle: {
- color: [
- 'rgba(27, 133, 168, 0.8)',
- 'rgba(27, 133, 168, 0.7)',
- 'rgba(27, 133, 168, 0.6)',
- 'rgba(27, 133, 168, 0.4)',
- 'rgba(27, 133, 168, 0.3)',
- ],
- // shadowColor: 'rgba(0, 0, 0, 0.2)',
- // shadowBlur: 10
- },
- },
- axisLine: {
- lineStyle: {
- color: '#238BB6',
- },
- },
- splitLine: {
- show: false,
- },
- indicator: [
- { name: 'Sales' },
- { name: 'Administration' },
- { name: 'Information Technology' },
- { name: 'Customer Support' },
- { name: 'Development' },
- { name: 'Marketing' },
- ],
- },
- series: [
- {
- name: '',
- type: 'radar',
- tooltip: {
- trigger: 'item',
- },
- symbol: 'none',
- // areaStyle: {},
- data: [
- {
- value: [2, 3, 0, 100, 0, 1],
- },
- {
- value: [3, 5, 10, 90, 0, 1],
- },
- ],
- },
- ],
- };
|