datagear图表开发

当前文档仅是对datagear的前端开发作些说明, 因为图表的个性配置较多,基本上所有的图表都使用了自定义渲染器的方式

为了方便对数据的处理，页面中还引入了vue

一、 引入资源

下面动图展示了如何在看板中引入资源

1. 示例代码(js部分)

<script type="text/javascript" src="res/js/vue.min.js"></script>
<script type="text/javascript" src="res/js/element-ui.min.js"></script>
<script type="text/javascript" src="res/js/customOptions.js"></script>
<script>
Vue.use(ELEMENT, { size: 'small' })
const vm = new Vue({
    el: '#app',
    data: function() {
        return {
            carData: {
                inCarNum: 0,
                outCarNum: 0,
                totalSpace: 0,
                inMonthCardNum: 0
            },
            areaInfo: {
                current: 'map',
                mapItems: [
                    { name: '在管面积', num: 0, unit: '万㎡' },
                    { name: '客户数量', num: 0, unit: '个' }
                ],
                industrialInfos: [
                    // { name: '写字楼', num: 0, unit: '万㎡', color: '#0263ff' },
                    // { name: '商铺', num: 0, unit: '万㎡', color: '#00eb9b' },
                    // { name: '产业园区', num: 0, unit: '万㎡', color: '#dd1116' },
                    // { name: '公租房', num: 0, unit: '万㎡', color: '#ecf1b0' },
                    // { name: '其他', num: 0, unit: '万㎡', color: '#f3b1ef' }
                ]
            }
        }
    }
})
</script>

2. 自定义渲染器-非echarts图表展示数据
   开发思路：绑定图表去获取数据，通过自定义渲染器对返回的数据进行处理，如展示在页面

这个绑定的图表我们用样式将其隐藏，只使用它返回的数据

<!-- 客户数和在管面积 -->
<div dg-chart-widget="b78c1e5c21843c475dd7" dg-chart-renderer="areaRenderer" style="display:none"></div>

<script>
// 客户数量和在管面积
let areaRenderer = 
{
    render: function(chart){},
    update: function(chart, results) {
        let chartDataSet = chart.chartDataSetMain()
        let datas = chart.resultDatasOf(results, chartDataSet)
        let first = datas[0]
        vm.areaInfo.mapItems[0].num = first.minimumAreas // 拿到返回的数据后赋值给vue实例的数据
    }
}
</script>

3. 自定义图表并传递参数

<div class="panel">
    <div class="title"><label>各业态资源出租情况</label></div>                   
    <div class="chart" dg-chart-listener="myChartListener" id="myChartResourceRent" dg-chart-renderer="myChartRentRenderer" dg-chart-widget="08ab69a8d1843b968305"></div>
</div>

<script>
    const myChartListener =
    {
        render: function(chart) {
            let ten = (dashboard.renderContextAttr("tenant_id") || 58 )
            chart.dataSetParamValue(0, "tenant_id", ten * 1)
        }
    }

    // 自定义图表渲染器
    let myChartRentRenderer = {
        render: function (chart) {
            let chartDataSet = chart.chartDataSetMain()
            chart.dataSetParamValue(chartDataSet, 'tenant_id', 58)
            let config = {
                tooltip: { unit: '万㎡', tipName: '出租率' },
                // xAxis: {
                //  data: ['商铺', '产业园区', '公租房', '写字楼', '其他']
                // },
                yAxis: {
                    unitName: '单位：万㎡'
                }
            }
            let options = customBarOptions(config)
            //初始化ECharts
            chart.echartsInit(options)
        },
        update: function (chart, results) {
            let chartDataSet = chart.chartDataSetMain()
            let datas = chart.resultDatasOf(results, chartDataSet); // 拿到返回的数据
            let [nameArr, seriesData, seriesData2 ] = [[], [], []]
            datas.forEach(x => {
                nameArr.push(x.propertyStatusName ? x.propertyStatusName : '其他')
                seriesData.push(x.propertyChargeArea)
                seriesData2.push(x.emptyArea)
            })
            var options = chart.inflateUpdateOptions(results, {
                xAxis: { data: nameArr },
                series: [{ data: seriesData }, { data: seriesData2 }]
            })
            //更新图表数据
            chart.echartsOptions(options)
        }
    }

    function refreshChart(chartId, query) {
        var chart = dashboard.chartOf(chartId);
        var cds = chart.chartDataSetMain();
        chart.dataSetParamValues(cds, {...query});
        chart.refreshData();
    }

    setTimeout(() => {
        var ten = (dashboard.renderContextAttr("tenant_id") || 58 ) * 1
        refreshChart('myChartResourceRent', { tenant_id: ten })
    }, 500)
</script>

3. 使用样式将参数隐藏

.dg-chart-setting-box {
    display: none !important;
}

image.png