1，引用插件g2plot.min.js
2，相关代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="g2plot.min.js"></script>
</head>
<body>
<div id="container"></div>
<div id="container2"></div>
</body>
<script>
// const { Line } = G2Plot;
const { Column } = G2Plot;
const { Pie } = G2Plot;
</script>
<script type="text/javascript">
var aa= {"dataList":"[{\"DeptCode\":\"5\",\"DeptName\":\"眼科\",\"R1\":\"100.00%\",\"R2\":\"76.00%\",\"SortNum\":1,\"CreateTime\":\"2021-06-23T14:18:37.977\",\"HospitalCode\":\"01\"},{\"DeptCode\":\"6\",\"DeptName\":\"耳鼻喉科\",\"R1\":\"100.00%\",\"R2\":\"79.00%\",\"SortNum\":2,\"CreateTime\":\"2021-06-23T14:18:37.977\",\"HospitalCode\":\"01\"},{\"DeptCode\":\"2\",\"DeptName\":\"眼耳鼻整形外科\",\"R1\":\"100.00%\",\"R2\":\"62.00%\",\"SortNum\":3,\"CreateTime\":\"2021-06-23T14:18:37.977\",\"HospitalCode\":\"01\"},{\"DeptCode\":\"B\",\"DeptName\":\"放疗科\",\"R1\":\"100.00%\",\"R2\":\"91.00%\",\"SortNum\":4,\"CreateTime\":\"2021-06-23T14:18:37.977\",\"HospitalCode\":\"01\"}]","DataCode":"002402","SqlStr":"SELECT [DeptCode],[DeptName],[R1],[R2],[SortNum],[CreateTime],[HospitalCode] FROM OP_Appointment_Dept_01 WHERE HospitalCode =\u002701\u0027 order by [SortNum] asc","success":true,"msg":"获取成功"}
let ComprehensivetableList= JSON.parse(aa.dataList)
var tableList1 = [];
var tableList2 = [];
var tableList3 = [];
var tableList4 = [];
ComprehensivetableList.forEach((it, inx) => {
let item1={}
let item2={}
let item3={}
item1.name="预约率"
item1.科室名称=it.DeptName
item1.value= parseInt(it.R1)
item2.name="复诊就诊率"
item2.科室名称=it.DeptName
item2.value= parseInt(it.R2)
tableList1.push(item1,item2)
tableList2.push(item1,item2)
tableList3.push(item1,item2)
})
tableList4.push(tableList1,tableList2,tableList3)
console.log(tableList4)
const data =tableList4[0]
const stackedColumnPlot = new Column('container', {
data,
isGroup: true,
xField: '科室名称',
yField: 'value',
seriesField: 'name',
/** 设置颜色 */
color: ['#1ca9e6', '#f88c24'],
/** 设置间距 */
marginRatio: 0,
columnWidthRatio:0.2,
label: {
content: '',
// 可手动配置 label 数据标签位置
position: 'middle', // 'top', 'middle', 'bottom'
// 可配置附加的布局方法
layout: [
// 柱形图数据标签位置自动调整
{ type: 'interval-adjust-position' },
// 数据标签防遮挡
{ type: 'interval-hide-overlap' },
// 数据标签文颜色自动调整
{ type: 'adjust-color' },
],
},
});
stackedColumnPlot.render();
//
var bb= {"dataList":"[{\"name\":\"现场预约\",\"value\":\"1146\",\"CreateTime\":\"2021-06-23T14:48:44.543\",\"HospitalCode\":\"01\"},{\"name\":\"自助\",\"value\":\"299\",\"CreateTime\":\"2021-06-23T14:48:44.543\",\"HospitalCode\":\"01\"},{\"name\":\"诊间预约\",\"value\":\"607\",\"CreateTime\":\"2021-06-23T14:48:44.543\",\"HospitalCode\":\"01\"},{\"name\":\"网上预约\",\"value\":\"738\",\"CreateTime\":\"2021-06-23T14:48:44.543\",\"HospitalCode\":\"01\"},{\"name\":\"微信\",\"value\":\"1455\",\"CreateTime\":\"2021-06-23T14:48:44.543\",\"HospitalCode\":\"01\"},{\"name\":\"支付宝\",\"value\":\"438\",\"CreateTime\":\"2021-06-23T14:48:44.543\",\"HospitalCode\":\"01\"}]","DataCode":"002602","SqlStr":"SELECT [R1] as name,[R2] as value,[CreateTime],[HospitalCode] FROM OP_Appointment_VisitToday WHERE HospitalCode =\u002701\u0027 ","success":true,"msg":"获取成功"}
let cake= JSON.parse(bb.dataList)
var caketableList1 = [];
var caketableList4 = [];
cake.forEach((it, inx) => {
let cakeitem1={}
cakeitem1.type=it.name
cakeitem1.value= parseInt(it.value)
caketableList1.push(cakeitem1)
})
caketableList4.push(caketableList1,caketableList1,caketableList1)
console.log(caketableList4)
const cakedata =caketableList4[0]
const data1 = cakedata
const piePlot = new Pie('container2', {
appendPadding: 10,
data:data1,
angleField: 'value',
colorField: 'type',
radius: 1,
innerRadius: 0.6,
label: {
type: 'inner',
offset: '-50%',
content: '',
style: {
textAlign: 'center',
fontSize: 14,
},
},
interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
statistic: {
title: false,
content: {
style: {
whiteSpace: 'pre-wrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
content: '',
},
},
});
piePlot.render();
</script>
</html>
网友评论