datagear图表开发
当前文档仅是对datagear的前端开发作些说明, 因为图表的个性配置较多,基本上所有的图表都使用了自定义渲染器的方式
为了方便对数据的处理，页面中还引入了vue
一、 引入资源
下面动图展示了如何在看板中引入资源
- 示例代码(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>
- 自定义渲染器-非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>
- 自定义图表并传递参数
<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>
- 使用样式将参数隐藏
.dg-chart-setting-box {
display: none !important;
}
image.png
