import ReactEcharts from 'echarts-for-react';
import { useMemo } from 'react';
export default (props: { style: React.CSSProperties; data?: any }) => {
  const option = useMemo(() => {
    return {
      tooltip: {},

      toolbox: {
        show: false,
      },

      animationDuration: 3000,
      animationEasingUpdate: 'quinticInOut',
      series: [
        {
          name: '体征体系',
          type: 'graph',
          layout: 'force',
          itemStyle: {
            normal: {
              color: function (params: any) {
                return params.data.colors; //获取具体的参数
              },
            },
          },

          force: {
            repulsion: 1300,
          },
          data: props?.data ?? [
            {
              name: 'COI',
              symbolSize: 100,
              draggable: 'true',
              value: 27,
              colors: '#2B85FF',
            },

            {
              name: '安全',
              symbolSize: 70,
              colors: '#2B85FF',
              draggable: 'true',
              value: 1,
            },
            {
              name: '安全指标1',
              symbolSize: 50,
              colors: '#2B85FF',
              draggable: 'true',
              value: 1,
            },
            {
              name: '安全指标2',
              symbolSize: 50,
              colors: '#2B85FF',
              draggable: 'true',
              value: 1,
            },
            {
              name: '有序',
              symbolSize: 70,
              draggable: 'true',
              value: 1,
              colors: '#ae62d1',
            },
            {
              name: '有序指标1',
              symbolSize: 50,
              colors: '#ae62d1',
              draggable: 'true',
              value: 1,
            },
            {
              name: '有序指标2',
              symbolSize: 50,
              colors: '#ae62d1',
              draggable: 'true',
              value: 1,
            },
            {
              name: '整洁',
              symbolSize: 70,
              draggable: 'true',
              value: 1,
              colors: '#57db8c',
            },
            {
              name: '整洁指标1',
              symbolSize: 50,
              draggable: 'true',
              value: 1,
              colors: '#57db8c',
            },
            {
              name: '便民',
              symbolSize: 70,
              draggable: 'true',
              value: 1,
              colors: '#f56862',
            },
            {
              name: '便民指标1',
              symbolSize: 50,
              draggable: 'true',
              value: 1,
              colors: '#f56862',
            },
            {
              name: '美观',
              symbolSize: 70,
              draggable: 'true',
              value: 1,
              colors: '#fbb22c',
            },
            {
              name: '美观指标1',
              symbolSize: 50,
              draggable: 'true',
              value: 1,
              colors: '#fbb22c',
            },
          ],
          links: props?.data ?? [
            {
              source: 'COI',
              target: '安全',
            },
            {
              source: 'COI',
              target: '有序',
            },
            {
              source: 'COI',
              target: '整洁',
            },
            {
              source: 'COI',
              target: '便民',
            },
            {
              source: 'COI',
              target: '美观',
            },
            {
              source: '安全',
              target: '安全指标1',
            },
            {
              source: '安全',
              target: '安全指标2',
            },
            {
              source: '有序',
              target: '有序指标2',
            },
            {
              source: '有序',
              target: '有序指标1',
            },
            {
              source: '整洁',
              target: '整洁指标1',
            },
            {
              source: '便民',
              target: '便民指标1',
            },
            {
              source: '美观',
              target: '美观指标1',
            },
          ],
          categories: [
            {
              name: 'A',
            },
            {
              name: 'B',
            },
            {
              name: 'C',
            },
            {
              name: 'D',
            },
            {
              name: 'E',
            },
            {
              name: 'F',
            },
            {
              name: 'G',
            },
            {
              name: 'H',
            },
            {
              name: 'I',
            },
          ],
          // focusNodeAdjacency: true,
          roam: true,

          label: {
            normal: {
              show: true,
              color: '#FFFFFF',
            },
          },
          lineStyle: {
            normal: {
              color: 'source',
              curveness: 0,
              type: 'solid',
            },
          },
        },
      ],
    };
  },[props.data]);
  console.log(option);
  
  return <ReactEcharts option={option} style={props.style} lazyUpdate={true} />;
};
