<script src="/static/bootstrap/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/frame/echarts/echarts.min.js"></script>
<script>
$(function () {
//本周与上周各系统异常次数对比
var sys_bar_id = 'bar_echarts_sys'
var sys_bar_title = '近期服务异常统计对比'
var sys_bar_legend = {{sys_bar_legend|safe}};
var sys_x_data = {{sys_x_data|safe}};
var sys_bar_series = {{sys_bar_series|safe}};
echarts_bar(sys_bar_id, sys_bar_title, sys_bar_legend, sys_x_data, sys_bar_series);
//柱状图
function echarts_bar(id, title, legend, x_data, series) {
for (var i = 0; i < series.length; i++) {
series[i]['label'] = {
'normal': {
'show': true,
'position': 'top',
'distance': 7,
'align': 'center',
'verticalAlign': 'middle',
'rotate': 0,
'fontSize': 18,
}
}
}
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(id));
// 指定图表的配置项和数据
option = {
color: ['#006699', '#e5323e'],
title: {
text: title,
},
tooltip: {
trigger: 'axis'
},
legend: {
data: legend
},
grid: {
left: '2%',
right: '2%',
bottom: '5%',
top: '20%',
containLabel: true
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: {
type: 'category',
data: x_data,
},
yAxis: [
{
type: 'value',
},
],
series: series
};
;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
</script>
<!--上周与本周各系统异常次数统计柱状图对比-->
<div class="layui-col-md12" style="padding-top: 20px ">
<div class="layui-fluid">
<div class="layui-col-md12">
<div class="panel_style">
<div class="layui-row layui-col-space18">
<div class="card_style layui-col-md12">
<div class="card_style">
<div class="layui-card">
<div id="bar_echarts_sys" class="layui-card-body" style="width: 100%;height:380%;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
image.png
