antdpro解决echarts不同单位

最新推荐文章于 2023-12-10 10:16:45 发布

sinreyeah

最新推荐文章于 2023-12-10 10:16:45 发布

阅读量222

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/sinreyeah/article/details/128235731

版权

折线图配置如下

 const option = {

    tooltip: {
      formatter: function (params) {
        let relVal = params[0].name;

        if (params[0].seriesName==='覆盖率' && params[0]){

          relVal += '<br/>' + params[0].marker  +params[0].seriesName +' '+ params[0].value+ '%'

        }else if (params[0].seriesName==='缺陷数量' && !params[1]){
          relVal += '<br/>' + params[0].marker  +params[0].seriesName +' '+ params[0].value
        }
        else {
          relVal += '<br/>' + params[0].marker  +params[0].seriesName +' '+ params[0].value+
            '<br/>' + params[1].marker  +params[1].seriesName +' '+ params[1].value + '%'
        }

        // relVal += '<br/>' + `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00CBFF;"></span>` + params[0].seriesName + ' : ' + params[0].value + '%'
        return relVal
      },
      trigger: 'axis',
      axisPointer: { // 鼠标移动覆盖 显示横坐标虚线
        type: 'cross'
      },
      // formatter: "{a} <br/>{b} : {c}次"
    },
    // toolbox: {
    //   show: true,
    //   top: 10,
    //   right: 10,
    //   feature: {
    //     mark: { show: true },
    //     magicType: { show: true, type: ['line', 'bar'] },
    //     restore: { show: true },
    //     saveAsImage: { show: true }
    //   }
    // },
    grid: {
      top: 60,
      right: 70,
      bottom: 30,
      left: 80
    },
    legend: {
      icon: "rect",
      top: 0,
      right: 80,
      data: ['缺陷数量', '覆盖率']
    },
    calculable: true,
    xAxis: [
      {
        name: '任务名称',
        nameLocation:'start',
        type: 'category',
        splitLine: {show: true},
        axisTick: {show: false},
        data: taskName
      }
    ],
    yAxis: [
      {
        name: '缺陷数量',
        type: 'value',
        splitLine: {show: true},
        // name:"管\n线\n查\n询\n次\n数\n︵\n次\n︶",
        // nameLocation:"center",
        // nameGap:35,
        // nameRotate:0,
        // nameTextStyle:{
        //     fontSize: 16,
        // },
        //默认以千分位显示，不想用的可以在这加一段
        axisLabel: {   //调整左侧Y轴刻度， 直接按对应数据显示
          show: true,
          showMinLabel: true,
          showMaxLabel: true,
          formatter: function (value) {
            return value;
          }
        },
      },
      {
        name: '覆盖率',
        type: 'value',
        splitLine: {show: true},
        // name:"在\n线\n调\n用\n次\n数\n︵\n次\n︶",
        // nameLocation:"center",
        // nameGap:35,
        // nameRotate:0,
        // nameTextStyle:{
        //     fontSize: 16,
        // },
        //默认以千分位显示，不想用的可以在这加一段
        axisLabel: {   //调整左侧Y轴刻度， 直接按对应数据显示
          show: true,
          showMinLabel: true,
          showMaxLabel: true,
          formatter: function (value) {
            return value+'%';
          }
        }
      }
    ],

    series: [
      {
        symbol: "none",
        name: '缺陷数量',
        type: 'line',
        yAxisIndex: 0,
        data: defectTrend,
        itemStyle: {
          normal:
            {
              label: {show: true},
              lineStyle: {
                width: 5, //折线宽度

              }
            }
        },
      },

      {
        symbol: "none",
        name: '覆盖率',
        type: 'line',
        yAxisIndex: 1,
        data: coverage,
        itemStyle: {
          normal: {
            label: {show: true}, lineStyle: {
              width: 5, //折线宽度

            }
          }
        },
      }

    ]

  };

其中

 tooltip: {
      formatter: function (params) {
        let relVal = params[0].name;

        if (params[0].seriesName==='覆盖率' && params[0]){

          relVal += '<br/>' + params[0].marker  +params[0].seriesName +' '+ params[0].value+ '%'

        }else if (params[0].seriesName==='缺陷数量' && !params[1]){
          relVal += '<br/>' + params[0].marker  +params[0].seriesName +' '+ params[0].value
        }
        else {
          relVal += '<br/>' + params[0].marker  +params[0].seriesName +' '+ params[0].value+
            '<br/>' + params[1].marker  +params[1].seriesName +' '+ params[1].value + '%'
        }

        // relVal += '<br/>' + `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00CBFF;"></span>` + params[0].seriesName + ' : ' + params[0].value + '%'
        return relVal
      },

最为关键但仅限于两个数据的情况其他情况可自行解决

下面为组件

 <ReactECharts
                                 onEvents={{
                                   click: onChartClickDefectLevel,

                                 }}
                                 option={optionPie}
                                 style={{height: '220px', width: '100%'}}
                                 className="echarts-for-echarts"
                                 theme="my_theme"
                               />