使用g2plot创建柱形图加折线
2021-06-28 本文已影响0人
上海_前端_求内推
1,首先引用g2plot.min.js
2,相关代码如下
3,value的值必须是int或者float类型，字符串和%数据无法成功
<!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>
</body>
<script>
// const { Line } = G2Plot;
const { DualAxes } = G2Plot;
</script>
<script type="text/javascript">
var aa={"dataList":"[{\"XAxis\":\"DX\",\"R1\":\"4\",\"R2\":\"20\",\"R3\":\"114\",\"R4\":\"5\",\"HospitalCode\":\"01\"},{\"XAxis\":\"CT平扫\",\"R1\":\"32\",\"R2\":\"98\",\"R3\":\"130\",\"R4\":\"8\",\"HospitalCode\":\"01\"},{\"XAxis\":\"CT增强\",\"R1\":\"8\",\"R2\":\"8\",\"R3\":\"16\",\"R4\":\"3\",\"HospitalCode\":\"01\"},{\"XAxis\":\"MR平扫\",\"R1\":\"3\",\"R2\":\"99\",\"R3\":\"202\",\"R4\":\"7\",\"HospitalCode\":\"01\"},{\"XAxis\":\"MR增强\",\"R1\":\"1\",\"R2\":\"66\",\"R3\":\"783\",\"R4\":\"3\",\"HospitalCode\":\"01\"}]","DataCode":"002401","SqlStr":"SELECT [XAxis],[R1],[R2],[R3],[R4],[HospitalCode] FROM OP_Ris_Table WHERE HospitalCode =\u002701\u0027 ","success":true,"msg":"获取成功"}
let ComprehensivetableList= JSON.parse(aa.dataList)
var tableList1 = [];
var tableList2 = [];
var tableList3 = [];
var tableList4 = [];
var tableList5 = [];
ComprehensivetableList.forEach((it, inx) => {
let item1={}
let item2={}
let item3={}
let item4={}
item1.time=it.XAxis
item1.item="预约人次"
item1.value= parseInt(it.R1)
item2.time=it.XAxis
item2.item="完成人次"
item2.value= parseInt(it.R2)
item4.time=it.XAxis
item4.count=parsefloat(it.R4)
tableList1.push(item1,item2)
tableList2.push(item1,item2)
tableList3.push(item1,item2)
tableList5.push(item4)
})
tableList4.push(tableList1,tableList2,tableList3)
console.log(tableList4)
console.log(tableList5)
const uvBillData =tableList4[0]
// [
// { time: '2019-04', value: 900, item: 'uv' },
// { time: '2019-05', value: 300, item: 'uv' },
// { time: '2019-06', value: 450, item: 'uv' },
// { time: '2019-07', value: 470, item: 'uv' },
// { time: '2019-04', value: 300, item: 'bill' },
// { time: '2019-05', value: 250, item: 'bill', },
// { time: '2019-06', value: 220, item: 'bill', },
// { time: '2019-07', value: 362, item: 'bill', },
// ];
const transformData = tableList5
// [
// { time: '2019-04', count: 30 },
// { time: '2019-05', count: 12 },
// { time: '2019-06', count: 40 },
// { time: '2019-07', count: 15 },
// ];
const dualAxes = new DualAxes('container', {
data: [uvBillData, transformData],
xField: 'time',
yField: ['value', 'count'],
geometryOptions: [
{
geometry: 'column',
isGroup: true,
seriesField: 'item',
columnWidthRatio: 0.4,
label: {},
color: ['#023AFF', '#FFA63F'],
},
{
geometry: 'line',
color: '#5AD8A6',
},
],
legend: {
custom: true,
position: 'top',
items: [
{
value: '预约人次',
name: '预约人次',
marker: { symbol: 'square', style: { fill: '#023AFF', r: 5 } },
},
{
value: '完成人次',
name: '完成人次',
marker: { symbol: 'square', style: { fill: '#FFA63F', r: 5 } },
},
// {
// value: 'count',
// name: '平均等待时间',
// marker: { symbol: 'square', style: { fill: '#5AD8A6', r: 5 } },
// },
],
},
});
dualAxes.render();
</script>
</html>
