【无标题】

            itemStyle: {
                normal: {
                    show: true,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                            offset: 0,
                            color: 'rgba(102, 72, 255, 1)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(22, 206, 185, 1)',
                        },
                    ]),
                },
            },
            // import React, { useState, useEffect, useRef } from 'react';
// import * as echarts from 'echarts';

// interface PieData {
//   name: string;
//   value: number;
// }

// const MyChartComponent: React.FC = () => {
//   const chartRef = useRef<HTMLDivElement | null>(null);
//   const [chartInstance, setChartInstance] = useState<echarts.ECharts | null>(null);
//   const [pieData, setPieData] = useState<PieData[]>([
//     { name: '饼图1', value: 300 },
//     { name: '饼图2', value: 400 },
//     // 可以根据需要添加更多饼图数据
//   ]);

//   // 初始化图表
//   useEffect(() => {
//     if (chartRef.current && !chartInstance) {
//       const chart = echarts.init(chartRef.current);
//       setChartInstance(chart);
//     }
//   }, [chartInstance]);

//   // 处理数据更新和图表渲染
//   useEffect(() => {
//     if (chartInstance && pieData.length > 0) {
//       const series: echarts.SeriesOption[] = [
//         {
//           name: '柱状图',
//           type: 'bar',
//           data: [120, 200, 150, 80], // 示例数据，可以根据需要替换
//         },
//         ...pieData.map((pie, index) => ({
//           name: pie.name,
//           type: 'pie',
//           data: [{ value: pie.value, name: pie.name }],
//           radius: '20%',
//           center: ['50%', `${(100 / pieData.length) * (index + 1)}%`], // 垂直排列饼图
//           label: {
//             normal: {
//               formatter: '{b}: {d}%'
//             }
//           }
//         }))
//       ];

//       const option: echarts.EChartOption = {
//         tooltip: {
//           trigger: 'item',
//         },
//         grid: {
//           left: '3%',
//           right: '4%',
//           bottom: '3%',
//           containLabel: true,
//           height: '80%' // 确保饼图总高度与柱状图一致
//         },
//         xAxis: {
//           type: 'category',
//           data: ['A', 'B', 'C', 'D'], // 示例数据，可以根据需要替换
//         },
//         yAxis: {
//           type: 'value',
//         },
//         series,
//       };

//       chartInstance.setOption(option);
//     }
//   }, [chartInstance, pieData]);

//   // 组件卸载时销毁图表实例
//   useEffect(() => {
//     return () => {
//       chartInstance && chartInstance.dispose();
//     };
//   }, [chartInstance]);

//   return (
//     <div ref={chartRef} style={{ width: '100%', height: '500px' }} />
//   );
// };

// export default MyChartComponent;
// -------------  version2
// import React, { useState, useEffect, useRef } from 'react';
// import * as echarts from 'echarts';

// const MyChartComponent: React.FC = () => {
//   const chartRef = useRef<HTMLDivElement | null>(null);
//   const [chartInstance, setChartInstance] = useState<echarts.ECharts | null>(null);
//   const [pieData, setPieData] = useState<{ name: string; value: number }[]>([
//     { name: '饼图1', value: 300 },
//     { name: '饼图2', value: 400 },
//     // 可以根据需要添加更多饼图数据
//   ]);

//   useEffect(() => {
//     if (chartRef.current && !chartInstance) {
//       const chart = echarts.init(chartRef.current);
//       setChartInstance(chart);
//     }
//   }, [chartInstance, chartRef]);

//   useEffect(() => {
//     if (chartInstance) {
//       const series: echarts.PieSeriesOption[] = pieData.map((pie, index) => ({
//         name: pie.name,
//         type: 'pie',
//         data: [{ value: pie.value, name: pie.name }],
//         radius: '20%',
//         center: [index * 30 + 30 + '%', 50 + '%'], // 垂直排列饼图，这里假设每个饼图间隔30%
//         label: {
//           normal: {
//             formatter: '{b}: {d}%'
//           }
//         }
//       }));

//       const option = {
//         tooltip: {
//           trigger: 'item',
//         },
//         grid: {
//           left: '3%',
//           right: '4%',
//           bottom: '3%',
//           containLabel: true,
//         },
//         xAxis: {
//           type: 'category',
//           data: ['类别1', '类别2', '类别3', '类别4'],
//         },
//         yAxis: {
//           type: 'value',
//         },
//         series: [
//           {
//             name: '柱状图',
//             type: 'bar',
//             data: [120, 200, 150, 80],
//           },
//           ...series
//         ],
//       };

