Echarts 柱状图/折线图 属性

import * as echarts from 'echarts';
import { useEffect } from 'react';

// let xjcs = [35, 22, 41, 33, 28, 46, 30];
// let xjgls = [15, 42, 21, 23, 18, 26, 40];
// let myData1 = [
//    "星期一",
//    "星期二",
//    "星期三",
//    "星期四",
//    "星期五",
//    "星期六",
//    "星期天",
// ];

const ChartLine = ({ id, data = [], type = 'oneY', chartType = 'bar' }) => {
  const myData1 = data?.map((item: any) => {
    return item.name;
  });

  const number1 = data?.map((item: any) => {
    return item.num;
  });
  const number2 = data?.map((item: any) => {
    return item.numStr;
  });

  const formatAxisLabel = (value: string) => {
    return value.length > 7 ? `${value.slice(0, 5)}...` : value;
  };
  useEffect(() => {
    var myChart = echarts.init(document.getElementById(id || 'chart_line'));
    let option1 = {
      //你的代码
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        textStyle: {
          color: '#08101E',
          fontSize: 14,
        },
        confine: true, // 超出范围
        formatter: '{b}<br>{a}：{c}&nbsp;个',

        backgroundColor: '#fff', //设置背景颜色
        border: '0.5px solid #edeeef',
        borderRadius: '8px',
        boxShadow: '0px 0px 4px 0px rgba(10,42,97,0.10)',
      },
      legend: {
        top: '4%',
        left: 'center', // 水平居中,
        itemWidth: 8,
        itemHeight: 10,
        itemGap: 30,
        textStyle: {
          fontSize: 12, //描述文案字体大小
          color: '#08101E',
          padding: [0, 0, 0, 10],
        },
      },
      grid: {
        top: '18%',
        left: '5%',
        right: '10%',
        bottom: '1%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: myData1,
          axisTick: {
            show: false,
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: '#1C82C5',
            },
          },
          axisLabel: {
            interval: 0,
            margin: 10,
            color: '#05D5FF',
            rotate: -45,
            formatter: formatAxisLabel, // 应用格式化函数
            textStyle: {
              fontSize: 10,
              color: '#08101E',
            },
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '线索数/个',
          splitNumber: 5, //y轴均分5等份
          nameTextStyle: {
            color: '#08101E',
            fontSize: 12,
            align: 'center',
            padding: [0, 28, 0, 0],
          },
          axisLabel: {
            formatter: '{value}',
            color: 'rgba(95, 187, 235, 1)',
            textStyle: {
              fontSize: 14,
              color: '#08101E',
              lineHeight: 16,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(28, 130, 197, .3)',
              type: 'dashed',
            },
          },
        },
      ],
      dataZoom: [
        {
          type: 'slider',
          realtime: true,
          //移动端展示方式
          handleSize: '100%', //滑动条两侧的大小
          start: 0,
          end: 50,
        },
      ],
      series: [
        {
          name: '线索数',
          type: chartType,
          barWidth: '10',
          data: number1,
          itemStyle: {
            normal: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#159aff',
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,58,255,0.00)',
                  },
                ],
              },
              // borderColor: "#3681FF",
            },
            // borderRadius: [2, 2, 0, 0],
          },
        },
      ],
    };
    let option2 = {
      //你的代码
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        textStyle: {
          color: '#08101E',
          fontSize: 14,
        },
        confine: true, // 超出范围
        formatter: '{b}<br>{a}：{c}个<br>{a1}：{c1}%',

        backgroundColor: '#fff', //设置背景颜色
        border: '0.5px solid #edeeef',
        borderRadius: '8px',
        boxShadow: '0px 0px 4px 0px rgba(10,42,97,0.10)',
      },
      legend: {
        top: '4%',
        left: 'center', // 水平居中,
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 30,
        textStyle: {
          fontSize: 16,
          color: '#08101E',
          padding: [0, 0, 0, 10],
        },
      },
      grid: {
        top: '18%',
        left: '2%',
        right: '2%',
        bottom: '1%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: myData1,
          axisTick: {
            show: false,
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: '#1C82C5',
            },
          },
          axisLabel: {
            interval: 0,
            margin: 10,
            color: '#05D5FF',
            rotate: -15,
            textStyle: {
              fontSize: 14,
              color: '#08101E',
            },
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '个',
          splitNumber: 5,
          nameTextStyle: {
            color: '#08101E',
            fontSize: 12,
            align: 'center',
            padding: [0, 28, 0, 0],
          },
          axisLabel: {
            formatter: '{value}',
            color: 'rgba(95, 187, 235, 1)',
            textStyle: {
              fontSize: 14,
              color: '#08101E',
              lineHeight: 16,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(28, 130, 197, .3)',
              type: 'dashed',
            },
          },
        },
        {
          name: '%',
          splitNumber: 5,
          type: 'value',
          nameTextStyle: {
            color: '#08101E',
            fontSize: 12,
            align: 'center',
            padding: [0, 0, 0, 25],
          },
          axisLabel: {
            show: true,
            fontSize: 12,
            color: '#08101E',
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: '预警数',
          type: 'bar',
          barWidth: '20',
          data: number1,
          itemStyle: {
            normal: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#159aff',
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,58,255,0.00)',
                  },
                ],
              },
              // borderColor: "#3681FF",
            },
            // borderRadius: [2, 2, 0, 0],
          },
        },
        {
          name: '处置率',
          type: 'line',
          yAxisIndex: 1, // 与第二个 y 轴关联
          showSymbol: true,
          symbolSize: 8,
          lineStyle: {
            normal: {
              color: '#02D3EA',
            },
          },
          itemStyle: {
            color: '#02D3EA',
            // borderColor: "#02D3EA",
            borderWidth: 2,
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              fontSize: 14,
              color: '#58F3FF',
            },
          },
          data: number2, // 折线图的数据
        },
      ],
    };

    myChart.setOption(type === 'twoY' ? option2 : option1);
  }, [myData1, number1, number2, data, id, type]);

  return (
    <div
      style={{ minHeight: '390px', marginTop: '20px', width: '100%' }}
      id={id || 'chart_line'}
    />
  );
};

export default ChartLine;