页面历史

...

最后，为了把数据输入到自定义控件，需要设置正确的配置项，在此我们直接拷贝了Echart热度图的配置项（option）的设定。

由于，数据的获取是通过异步请求实现的，所以，在刷新自定义控件的前端显示时不能直接初始化option变量，而应该使用myChart由于，数据的获取是通过异步请求实现的，所以，在刷新自定义控件的前端显示时不能直接初始化option变量，而应该通过getAddinById获得EChart控件的引用，然后设置其属性chart.setOption( option= {})实现。实现更新。

完整的代码如下所示：

代码块

let param = {};
    
this.dwf_axios.post("/omf/entities/Asset/objects", param).then(res => {
    var objs = res.data.data;
    console.log(objs);
    points = objs.map(x => {
       return [x.locationX, x.locationY, x.workHours]
    });
    var myChart.setOption(option = {
        animation: false,
        titlebmap: {
            textcenter: '全国开工热度分布',[104.114129, 37.550339],
            zoom: }5,
        bmap: {   roam: true
        center: [104.114129, 37.550339],
     },
        zoom: 3,
            roam: true
        },
        visualMap: {
            show: false,
            top: 'top',
            min: 0,
            max: 5,
            seriesIndex: 0,
            calculable: true,
            inRange: {
                color: ['blue', 'blue', 'green', 'yellow', 'red']
            }
        },
        series: [{
            type: 'heatmap',
            coordinateSystem: 'bmap',
            data: points,
            pointSize: 5,
            blurSize: 8
        }]
    });

})	// 假设EChart控件的代号是EChart1
    var myChart = this.getAddinById("EChart1");
    myChart.chart.setOption(option); 
})

将上述代码放入自定义控件，最终效果是：

关于热度图的具体使用，可以进一步参考：https://echarts.apache.org/zh/option.html#series-heatmap.type

...

代码块

function mapChildren(tree = []){
    let arr = [];
    if(!!tree) {
        tree.forEach(item => {
            let obj = {};
            obj['name'] = item.right_partName;
            obj['value'] = item.childrenCount;
            if('children' in item) {
 	            obj['value'] = item.children.length;
    	        obj['children'] = mapChildren(item.children);
            }
else { 				obj['value'] = 0;
			}
            arr.push(obj);
        })
    }
    return arr
}

let param = {
    "childrenCondition":"",
    "leafCondition":"",
    "queryDirection":"LEFT_TO_RIGHT",
    "recursiveLevel":"6",
    "rootCondition":"and leftclass.plt_partType='产品'",
    "startIndex":0};


this.dwf_axios.post(`/omf/relations/PartToPart/tree`,param).then(res => {
   //在回调中处理
    let temRes = res.data.data;
    let data = mapChildren(temRes);
    let option = myChart.setOption({
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series:[
            {
                type: 'tree',

               id data: 0data,
                nameedgeShape: 'tree1polyline',
                dataleft: data'2%',
                     topright: '10%2%',
                lefttop: '8%',
                bottom: '22%20%',

                rightsymbol: '20%emptyCircle',

                    symbolSizeorient: 7'vertical',

                    edgeShapeexpandAndCollapse: 'polyline'true,

                edgeForkPositionlabel: '63%',{
                initialTreeDepth: 3,   position: 'top',
                   lineStyle rotate: {-90,
                    widthverticalAlign: 2'middle',
                },    align: 'right',
                label: {   fontSize: 9
                backgroundColor: '#fff',},

                leaves: {
  position: 'left',                 label: {
  verticalAlign: 'middle',                     alignposition: 'rightbottom',
                },        rotate: -90,
            leaves: {                     labelverticalAlign: {'middle',
                        positionalign: 'rightleft',
                    }
   verticalAlign: 'middle',            },

           align: 'left'    animationDurationUpdate:    750
            }
        ]
    };
  },  // 假设控件的代号是“EChart2”
    let myChart = this.getAddinById("EChart2");
          expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
    }myChart.chart.setOption(option);
});

最终结果如下所示：

关于树的细节配置详见：https://echarts.apache.org/zh/option.html#series-tree.type

...

页面树结构

版本比较

旧版本 2

新版本 3

标识