...
最后，为了把数据输入到自定义控件，需要设置正确的配置项，在此我们直接拷贝了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(optionselfOption = {
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
}]
});
})
myChart.setOption(selfOption);
}) |
将上述代码放入自定义控件，最终效果是：
关于热度图的具体使用，可以进一步参考：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;
if(obj['childrenvalue'] in= item) {
.childrenCount;
obj[if('valuechildren'] =in item.children.length;) {
obj['children'] = mapChildren(item.children);
}
else { obj['value'] = 0; } arrarr.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);
myChart.setOption(let option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series:[
{
type: 'tree',
iddata: 0data,
nameedgeShape: 'tree1polyline',
dataleft: data'2%',
topright: '10%2%',
lefttop: '8%',
bottom: '22%20%',
rightsymbol: '20%emptyCircle',
orient: 'vertical',
symbolSize: 7, expandAndCollapse: true,
edgeShape: 'polyline',
edgeForkPosition: '63%',
initialTreeDepth: 3,
lineStyle: { widthlabel: 2{
},
label: {position: 'top',
backgroundColorrotate: '#fff'-90,
positionverticalAlign: 'leftmiddle',
verticalAlignalign: 'middleright',
align: 'right' fontSize: 9
}, },
leaves: {
label: {
position: 'rightbottom',
verticalAlignrotate: 'middle'-90,
alignverticalAlign: 'leftmiddle',
} align: 'left'
}, }
expandAndCollapse: true, },
animationDuration: 550, animationDurationUpdate: 750
animationDurationUpdate:}
750 ]
};
]
}myChart.setOption(option);
}); |
最终结果如下所示：
关于树的细节配置详见：https://echarts.apache.org/zh/option.html#series-tree.type
...