tsg-web/src/views/sz/pxjlgl/options.js

export default function options(data={}) {
   const xAxisData = data?.list?.map(item => item.month + "月")
    const maxCount = data?.list ? Math.ceil(Math.max(...data?.list?.map(obj => [obj.num1,obj.num2]).flat())) : 0
   const minCount = data?.list ?  Math.floor(Math.min(...data?.list?.map(obj => [obj.num1, obj.num2]).flat())) : 100

   const maxRate = data?.list ? Math.ceil(Math.max(...data?.list?.map(obj => obj.rate))) : 0
   const minRate = data?.list ? Math.floor(Math.min(...data?.list?.map(obj => obj.rate))) : 100
    return {
        animation: true,
        tooltip: {
           trigger: 'axis',
           formatter: function (params) {
            var tooltipText = params[0].name + '<br/>';
            params.forEach(function (item) {
                if (item.seriesName === '完成率') {
                    tooltipText += item.marker + ' ' + item.seriesName + ': ' + item.value.toFixed(2) + '%<br/>';
                } else {
                    tooltipText += item.marker + ' ' + item.seriesName + ': ' + item.value + '<br/>';
                }
            });
            return tooltipText;
        }
        },
        grid: {
           top: '15%',
           bottom: '15%',
           right: '8%',
           left: '7%',
        },
        legend: {
           show: true,
           left: "10%",
           top: "-1%",
           itemWidth: 11,
           itemHeight: 10,
        },
        xAxis: {
           data:xAxisData,
         //   axisLine: {
         //   show: false // 隐藏X轴轴线
         //   },
         //   axisTick: {
         //   show: false // 隐藏X轴轴线
         //   },
     
         //   axisLabel: {
         //   show: true,
         //   margin: 14,
         //    //  formatter: '{value}月'
         //   }
        },
        yAxis: [
           {
           type: 'value',
           offset: 10,
           min: minCount,
           max: maxCount,
         //   splitLine:false,
           axisTick: {
              show: false
           },
           axisLine: {
              show: false,
           
           },
           axisLabel: {
              show: true,
              margin: 0,
              fontSize: 18,
           }
           },
           {
           type: 'value',
           name: '(%)',
           splitLine:false,
         
              min: minRate,
            max: maxRate,
           offset: 10,
             nameTextStyle: {
              color: 'rgba(255,255,255,0.5)',
              fontSize: '12px'
           },
           axisTick: {
              show: false
           },
           axisLine: {
              show: false,
           },
           axisLabel: {
              show: true,
              fontSize: 18,
              formatter: '{value}%'
           }
           }
        ],
        series: [
            {
                name: '计划期数',
                type: 'bar',
                barWidth: 25,
                data: data?.list?.map(item =>item.num2),
                itemStyle:{
                  color:"#6295fa"
                }
             },
           {
              name: '实际期数',
              type: 'bar',
              barWidth: 25,
              data: data?.list?.map(item =>item.num1),
              itemStyle:{
                color:"#62daab"
              }
           },
           {
           name: '完成率',
           type: 'line',
           yAxisIndex: 1,
           showSymbol:false,
           smooth: false, // 平滑曲线显示
           lineStyle: {
              width: 2,
              color: '#5d7092'
           },
           itemStyle: {
              color: '#5d7092',
              shadowColor: '#5d7092',
              shadowBlur: 10,
              borderColor: '#5d7092',
              borderWidth: 2
           },
           data: data?.list?.map(item => item.rate),
           }
        ]
     }
}