页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

...

代码块
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 optionselfOption = {
        animation: false,
        bmap: {
            center: [104.114129, 37.550339],
            zoom: 5,
            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(optionselfOption);

})

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

关于热度图的具体使用,可以进一步参考: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['children'] = mapChildren(item.children);
            }
            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 = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series:[
            {
                type: 'tree',

                data: data,
                edgeShape: 'polyline',
                left: '2%',
                right: '2%',
                top: '8%',
                bottom: '20%',

                symbol: 'emptyCircle',

                orient: 'vertical',

                expandAndCollapse: true,

                label: {
                    position: 'top',
                    rotate: -90,
                    verticalAlign: 'middle',
                    align: 'right',
                    fontSize: 9
                },

                leaves: {
                    label: {
                        position: 'bottom',
                        rotate: -90,
                        verticalAlign: 'middle',
                        align: 'left'
                    }
                },

                animationDurationUpdate: 750
            }
        ]
    };
    // 假设控件的代号是“EChart2”
    let myChart = this.getAddinById("EChart2");
    myChart.chart.setOption(option);
});

最终结果如下所示:

...