1.0.3 • Published 2 years ago

@sensecare/reduced-map-chart v1.0.3

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

降维映射展示图

  • 基于Echrets封装的降维映射展示图

image.png

/**
 * 降维映射展示
 * @param {*} id 当前选中容器
 * @param { string } xname x轴的名称
 * @param { string } yname y轴的名称
 * @param {*} scatterData 散点图的集合配置信息
 * @param {*} lineData 折线集合配置信息
 * @param {*} chartMap 当前图表实例组合
 * @param {*} clear 清空画布
 */

  import { initReducedMapChart } from '~';
const xname = 'PCA1(272%)';const yname = 'PCA2(100%)';
    const chartMap = new Map();  
      // 散点图的集合
  const scatterData = [
    {
      name:'scatter-1',
      color:'#d75342',
      data:[[4.1,4.5],[3.5,4.2],[3.7,5.5],[4,2.3],[4,3.3],[4.2,3.1],[3.6,3.7]]
    },
    {
      name:'scatter-2',
      color:'#8cb5a8',
      data:[[1.1,4.5],[1.5,4.2],[1.7,5.5],[1.6,2.3],[2,3.3],[2.2,3.1],[2.6,5.7]]
    }
    {
      name:'scatter-3',
      color:'#6db9ce',
      data:[[2,2],[2.4,3],[2.8,1],[2.6,4.2],[3,4.1],[3.2,1],[2.6,5.7]]
    }
  ]
  // 折线集合
  const lineData = [
    {
      name: 'line-1',
      data: [[4,2], [5,3],[3.5,6],[3.2,3],[4,2]],
      color:'#d75342',
    },
    {
      name: 'line-2',
      data: [[1,1], [3,6],[2.5,7],[1.2,5],[1,1]],
      color:'#d75342',
    },
    {
      name: 'line-3',
      data: [[3,0.6], [2.8,4],[2,4.5],[1.8,2,5],[3,0.6]],
      color:'#d75342',
    }
  ]
    

    // 初始化通路详情图
    initReducedMapChart({ scatterData,lineData,xname,yname,id:'reducedMap',chartMap })