Scatterplot heatmap

描述:当前是关于Echarts图表中的 散点图 示例。
 
            var res = {"strengths":[{"statistic":0.0036903921895775713,"feature2":"NumberOfTime60_89DaysPastDueNotWorse","feature1":"NumberOfOpenCreditLinesAndLoans"},{"statistic":0.17567272974858317,"feature2":"MonthlyIncome","feature1":"DebtRatio"},{"statistic":0.01573909886917953,"feature2":"RevolvingUtilizationOfUnsecuredLines","feature1":"MonthlyIncome"},{"statistic":0.01249373686131188,"feature2":"NumberRealEstateLoansOrLines","feature1":"NumberOfDependents"},{"statistic":0.1575589637470856,"feature2":"NumberRealEstateLoansOrLines","feature1":"DebtRatio"},{"statistic":0.04144961430582204,"feature2":"RevolvingUtilizationOfUnsecuredLines","feature1":"NumberOfOpenCreditLinesAndLoans"},{"statistic":0.10787656788085649,"feature2":"NumberOfTimes90DaysLate","feature1":"NumberOfTime60_89DaysPastDueNotWorse"},{"statistic":0.0018614744047926967,"feature2":"NumberRealEstateLoansOrLines","feature1":"NumberOfTime30_59DaysPastDueNotWorse"},{"statistic":0.0089822558291601,"feature2":"age","feature1":"NumberOfTime30_59DaysPastDueNotWorse"},{"statistic":0.00488901151849058,"feature2":"SeriousDlqin2yrs","feature1":"NumberOfOpenCreditLinesAndLoans"},{"statistic":0.041366761763551065,"feature2":"NumberRealEstateLoansOrLines","feature1":"MonthlyIncome"},{"statistic":0.0023799978594728605,"feature2":"SeriousDlqin2yrs","feature1":"NumberRealEstateLoansOrLines"},{"statistic":0.0030258706647910754,"feature2":"NumberOfTime60_89DaysPastDueNotWorse","feature1":"MonthlyIncome"},{"statistic":0.09715714888907517,"feature2":"NumberOfTimes90DaysLate","feature1":"NumberOfTime30_59DaysPastDueNotWorse"},{"statistic":0.009930333777959124,"feature2":"NumberOfTime30_59DaysPastDueNotWorse","feature1":"DebtRatio"},{"statistic":0.0010249234375378697,"feature2":"NumberOfTimes90DaysLate","feature1":"NumberOfDependents"},{"statistic":0.012549537267683541,"feature2":"age","feature1":"SeriousDlqin2yrs"},{"statistic":0.055319629543347654,"feature2":"NumberOfOpenCreditLinesAndLoans","feature1":"DebtRatio"},{"statistic":0.025005800922790766,"feature2":"NumberOfOpenCreditLinesAndLoans","feature1":"MonthlyIncome"},{"statistic":0.0057237166878586635,"feature2":"NumberOfTime30_59DaysPastDueNotWorse","feature1":"NumberOfOpenCreditLinesAndLoans"},{"statistic":0.003526265169118471,"feature2":"NumberOfTime30_59DaysPastDueNotWorse","feature1":"MonthlyIncome"},{"statistic":0.014619479460319901,"feature2":"NumberOfTimes90DaysLate","feature1":"NumberOfOpenCreditLinesAndLoans"},{"statistic":0.002414979643707577,"feature2":"NumberRealEstateLoansOrLines","feature1":"NumberOfTime60_89DaysPastDueNotWorse"},{"statistic":0.007111870204712414,"feature2":"RevolvingUtilizationOfUnsecuredLines","feature1":"NumberOfDependents"},{"statistic":0.03275795561971808,"feature2":"NumberOfDependents","feature1":"MonthlyIncome"},{"statistic":0.01428103746713262,"feature2":"RevolvingUtilizationOfUnsecuredLines","feature1":"NumberRealEstateLoansOrLines"},{"statistic":0.025940948189331844,"feature2":"age","feature1":"DebtRatio"},{"statistic":0.06284895830719812,"feature2":"SeriousDlqin2yrs","feature1":"NumberOfTime30_59DaysPastDueNotWorse"},{"statistic":0.031191472081927674,"feature2":"RevolvingUtilizationOfUnsecuredLines","feature1":"NumberOfTime30_59DaysPastDueNotWorse"},{"statistic":0.0017899809887417233,"feature2":"SeriousDlqin2yrs","feature1":"NumberOfDependents"},{"statistic":0.007597736925386851,"feature2":"NumberRealEstateLoansOrLines","feature1":"NumberOfTimes90DaysLate"},{"statistic":0.02239609965352787,"feature2":"age","feature1":"NumberOfOpenCreditLinesAndLoans"},{"statistic":0.00189765343588152,"feature2":"NumberOfTime60_89DaysPastDueNotWorse","feature1":"DebtRatio"},{"statistic":0.12199058272246016,"feature2":"SeriousDlqin2yrs","feature1":"NumberOfTimes90DaysLate"},{"statistic":0.00542024860592497,"feature2":"SeriousDlqin2yrs","feature1":"DebtRatio"},{"statistic":0.08845064270040555,"feature2":"NumberOfTime60_89DaysPastDueNotWorse","feature1":"NumberOfTime30_59DaysPastDueNotWorse"},{"statistic":0.0007162928189992007,"feature2":"NumberOfTime60_89DaysPastDueNotWorse","feature1":"NumberOfDependents"},{"statistic":0.02840304696272171,"feature2":"age","feature1":"MonthlyIncome"},{"statistic":0.04173153417695137,"feature2":"RevolvingUtilizationOfUnsecuredLines","feature1":"NumberOfTimes90DaysLate"},{"statistic":0.03820212579640317,"feature2":"RevolvingUtilizationOfUnsecuredLines","feature1":"DebtRatio"},{"statistic":0.07268954923297358,"feature2":"SeriousDlqin2yrs","feature1":"NumberOfTime60_89DaysPastDueNotWorse"},{"statistic":0.038533429215975995,"feature2":"age","feature1":"NumberRealEstateLoansOrLines"},{"statistic":0.042678620386606435,"feature2":"age","feature1":"NumberOfDependents"},{"statistic":0.02494854964058496,"feature2":"age","feature1":"RevolvingUtilizationOfUnsecuredLines"},{"statistic":0.02487048481401141,"feature2":"NumberOfDependents","feature1":"DebtRatio"},{"statistic":0.07873798366571479,"feature2":"NumberRealEstateLoansOrLines","feature1":"NumberOfOpenCreditLinesAndLoans"},{"statistic":0.007634817270720645,"feature2":"NumberOfTimes90DaysLate","feature1":"MonthlyIncome"},{"statistic":0.004258023210208942,"feature2":"age","feature1":"NumberOfTime60_89DaysPastDueNotWorse"},{"statistic":0.029024561776422084,"feature2":"RevolvingUtilizationOfUnsecuredLines","feature1":"NumberOfTime60_89DaysPastDueNotWorse"},{"statistic":0.0027919318516345494,"feature2":"NumberOfTime30_59DaysPastDueNotWorse","feature1":"NumberOfDependents"},{"statistic":0.007014220660241561,"feature2":"NumberOfOpenCreditLinesAndLoans","feature1":"NumberOfDependents"},{"statistic":0.006028401684362547,"feature2":"NumberOfTimes90DaysLate","feature1":"DebtRatio"},{"statistic":0.00482428444674937,"feature2":"SeriousDlqin2yrs","feature1":"MonthlyIncome"},{"statistic":0.0084792025417689,"feature2":"age","feature1":"NumberOfTimes90DaysLate"},{"statistic":0.040080111790151585,"feature2":"SeriousDlqin2yrs","feature1":"RevolvingUtilizationOfUnsecuredLines"},{"statistic":1,"feature2":"DebtRatio","feature1":"DebtRatio"},{"statistic":1,"feature2":"MonthlyIncome","feature1":"MonthlyIncome"},{"statistic":1,"feature2":"NumberOfDependents","feature1":"NumberOfDependents"},{"statistic":1,"feature2":"NumberOfOpenCreditLinesAndLoans","feature1":"NumberOfOpenCreditLinesAndLoans"},{"statistic":1,"feature2":"NumberOfTime30_59DaysPastDueNotWorse","feature1":"NumberOfTime30_59DaysPastDueNotWorse"},{"statistic":1,"feature2":"NumberOfTime60_89DaysPastDueNotWorse","feature1":"NumberOfTime60_89DaysPastDueNotWorse"},{"statistic":1,"feature2":"NumberOfTimes90DaysLate","feature1":"NumberOfTimes90DaysLate"},{"statistic":1,"feature2":"NumberRealEstateLoansOrLines","feature1":"NumberRealEstateLoansOrLines"},{"statistic":1,"feature2":"RevolvingUtilizationOfUnsecuredLines","feature1":"RevolvingUtilizationOfUnsecuredLines"},{"statistic":1,"feature2":"SeriousDlqin2yrs","feature1":"SeriousDlqin2yrs"},{"statistic":1,"feature2":"age","feature1":"age"}],"features":[{"feature":"NumberRealEstateLoansOrLines","strengthSortIndex":2,"alphabeticSortIndex":7,"importanceSortIndex":2,"clusterSortIndex":0,"clusterId":0,"clusterName":"DebtRatio-cluster"},{"feature":"DebtRatio","strengthSortIndex":0,"alphabeticSortIndex":0,"importanceSortIndex":1,"clusterSortIndex":1,"clusterId":0,"clusterName":"DebtRatio-cluster"},{"feature":"MonthlyIncome","strengthSortIndex":3,"alphabeticSortIndex":1,"importanceSortIndex":5,"clusterSortIndex":2,"clusterId":0,"clusterName":"DebtRatio-cluster"},{"feature":"SeriousDlqin2yrs","strengthSortIndex":4,"alphabeticSortIndex":9,"importanceSortIndex":0,"clusterSortIndex":3,"clusterId":1,"clusterName":"SeriousDlqin2yrs-cluster"},{"feature":"NumberOfTime60_89DaysPastDueNotWorse","strengthSortIndex":5,"alphabeticSortIndex":5,"importanceSortIndex":6,"clusterSortIndex":4,"clusterId":1,"clusterName":"SeriousDlqin2yrs-cluster"},{"feature":"NumberOfTimes90DaysLate","strengthSortIndex":1,"alphabeticSortIndex":6,"importanceSortIndex":8,"clusterSortIndex":5,"clusterId":1,"clusterName":"SeriousDlqin2yrs-cluster"},{"feature":"NumberOfTime30_59DaysPastDueNotWorse","strengthSortIndex":6,"alphabeticSortIndex":4,"importanceSortIndex":9,"clusterSortIndex":6,"clusterId":null},{"feature":"age","strengthSortIndex":9,"alphabeticSortIndex":10,"importanceSortIndex":7,"clusterSortIndex":7,"clusterId":null},{"feature":"NumberOfOpenCreditLinesAndLoans","strengthSortIndex":8,"alphabeticSortIndex":3,"importanceSortIndex":4,"clusterSortIndex":8,"clusterId":null},{"feature":"RevolvingUtilizationOfUnsecuredLines","strengthSortIndex":7,"alphabeticSortIndex":8,"importanceSortIndex":10,"clusterSortIndex":9,"clusterId":null},{"feature":"NumberOfDependents","strengthSortIndex":10,"alphabeticSortIndex":2,"importanceSortIndex":3,"clusterSortIndex":10,"clusterId":null}]}