//       chartInstance.setOption(option);
//     }
//   }, [chartInstance, pieData]);

//   useEffect(() => {
//     return () => {
//       if (chartInstance) {
//         chartInstance.dispose();
//       }
//     };
//   }, [chartInstance]);

//   return (
//     <div ref={chartRef} style={{ width: '100%', height: '500px' }} />
//   );
// };

// export default MyChartComponent;



// -------version3
import React, { useState, useEffect, useRef } from 'react';
import * as echarts from 'echarts';

const MyChartComponent: React.FC = () => {
    const chartRef = useRef<HTMLDivElement | null>(null);
    const [chartInstance, setChartInstance] = useState<echarts.ECharts | null>(null);
    const [pieData, setPieData] = useState<{ name: string; value: number }[]>([
        { name: '饼图1', value: 300 },
        { name: '饼图2', value: 400 },
        // 可以根据需要添加更多饼图数据
    ]);

    useEffect(() => {
        if (chartRef.current && !chartInstance) {
            const chart = echarts.init(chartRef.current);
            setChartInstance(chart);
        }
    }, [chartInstance]);

    // 模拟数据
    const xAxisData = [
        '2024-10-01 00:00:00',
        '2024-10-02 00:00:00',
        '2024-10-03 00:00:00',
        '2024-10-04 00:00:00',
        '2024-10-05 23:59:59',
    ];
 
    const targetTime = '2024-10-03 12:00:00';
    useEffect(() => {
        if (chartInstance) {
            const series: echarts.PieSeriesOption[] = pieData.map((pie, index) => ({
                name: pie.name,
                type: 'pie',
                data: [{ value: pie.value, name: pie.name }],
                radius: '20%',
                // center: [`${index * 30 + 10}%`, '50%'], // 垂直排列饼图
                center: [`50%`, `${(100 / 4) * (index + 1)}%`],
                label: {
                    normal: {
                        show: true, // 显示标签
                        position: 'outside', // 标签显示在扇区外部
                        formatter: '{b}: {d}%', // 标签内容格式
                    }
                },
                labelLine: {
                    normal: {
                        show: true, // 显示标签线
                        length: 10, // 标签线长度
                        length2: 20 // 第二段标签线长度
                    }
                }
            }));

            const option = {
                tooltip: {
                    trigger: 'item',
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'time',
                    min: '2024-10-01 00:00:00',
                    max: '2024-10-05 23:59:59',
                    splitLine: {
                        show: true
                    }
                },
                graphic: [{
                    type: 'line', // 画一条线
                    shape: {
                        x: targetTime, // 线的 x 坐标（特定时间点）
                        y: 0,          // 线的起点 y 坐标（图表底部）
                        x2: targetTime, // 线的终点 x 坐标（与起点相同）
                        y2: '100%'    // 线的终点 y 坐标（图表顶部）
                    },
                    style: {
                        stroke: 'red', // 线的颜色
                        lineDash: [5, 5], // 虚线样式
                        lineWidth: 2 // 线宽
                    },
                    // z:1000000
                }],
                dataZoom: [{
                    type: 'slider',
                    start: 0,
                    end: 100
                }],
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                  
                        markLine: {
                            data: [{
                                xAxis: '2024-10-02',  // 在这里指定要标注的时间点
                                lineStyle: {
                                    color: 'red',
                                    type: 'dashed',
                                    width: 2
                                },
                                label: {
                                    show: true,
                                    position: 'end',
                                    formatter: '特定日期'
                                }
                            }]
                        }
                        ,
                        type: 'line',
                        // data: seriesData,
                        data: [
                            ['2024-10-01', 100],
                            ['2024-10-02', 150],
                            ['2024-10-03', 150],
                            ['2024-10-04', 150],
                        ]
                    },
                    // ...series
                ],
            };

            chartInstance.setOption(option);
        }
    }, [chartInstance, pieData]);

    useEffect(() => {
        return () => {
            if (chartInstance) {
                chartInstance.dispose();
            }
        };
    }, [chartInstance]);

    return (
        <div ref={chartRef} style={{ width: '100%', height: '500px' }} />
    );
};