datagear圖表開(kāi)發(fā)
當(dāng)前文檔僅是對(duì)datagear的前端開(kāi)發(fā)作些說(shuō)明, 因?yàn)閳D表的個(gè)性配置較多,基本上所有的圖表都使用了自定義渲染器的方式
為了方便對(duì)數(shù)據(jù)的處理，頁(yè)面中還引入了vue
一、 引入資源
下面動(dòng)圖展示了如何在看板中引入資源
- 示例代碼(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: '萬(wàn)㎡' },
{ name: '客戶數(shù)量', num: 0, unit: '個(gè)' }
],
industrialInfos: [
// { name: '寫(xiě)字樓', num: 0, unit: '萬(wàn)㎡', color: '#0263ff' },
// { name: '商鋪', num: 0, unit: '萬(wàn)㎡', color: '#00eb9b' },
// { name: '產(chǎn)業(yè)園區(qū)', num: 0, unit: '萬(wàn)㎡', color: '#dd1116' },
// { name: '公租房', num: 0, unit: '萬(wàn)㎡', color: '#ecf1b0' },
// { name: '其他', num: 0, unit: '萬(wàn)㎡', color: '#f3b1ef' }
]
}
}
}
})
</script>
- 自定義渲染器-非echarts圖表展示數(shù)據(jù)
開(kāi)發(fā)思路：綁定圖表去獲取數(shù)據(jù)窟扑，通過(guò)自定義渲染器對(duì)返回的數(shù)據(jù)進(jìn)行處理高氮，如展示在頁(yè)面
這個(gè)綁定的圖表我們用樣式將其隱藏偿洁，只使用它返回的數(shù)據(jù)
<!-- 客戶數(shù)和在管面積 -->
<div dg-chart-widget="b78c1e5c21843c475dd7" dg-chart-renderer="areaRenderer" style="display:none"></div>
<script>
// 客戶數(shù)量和在管面積
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 // 拿到返回的數(shù)據(jù)后賦值給vue實(shí)例的數(shù)據(jù)
}
}
</script>
- 自定義圖表并傳遞參數(shù)
<div class="panel">
<div class="title"><label>各業(yè)態(tài)資源出租情況</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: '萬(wàn)㎡', tipName: '出租率' },
// xAxis: {
// data: ['商鋪', '產(chǎn)業(yè)園區(qū)', '公租房', '寫(xiě)字樓', '其他']
// },
yAxis: {
unitName: '單位：萬(wàn)㎡'
}
}
let options = customBarOptions(config)
//初始化ECharts
chart.echartsInit(options)
},
update: function (chart, results) {
let chartDataSet = chart.chartDataSetMain()
let datas = chart.resultDatasOf(results, chartDataSet); // 拿到返回的數(shù)據(jù)
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 }]
})
//更新圖表數(shù)據(jù)
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>
- 使用樣式將參數(shù)隱藏
.dg-chart-setting-box {
display: none !important;
}
image.png
