forked from JointCloud/JCC-RIP
超算对接逻辑
This commit is contained in:
parent
5ad2a29df1
commit
ff719a5c42
|
|
@ -0,0 +1,37 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 获取顶部指标数据
|
||||
export function getDataList0(params) {
|
||||
return request({
|
||||
url: '/jcc-schedule/api/v1/cluster/list',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 获取超算域
|
||||
export function getDataList1(params) {
|
||||
return request({
|
||||
url: '/jcc-schedule/api/v1/cluster/list',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 获取作业列表
|
||||
export function getDataList2(params) {
|
||||
return request({
|
||||
url: '/jcc-schedule/api/v1/resource/getServerResources',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 获取资源利用率情况
|
||||
export function getDataList3(params) {
|
||||
return request({
|
||||
url: '/jcc-schedule/api/v1/resource/getServerResources',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,284 @@
|
|||
<template>
|
||||
<div id="barChart" ref="barChart" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import variables from '@/styles/variables.js'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
domainData: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
xAxis: [],
|
||||
data: [21, 44, 55, 77, 22, 32],
|
||||
data2: [22, 33, 22, 11, 44, 77],
|
||||
data3: [11, 22, 55, 44, 66, 33]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
jcceTheme() {
|
||||
return localStorage.getItem('jcceTheme')
|
||||
}
|
||||
},
|
||||
// watch: {
|
||||
// domainData(e) {
|
||||
// console.log(e)
|
||||
// if (e.length > 0) {
|
||||
// this.drawChart(e)
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
mounted() {
|
||||
this.drawChart()
|
||||
},
|
||||
methods: {
|
||||
drawChart(domainData) {
|
||||
const axisLabel = {
|
||||
textStyle: {
|
||||
color: variables[this.jcceTheme].barColor,
|
||||
fontSize: 12
|
||||
},
|
||||
interval: 'auto',
|
||||
formatter: '{value}'
|
||||
}
|
||||
const option = {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
const legend = ['slurm版本', '适配接口数量', '运行作业']
|
||||
// 整体总负载
|
||||
const barChart = echarts.init(this.$refs.barChart)
|
||||
const loadOption = {
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
top: '15%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: legend,
|
||||
selectedMode: false, // 是否允许点击
|
||||
textStyle: {
|
||||
color: '#999999',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
...option,
|
||||
type: 'category',
|
||||
data: this.xAxis,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: -10,
|
||||
padding: [0, 0, 0, -40],
|
||||
margin: 14,
|
||||
textStyle: {
|
||||
color: variables[this.jcceTheme].barColor,
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '',
|
||||
...option,
|
||||
axisLabel
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: legend[0],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [17, 7],
|
||||
symbolOffset: [-20, -5],
|
||||
symbolPosition: 'end',
|
||||
z: 12,
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
color: '#3182CE',
|
||||
data: this.data
|
||||
},
|
||||
{
|
||||
name: legend[0],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [17, 6],
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
symbolOffset: [-20, 5],
|
||||
z: 12,
|
||||
color: 'rgba(49, 130, 206, 0.4)',
|
||||
data: this.data
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
name: legend[0],
|
||||
barWidth: '17',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: '#3182CE'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(49, 130, 206, 0.25)'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
},
|
||||
data: this.data
|
||||
},
|
||||
{
|
||||
name: legend[1],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [17, 10],
|
||||
symbolOffset: [0, -5],
|
||||
symbolPosition: 'end',
|
||||
z: 12,
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
color: '#30BFB7',
|
||||
data: this.data2
|
||||
},
|
||||
{
|
||||
name: legend[1],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [17, 7],
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
symbolOffset: [0, 6],
|
||||
z: 12,
|
||||
color: 'rgba(48, 191, 183, 0.4)',
|
||||
data: this.data2
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
name: legend[1],
|
||||
barWidth: '17',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: '#30C0B7'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(48, 191, 183, 0.25)'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
},
|
||||
data: this.data2
|
||||
},
|
||||
{
|
||||
name: legend[2],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [17, 10],
|
||||
symbolOffset: [20, -5],
|
||||
symbolPosition: 'end',
|
||||
z: 12,
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
color: '#00CCFF',
|
||||
data: this.data3
|
||||
},
|
||||
{
|
||||
name: legend[2],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [17, 7],
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
symbolOffset: [21, 6],
|
||||
z: 12,
|
||||
color: 'rgba(0,204,255,0.35)',
|
||||
data: this.data3
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
name: legend[2],
|
||||
barWidth: '17',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: '#00CCFF'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,204,255,0.35)'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
},
|
||||
data: this.data3
|
||||
}
|
||||
]
|
||||
}
|
||||
barChart.setOption(loadOption)
|
||||
window.addEventListener('resize', function() {
|
||||
barChart.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#barChart {
|
||||
width: 100%;
|
||||
height: 216px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -18,14 +18,16 @@
|
|||
<List
|
||||
ref="multipleTable"
|
||||
class="multipleTable"
|
||||
:columns="columns1"
|
||||
:columns="domainColumns"
|
||||
height="200"
|
||||
:table-list-data="listData"
|
||||
highlight-current-row
|
||||
:table-list-data="domainList"
|
||||
:pagination="false"
|
||||
@row-click="clickLeft"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div id="barChart" ref="barChart" />
|
||||
<BarChart :domain-data="taskList" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
|
@ -40,9 +42,9 @@
|
|||
<List
|
||||
ref="multipleTable"
|
||||
class="multipleTable"
|
||||
:columns="columns2"
|
||||
:columns="taskColumns"
|
||||
height="315"
|
||||
:table-list-data="listData"
|
||||
:table-list-data="taskList"
|
||||
:pagination="false"
|
||||
/>
|
||||
</el-card>
|
||||
|
|
@ -55,33 +57,33 @@
|
|||
</div>
|
||||
<el-row class="resource">
|
||||
<el-col :span="12">
|
||||
<div>CPU <span class="impact num">0</span> 核</div>
|
||||
<div>CPU <span class="impact num">{{ resource.cpu.core }}</span> 核</div>
|
||||
<div class="money">
|
||||
<el-row class="impact">
|
||||
<el-col :span="12">0%</el-col>
|
||||
<el-col :span="12">0%</el-col>
|
||||
<el-col :span="12">{{ resource.cpu.cpu }}%</el-col>
|
||||
<el-col :span="12">{{ resource.cpu.ram }}%</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">CPU</el-col>
|
||||
<el-col :span="12">RAM</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<p>100%</p>
|
||||
<p>{{ resource.cpu.percent }}%</p>
|
||||
<span class="tips">过去24小时利用率</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div>GPU <span class="impact num">0</span> 卡</div>
|
||||
<div>GPU <span class="impact num">{{ resource.gpu.core }}</span> 卡</div>
|
||||
<div class="money money1">
|
||||
<el-row class="impact">
|
||||
<el-col :span="12">0%</el-col>
|
||||
<el-col :span="12">0%</el-col>
|
||||
<el-col :span="12">{{ resource.gpu.cpu }}%</el-col>
|
||||
<el-col :span="12">{{ resource.gpu.ram }}%</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">CPU</el-col>
|
||||
<el-col :span="12">RAM</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<p>100%</p>
|
||||
<p>{{ resource.gpu.percent }}%</p>
|
||||
<span class="tips">过去24小时利用率</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -95,287 +97,119 @@
|
|||
<script>
|
||||
import List from '@/components/list'
|
||||
import Exhibition from '@/components/Exhibition'
|
||||
import * as echarts from 'echarts'
|
||||
import variables from '@/styles/variables.js'
|
||||
import BarChart from './components/barChart.vue'
|
||||
// import { getDataList0, getDataList1, getDataList2, getDataList3 } from '@/api/hpc/hpcManagement'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Exhibition,
|
||||
List
|
||||
List,
|
||||
BarChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [21, 44, 55, 77, 22, 32],
|
||||
data2: [22, 33, 22, 11, 44, 77],
|
||||
data3: [11, 22, 55, 44, 66, 33],
|
||||
xAxis: [],
|
||||
listData: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
|
||||
resource: {
|
||||
cpu: {
|
||||
cpu: 0,
|
||||
ram: 0,
|
||||
core: 0,
|
||||
percent: 100
|
||||
},
|
||||
gpu: {
|
||||
cpu: 0,
|
||||
ram: 0,
|
||||
core: 0,
|
||||
percent: 100
|
||||
}
|
||||
},
|
||||
domainList: [{
|
||||
name: '11',
|
||||
version: 11,
|
||||
num: 11,
|
||||
task: 11
|
||||
}],
|
||||
chooseRow: [],
|
||||
taskList: [],
|
||||
exhibitionArray: [
|
||||
{ name: '高性能计算域合计', src: 'hpc-1', value: '0' },
|
||||
{ name: '已适配异构软件栈', src: 'blockChainBrowser-4', value: '0' },
|
||||
{ name: '运行作业数量', src: 'blockChainBrowser-1', value: '0' }
|
||||
// { name: '连接调用接口数量', src: 'blockChainBrowser-5', value: '0' }
|
||||
],
|
||||
columns1: [
|
||||
{ prop: 'name', label: '超算域', formatter: (row) => { return <a onClick={() => this.viewDetail(row)}>{row.metadata.name}</a> } },
|
||||
{ prop: 'type', label: 'slurm版本', formatter: (row) => '自定义创建' },
|
||||
{ prop: 'internetAccess', label: '适配接口数量', formatter: (row) => '-' },
|
||||
{ prop: 'project', label: '运行作业', formatter: (row) => row.metadata.namespace }
|
||||
domainColumns: [
|
||||
{ prop: 'name', label: '超算域', formatter: (row) => { return <a onClick={() => this.viewDetail(row)}>{row.name}</a> } },
|
||||
{ prop: 'version', label: 'slurm版本' },
|
||||
{ prop: 'num', label: '适配接口数量' },
|
||||
{ prop: 'task', label: '运行作业' }
|
||||
],
|
||||
columns2: [
|
||||
{ prop: 'name', label: '作业名称', formatter: (row) => { return <a onClick={() => this.viewDetail(row)}>{row.metadata.name}</a> } },
|
||||
{ prop: 'project', label: '运行状态', formatter: (row) => row.metadata.namespace },
|
||||
{ prop: 'type', label: '作业详情', formatter: (row) => '自定义创建' }
|
||||
taskColumns: [
|
||||
{ prop: 'name', label: '作业名称' },
|
||||
{ prop: 'status', label: '运行状态' },
|
||||
{ prop: 'detail', label: '作业详情' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
clusterName() {
|
||||
return localStorage.getItem('clusterName')
|
||||
},
|
||||
jcceTheme() {
|
||||
return localStorage.getItem('jcceTheme')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
return new Promise(() => {
|
||||
this.drawChart()
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
drawChart() {
|
||||
const axisLabel = {
|
||||
textStyle: {
|
||||
color: variables[this.jcceTheme].barColor,
|
||||
fontSize: 12
|
||||
},
|
||||
interval: 'auto',
|
||||
formatter: '{value}'
|
||||
}
|
||||
const option = {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
const legend = ['调用异构技术栈', '调用接口数量', '运行作业']
|
||||
// 整体总负载
|
||||
const barChart = echarts.init(this.$refs.barChart)
|
||||
const loadOption = {
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
top: '15%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: legend,
|
||||
selectedMode: false, // 是否允许点击
|
||||
textStyle: {
|
||||
color: '#999999',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
...option,
|
||||
type: 'category',
|
||||
data: this.xAxis,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: -10,
|
||||
padding: [0, 0, 0, -40],
|
||||
margin: 14,
|
||||
textStyle: {
|
||||
color: variables[this.jcceTheme].barColor,
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '',
|
||||
...option,
|
||||
axisLabel
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: legend[0],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [17, 7],
|
||||
symbolOffset: [-20, -5],
|
||||
symbolPosition: 'end',
|
||||
z: 12,
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
color: '#3182CE',
|
||||
data: this.data
|
||||
},
|
||||
{
|
||||
name: legend[0],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [17, 6],
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
symbolOffset: [-20, 5],
|
||||
z: 12,
|
||||
color: 'rgba(49, 130, 206, 0.4)',
|
||||
data: this.data
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
name: legend[0],
|
||||
barWidth: '17',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: '#3182CE'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(49, 130, 206, 0.25)'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
},
|
||||
data: this.data
|
||||
},
|
||||
{
|
||||
name: legend[1],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [17, 10],
|
||||
symbolOffset: [0, -5],
|
||||
symbolPosition: 'end',
|
||||
z: 12,
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
color: '#30BFB7',
|
||||
data: this.data2
|
||||
},
|
||||
{
|
||||
name: legend[1],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [17, 7],
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
symbolOffset: [0, 6],
|
||||
z: 12,
|
||||
color: 'rgba(48, 191, 183, 0.4)',
|
||||
data: this.data2
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
name: legend[1],
|
||||
barWidth: '17',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: '#30C0B7'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(48, 191, 183, 0.25)'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
},
|
||||
data: this.data2
|
||||
},
|
||||
{
|
||||
name: legend[2],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [17, 10],
|
||||
symbolOffset: [20, -5],
|
||||
symbolPosition: 'end',
|
||||
z: 12,
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
color: '#00CCFF',
|
||||
data: this.data3
|
||||
},
|
||||
{
|
||||
name: legend[2],
|
||||
type: 'pictorialBar',
|
||||
symbolSize: [17, 7],
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
symbolOffset: [21, 6],
|
||||
z: 12,
|
||||
color: 'rgba(0,204,255,0.35)',
|
||||
data: this.data3
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
name: legend[2],
|
||||
barWidth: '17',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: '#00CCFF'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0,204,255,0.35)'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
},
|
||||
data: this.data3
|
||||
}
|
||||
]
|
||||
}
|
||||
barChart.setOption(loadOption)
|
||||
window.addEventListener('resize', function() {
|
||||
barChart.resize()
|
||||
})
|
||||
getData() {
|
||||
this.domainColumns = [{
|
||||
name: '11',
|
||||
status: 11,
|
||||
detail: 11
|
||||
}]
|
||||
|
||||
// Promise.all([
|
||||
// getDataList0(),
|
||||
// getDataList1(),
|
||||
// getDataList2()
|
||||
// ]).then(res => {
|
||||
// const topData = res[0]
|
||||
// this.exhibitionArray[0].value = topData.aaa
|
||||
// this.exhibitionArray[1].value = topData.bbb
|
||||
// this.exhibitionArray[2].value = topData.ccc
|
||||
|
||||
// const domainData = res[1].data
|
||||
// this.domainList = domainData || []
|
||||
this.clickLeft([{
|
||||
name: '11',
|
||||
version: 11,
|
||||
num: 11,
|
||||
task: 11
|
||||
}])
|
||||
|
||||
// const resourceData = res[1].data
|
||||
// this.resource = {
|
||||
// cpu: {
|
||||
// cpu: 0,
|
||||
// ram: 0,
|
||||
// core: 0,
|
||||
// percent: 100
|
||||
// },
|
||||
// gpu: {
|
||||
// cpu: 0,
|
||||
// ram: 0,
|
||||
// core: 0,
|
||||
// percent: 100
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
},
|
||||
clickLeft(row) {
|
||||
this.chooseRow = row
|
||||
// getDataList3(row.name).then(e => {
|
||||
// this.taskList = e?.data
|
||||
// })
|
||||
this.taskList = [{
|
||||
name: '11',
|
||||
status: 22,
|
||||
detail: 11
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -419,10 +253,6 @@ export default {
|
|||
.list-btns {
|
||||
display: none;
|
||||
}
|
||||
#barChart {
|
||||
width: 100%;
|
||||
height: 216px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue