echarts简单使用

 let myChart = echarts.init(myChartRef1.current as HTMLElement);
    // 绘制图表
    myChart.setOption({
      //图表标题
      title: {
        text: '近7天有效订单与成交金额趋势',
        left: 'center', // 水平居中（默认）
        top: 10, //距离顶部10px
      },
      //鼠标悬停提示
      tooltip: {
        trigger: 'axis', // ✅ 触发整条 x 轴的 tooltip
        axisPointer: {
          type: 'cross' // 'line' 也可以，'cross' 更明显
        }
      },
      //x轴数据配置
      xAxis: {
        data: successOrderNum.dates?.map(date => date.slice(5)),
      },
      //配置y轴，可以配置两条
      yAxis: [{
        type: 'value',
        name: '订单数（笔）',   // 主 y 轴
        position: 'left',
        axisLine: {
          lineStyle: { color: '#4f8ef7' }
        },
        min: 0,
        max: 100
      },
      {
        type: 'value',
        name: '成交金额（元）', // 副 y 轴
        position: 'right',
        axisLine: {
          lineStyle: { color: '#f77b55' }
        }
      }],
      //图例说明
      legend: {
        data: ['有效交易订单数', '订单金额'], //这个要和series中的项的name对应起来
        top: 30,
      },
      //可以通过series配置多条折线或者bar
      series: [
        {
          name: '有效交易订单数',
          type: 'line',
          data: [],
          itemStyle: { color: '#4f8ef7' },
          yAxisIndex: 0, // ✅ 使用左边主 Y 轴
        },
        {
          name: '订单金额',
          type: 'line',
          data: [],
          itemStyle: { color: '#f77b55' },
          yAxisIndex: 1, // ✅ 使用右边主 Y 轴
        }
      ],
    });