const keys = res.features.map((m) => m.feature);
const map = { key_null: [] };
let uniqueId = 0
res.features.forEach((item, i) => {
  const key = `key_${item.clusterId}`;
  if (!map[key]) {
    map[key] = [];
  }

  res.features.forEach((item2, j) => {
    const f = res.strengths.find((m) => m.feature1 === item.feature && m.feature2 === item2.feature);
    if (item.clusterId === item2.clusterId) {
      map[key].push({
          name: 'id_' + uniqueId++,
          value: [i, keys.length - 1 - j, f ? f.statistic : 0],
          meta: {...item}
      });
    } else {
        // [i, keys.length - 1 - j, f ? f.statistic : 0]
      map.key_null.push({
          name: 'id_' + uniqueId++,
          value: [i, keys.length - 1 - j, f ? f.statistic : 0],
          meta: {...item}
      });
    }
  });
});

// console.log(map, map['key_0'])
//  return
 
option = {
    grid: {
        height: '50%',
        top: '12%',
        left: '25%',
        right: '25%',
    },
    xAxis: {
        type: 'category',
        data: keys,
        axisTick: {
            show: false
        },
        axisLabel: {
            rotate: 90
        },
        axisLine: {
            show: false
        }
    },
    yAxis: {
        type: 'category',
        data: keys,
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        }
    },
    tooltip: {
        axisPointer: {
            type: 'none'
        }
    },
    visualMap: [
        {
            show: false,
            min: 0,
            max: 1,
            precision: 6,
            calculable: false,
            orient: 'horizontal',
            inRange: {
                color: ['#ffe6e8','#ffa3af','#ff7a91','#f54e70','#e82553','#db003a'],
                symbolSize: 20
            },
            seriesIndex: 0,
        },
        {
            show: false,
            min: 0,
            max: 1,
            precision: 6,
            calculable: false,
            orient: 'horizontal',
            inRange: {
                color: ['#dce8da','#cfdbce','#a5cfa3','#7ac27a','#55b558','#34a83b'],
                symbolSize: 20
            },
            seriesIndex: 1,
        },
        {
            min: 0,
            max: 1,
            precision: 6,
            calculable: false,
            orient: 'horizontal',
            left: 'center',
            top: '5%',
            inRange: {
                color: [ '#f5f5f5','#d9d9d9','#8c8c8c','#434343','#1f1f1f', '#000000'],
                symbolSize: 20
            },
            seriesIndex: 2,
            text:['强','弱'],
            textStyle: {
                color: '#707070'
            }
        },
    ],
    series: [
        {
            name: 'Punch Card1',
            type: 'scatter',
            data: map.key_0,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            selectedMode: 'single',
            select: {
               itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
        },
         {
            name: 'Punch Card2',
            type: 'scatter',
            data:  map.key_1,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            selectedMode: 'single',
            select: {
               itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
        },
         {
            name: 'Punch Card3',
            type: 'scatter',
            data:  map.key_null,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            selectedMode: 'single',
            select: {
               itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
        },
    ]
};

var ids = []

// myChart.on('click', function (params) {
//     console.log(params);
//     myChart.dispatchAction({
//         type: 'downplay',
//         seriesIndex: ids[0],
//         dataIndex: ids[1]
//   });
//   if(ids[0] != params.seriesIndex || ids[1] != params.dataIndex) {
//       myChart.dispatchAction({
//         type: 'highlight',
//         seriesIndex: params.seriesIndex,
//         dataIndex: params.dataIndex
//       });
//       ids = [params.seriesIndex,params.dataIndex]
//   } else {
//       ids = []
//   }
    
// });

// setTimeout(function() {
//     myChart.dispatchAction({
//         type: 'highlight',
//         seriesIndex: 0,
//         dataIndex: [1]
//   });
//   myChart.dispatchAction({
//         type: 'select',
//         seriesIndex: 0,
//         dataIndex: 0
//   });
// }, 2000);