You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2716 lines
76 KiB
2716 lines
76 KiB
//*****************统计分析图表
|
|
|
|
|
|
/*******被执法企业次数排行***********/
|
|
function rankCommpany(data) {
|
|
const names = data.map(item => item.enterprise_name);
|
|
const cnts = data.map(item => item.cnt);
|
|
var myChart = echarts.init(document.getElementById('rankCommpany'));
|
|
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
title : {
|
|
text: '',
|
|
subtext: ''
|
|
},
|
|
tooltip : {
|
|
trigger: 'axis'
|
|
},
|
|
|
|
grid: {
|
|
left: '5%',
|
|
right: '0',
|
|
bottom: '5%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
show : false,
|
|
feature : {
|
|
dataView : {show: true, readOnly: false},
|
|
magicType : {show: true, type: ['line', 'bar']},
|
|
restore : {show: true},
|
|
saveAsImage : {show: true}
|
|
}
|
|
},
|
|
|
|
calculable : true,
|
|
xAxis : [
|
|
{
|
|
type : 'category',
|
|
data : names,
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
rotate: 30,
|
|
textStyle: {
|
|
color: '#999',
|
|
fontSize: 12,
|
|
},
|
|
formatter: function (value) {
|
|
// 设定一个最大长度，例如10个字符
|
|
const maxLength = 6;
|
|
return value.length > maxLength ? value.slice(0, maxLength) + '...' : value;
|
|
}
|
|
},
|
|
}
|
|
],
|
|
yAxis : [
|
|
{
|
|
type : 'value',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'transparent',
|
|
}
|
|
},
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#79a3ca',
|
|
fontSize: 12,
|
|
}
|
|
},
|
|
}
|
|
],
|
|
series : [
|
|
|
|
{
|
|
name:'被执法企业次数',
|
|
type:'bar',
|
|
barWidth: '25%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data:cnts,
|
|
color:'#7ca9fb',
|
|
label: {
|
|
normal: {
|
|
show: true, //是否显示标签
|
|
position: 'outside', //标签的位置。
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
]
|
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
/*******执法单位执法数量排行***********/
|
|
function rankInspect(data) {
|
|
const names = data.map(item => item.bureau_dept_name);
|
|
const cnts = data.map(item => item.cnt);
|
|
var myChart = echarts.init(document.getElementById('rankInspect'));
|
|
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
title: {
|
|
text: '',
|
|
subtext: ''
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
|
|
grid: {
|
|
left: '5%',
|
|
right: '0',
|
|
bottom: '5%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
show: false,
|
|
feature: {
|
|
dataView: {show: true, readOnly: false},
|
|
magicType: {show: true, type: ['line', 'bar']},
|
|
restore: {show: true},
|
|
saveAsImage: {show: true}
|
|
}
|
|
},
|
|
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: names,
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
rotate: 30,
|
|
textStyle: {
|
|
color: '#999',
|
|
fontSize: 12,
|
|
},
|
|
formatter: function (value) {
|
|
// 设定一个最大长度，例如10个字符
|
|
const maxLength = 6;
|
|
return value.length > maxLength ? value.slice(0, maxLength) + '...' : value;
|
|
}
|
|
},
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'transparent',
|
|
}
|
|
},
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#79a3ca',
|
|
fontSize: 12,
|
|
}
|
|
},
|
|
}
|
|
],
|
|
series: [
|
|
|
|
{
|
|
name: '执法单位执法数量',
|
|
type: 'bar',
|
|
barWidth: '25%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data: cnts,
|
|
color: '#7ca9fb',
|
|
label: {
|
|
normal: {
|
|
show: true, //是否显示标签
|
|
position: 'outside', //标签的位置。
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
]
|
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
/*******被投诉单位次数排行***********/
|
|
function rankComplaint(data) {
|
|
const names = data.map(item => item.complaint_departments);
|
|
const cnts = data.map(item => item.cnt);
|
|
var myChart = echarts.init(document.getElementById('rankComplaint'));
|
|
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
title: {
|
|
text: '',
|
|
subtext: ''
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
|
|
grid: {
|
|
left: '5%',
|
|
right: '0',
|
|
bottom: '5%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
show: false,
|
|
feature: {
|
|
dataView: {show: true, readOnly: false},
|
|
magicType: {show: true, type: ['line', 'bar']},
|
|
restore: {show: true},
|
|
saveAsImage: {show: true}
|
|
}
|
|
},
|
|
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: names,
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
rotate: 30,
|
|
textStyle: {
|
|
color: '#999',
|
|
fontSize: 12,
|
|
},
|
|
formatter: function (value) {
|
|
// 设定一个最大长度，例如10个字符
|
|
const maxLength = 6;
|
|
return value.length > maxLength ? value.slice(0, maxLength) + '...' : value;
|
|
}
|
|
},
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'transparent',
|
|
}
|
|
},
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#79a3ca',
|
|
fontSize: 12,
|
|
}
|
|
},
|
|
}
|
|
],
|
|
series: [
|
|
|
|
{
|
|
name: '被投诉单位次数',
|
|
type: 'bar',
|
|
barWidth: '25%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data: cnts,
|
|
color: '#7ca9fb',
|
|
label: {
|
|
normal: {
|
|
show: true, //是否显示标签
|
|
position: 'outside', //标签的位置。
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
]
|
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
/*******委托执法数量及占比***********/
|
|
function rankPieAuto(data) {
|
|
var myChart = echarts.init(document.getElementById("rankPieAuto"));
|
|
|
|
// 圆环图各环节的颜色
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
//formatter: '{b}: {c} ({d}%)'
|
|
formatter:function(param){
|
|
return param.marker + " " + param.name + " : " + param.value +" ( " + param.percent + "% )";
|
|
}
|
|
|
|
},
|
|
series: [
|
|
{
|
|
name: '委托执法数量及占比',
|
|
type: 'pie',
|
|
radius: ['42%', '60%'],
|
|
avoidLabelOverlap: false,
|
|
padAngle: 3, // 间隔大小
|
|
itemStyle: {
|
|
borderRadius: 0,
|
|
borderColor: '#fff',
|
|
borderWidth: 1
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '14',
|
|
fontWeight: 'bold',
|
|
position:'outer',
|
|
alignTo:'labelLine'
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
formatter: "{b|{b}}" + "{b|:}" + " {a|{c}}" + "{d| ({d}%)}",
|
|
rich: {
|
|
a: {
|
|
color: 'rgba(0, 0, 0, .6)',
|
|
fontSize: 12,
|
|
//fontWeight: 550,
|
|
lineHeight: 14
|
|
},
|
|
b: {
|
|
color: 'rgba(0, 0, 0, .85)',
|
|
fontSize: 12,
|
|
lineHeight: 16
|
|
},
|
|
d: {
|
|
color: 'rgba(0, 0, 0, .6)',
|
|
fontSize: 12,
|
|
//lineHeight: 20
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: true,
|
|
length: 30,
|
|
length2: 50,
|
|
smooth: 0
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
labelLayout: {
|
|
hideOverlap: false
|
|
},
|
|
data: data,
|
|
//color: ['#0038bb', '#0047eb', '#1c60ff', '#3f78ff', '#6592ff', '#9ebafc'],
|
|
color: ['#5292fc','#91cc75','#fac858','#ef6667','#73c0df','#3ba272','#fc8352','#9b60b4','#9ebafc', '#0047eb'],
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
/*******执法类别数量及占比***********/
|
|
function countInspect(data) {
|
|
var myChart = echarts.init(document.getElementById("countInspect"));
|
|
|
|
// 圆环图各环节的颜色
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
//formatter: '{b}: {c} ({d}%)'
|
|
formatter:function(param){
|
|
return param.marker + " " + param.name + " : " + param.value +" ( " + param.percent + "% )";
|
|
}
|
|
|
|
},
|
|
series: [
|
|
{
|
|
name: '执法类别数量及占比',
|
|
type: 'pie',
|
|
radius: ['42%', '60%'],
|
|
avoidLabelOverlap: false,
|
|
padAngle: 3, // 间隔大小
|
|
itemStyle: {
|
|
borderRadius: 0,
|
|
borderColor: '#fff',
|
|
borderWidth: 1
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '14',
|
|
fontWeight: 'bold',
|
|
position:'outer',
|
|
alignTo:'labelLine'
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: true,
|
|
length: 30,
|
|
length2: 50,
|
|
smooth: 0
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
labelLayout: {
|
|
hideOverlap: false
|
|
},
|
|
data: data,
|
|
//color: ['#0038bb', '#0047eb', '#1c60ff', '#3f78ff', '#6592ff', '#9ebafc'],
|
|
color: ['#5292fc','#91cc75','#fac858','#ef6667','#73c0df','#3ba272','#fc8352','#9b60b4','#9ebafc', '#0047eb'],
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
/*******重点领域数量及占比***********/
|
|
function countCommpany(data) {
|
|
var myChart = echarts.init(document.getElementById("countCommpany"));
|
|
|
|
// 圆环图各环节的颜色
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
//formatter: '{b}: {c} ({d}%)'
|
|
formatter:function(param){
|
|
return param.marker + " " + param.name + " : " + param.value +" ( " + param.percent + "% )";
|
|
}
|
|
|
|
},
|
|
series: [
|
|
{
|
|
name: '重点领域数量及占比',
|
|
type: 'pie',
|
|
radius: ['42%', '60%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 0,
|
|
borderColor: '#fff',
|
|
borderWidth: 1
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '14',
|
|
fontWeight: 'bold',
|
|
position:'outer',
|
|
alignTo:'labelLine'
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: true,
|
|
length: 30,
|
|
length2: 10,
|
|
smooth: 0
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
labelLayout: {
|
|
hideOverlap: false
|
|
},
|
|
data: data,
|
|
//color: ['#0038bb', '#0047eb', '#1c60ff', '#3f78ff', '#6592ff', '#9ebafc'],
|
|
color: ['#5292fc','#91cc75','#fac858','#ef6667','#73c0df','#3ba272','#fc8352','#9b60b4','#9ebafc', '#0047eb'],
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
/** 投诉类别数量及占比 */
|
|
function countComplaint(data) {
|
|
var myChart = echarts.init(document.getElementById("countComplaint"));
|
|
|
|
// 圆环图各环节的颜色
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
//formatter: '{b}: {c} ({d}%)'
|
|
formatter:function(param){
|
|
return param.marker + " " + param.name + " : " + param.value +" ( " + param.percent + "% )";
|
|
}
|
|
|
|
},
|
|
series: [
|
|
{
|
|
name: '投诉类别数量及占比',
|
|
type: 'pie',
|
|
radius: ['42%', '60%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 0,
|
|
borderColor: '#fff',
|
|
borderWidth: 1
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '14',
|
|
fontWeight: 'bold',
|
|
position:'outer',
|
|
alignTo:'labelLine'
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: true,
|
|
length: 30,
|
|
length2: 10,
|
|
smooth: 0
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
labelLayout: {
|
|
hideOverlap: false
|
|
},
|
|
data: data,
|
|
//color: ['#0038bb', '#0047eb', '#1c60ff', '#3f78ff', '#6592ff', '#9ebafc'],
|
|
color: ['#5292fc','#91cc75','#fac858','#ef6667','#73c0df','#3ba272','#fc8352','#9b60b4','#9ebafc', '#0047eb'],
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
/** 投诉办结数量及占比 */
|
|
function lawCompLine(completed, uncompleted) {
|
|
var myChart = echarts.init(document.getElementById('complaintHandling'));
|
|
|
|
//初始化数据
|
|
var category = ['未办结', '已办结'];
|
|
var valueData = [uncompleted, completed];
|
|
var percentData = ['9.63%', '90.37%'];
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '15%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
show: false,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: category, splitLine: {show: false},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
offset: 10,
|
|
nameTextStyle: {
|
|
fontSize: 16,
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: 'rgba(255,255,255,.85)',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'bar',
|
|
data: valueData.map((value, index) => ({
|
|
value,
|
|
percent: percentData[index] // 将百分比数据作为自定义属性
|
|
})),
|
|
barWidth: 13,
|
|
barGap: 20,
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [10],
|
|
color: '#fef1f1',
|
|
},
|
|
smooth: true,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: [700, 0],
|
|
offset: [5, 0],
|
|
textStyle: {
|
|
color: '#666',
|
|
fontSize: 14
|
|
},
|
|
//formatter: '{c} ({d}%)',
|
|
formatter: function (params) {
|
|
return params.value + ' (' + params.data.percent + ')'; // 在标签中显示数值和百分比
|
|
}
|
|
},
|
|
},
|
|
itemStyle: {
|
|
emphasis: {
|
|
barBorderRadius: 8
|
|
}, normal: {
|
|
barBorderRadius: 8,
|
|
color: '#fea0a0',
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
/** 行政执法评价 */
|
|
function evaluateRate(high, mid, low, un) {
|
|
|
|
var myChart = echarts.init(document.getElementById('evaluateRate'));
|
|
//初始化数据
|
|
var total = un+low+mid+high;
|
|
var category = ['未评价', '不满意', '较满意', '满意' ];
|
|
var valueData = [un, low, mid, high];
|
|
var percentData = [toPercent(un,total), toPercent(low,total), toPercent(mid,total), toPercent(mid,total)];
|
|
/*var total = data.reduce((sum, value) => sum + value, 0);
|
|
var dataPercentage = data.map(value => (value / total * 100).toFixed(2));*/
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
top: '10%',
|
|
left: '3%',
|
|
right: '15%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
show: false,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: category,splitLine: {show: false},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
offset: 10,
|
|
nameTextStyle: {
|
|
fontSize: 16,
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: 'rgba(255,255,255,.85)',
|
|
fontSize : 14
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'bar',
|
|
data: valueData.map((value, index) => ({value,
|
|
percent: percentData[index] // 将百分比数据作为自定义属性
|
|
})),
|
|
barWidth: 12,
|
|
barGap: 15,
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [10],
|
|
color: '#e9f0fc',
|
|
},
|
|
smooth: true,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: [700, 0],
|
|
offset: [5, 0],
|
|
textStyle: {
|
|
color: '#666',
|
|
fontSize: 14
|
|
},
|
|
|
|
//formatter: '{c} ({d}%)',
|
|
formatter: function(params) {
|
|
return params.value + ' (' + params.data.percent + ')'; // 在标签中显示数值和百分比
|
|
}
|
|
},
|
|
},
|
|
itemStyle: {
|
|
emphasis: {
|
|
barBorderRadius: 8
|
|
},normal: {
|
|
barBorderRadius: 8,
|
|
color: '#97bbfd',
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
/** 各区综合数据 */
|
|
function countDistrict(DISTRICT, singleLaw, unionLaw, enfEnt, entEeduction, compAddress, entAddress) {
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('countDistrict'));
|
|
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
title : {
|
|
text: '',
|
|
subtext: ''
|
|
},
|
|
tooltip : {
|
|
trigger: 'axis',
|
|
/*formatter: function(params) {
|
|
// 计算当前柱子的占比
|
|
var percent = (params[0].value / total * 100).toFixed(2) + '%';
|
|
// 返回自定义的 tooltip 内容
|
|
return params[0].name + '<br/>' +
|
|
'数量: ' + params[0].value + '<br/>' +
|
|
'占比: ' + percent;
|
|
}*/
|
|
/*formatter: function (params) {
|
|
// 计算百分比
|
|
var total = params[0].data + params[1].data;
|
|
var percent1 = (params[0].data / total * 100).toFixed(2) + '%';
|
|
var percent2 = (params[1].data / total * 100).toFixed(2) + '%';
|
|
|
|
// 返回自定义的tooltip内容
|
|
return params[0].name + '<br/>' +
|
|
params[0].seriesName + ': ' + params[0].data + ' (' + percent1 + ')' + '<br/>' +
|
|
params[1].seriesName + ': ' + params[1].data + ' (' + percent2 + ')';
|
|
}*/
|
|
},
|
|
legend: {
|
|
top: 0,
|
|
right: 0,
|
|
padding: 5,
|
|
itemGap: 20,
|
|
itemWidth: 10,
|
|
itemHeight: 10,
|
|
data:['单独执法','联合执法','被执法企业','入企压减率','涉企投诉','企业数量']
|
|
},
|
|
grid: {
|
|
left: '0',
|
|
right: '0',
|
|
bottom: '0',
|
|
top: '20%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
show : false,
|
|
feature : {
|
|
dataView : {show: true, readOnly: false},
|
|
magicType : {show: true, type: ['line', 'bar']},
|
|
restore : {show: true},
|
|
saveAsImage : {show: true}
|
|
}
|
|
},
|
|
|
|
calculable : true,
|
|
xAxis : [
|
|
{
|
|
type : 'category',
|
|
data : DISTRICT,
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
rotate: 0,
|
|
textStyle: {
|
|
color: '#999',
|
|
fontSize: 12,
|
|
}
|
|
},
|
|
}
|
|
],
|
|
yAxis : [
|
|
{
|
|
type : 'value',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'transparent',
|
|
}
|
|
},
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#79a3ca',
|
|
fontSize: 12,
|
|
}
|
|
},
|
|
}
|
|
],
|
|
series : [
|
|
{
|
|
name:'单独执法',
|
|
type:'bar',
|
|
barWidth: '10%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data:singleLaw,
|
|
color:'#7baaf4',
|
|
},
|
|
{
|
|
name:'联合执法',
|
|
type:'bar',
|
|
barWidth: '10%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data:unionLaw,
|
|
color:'#82dfe6',
|
|
},
|
|
{
|
|
name:'被执法企业',
|
|
type:'bar',
|
|
barWidth: '10%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data:enfEnt,
|
|
color:'#a39ddf',
|
|
},
|
|
{
|
|
name:'入企压减率',
|
|
type:'bar',
|
|
barWidth: '10%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data:entEeduction,
|
|
color:'#75c99f',
|
|
},
|
|
{
|
|
name:'涉企投诉',
|
|
type:'bar',
|
|
barWidth: '10%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [10, 10, 0, 0]
|
|
},
|
|
data:compAddress,
|
|
color:'#fc9797',
|
|
itemStyle: {
|
|
borderRadius: [10, 10, 0, 0]
|
|
}
|
|
},
|
|
{
|
|
name:'企业数量',
|
|
type:'bar',
|
|
barWidth: '10%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data:entAddress,
|
|
color:'#a3d7f8',
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
|
|
|
|
}
|
|
|
|
function toPercent(a, b) {
|
|
// 除数为 0 或 NaN → 强制返回 0.00%
|
|
if (!b || isNaN(a) || isNaN(b)) return "0.00%";
|
|
|
|
const result = a / b;
|
|
if (isNaN(result) || !isFinite(result)) return "0.00%";
|
|
|
|
return (result * 100).toFixed(2) + "%";
|
|
}
|
|
/*******联合执法单位排行***********/
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('rankUnite'));
|
|
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
title : {
|
|
text: '',
|
|
subtext: ''
|
|
},
|
|
tooltip : {
|
|
trigger: 'axis'
|
|
},
|
|
|
|
grid: {
|
|
left: '5%',
|
|
right: '0',
|
|
bottom: '5%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
show : false,
|
|
feature : {
|
|
dataView : {show: true, readOnly: false},
|
|
magicType : {show: true, type: ['line', 'bar']},
|
|
restore : {show: true},
|
|
saveAsImage : {show: true}
|
|
}
|
|
},
|
|
|
|
calculable : true,
|
|
xAxis : [
|
|
{
|
|
type : 'category',
|
|
data : ['深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局'],
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
rotate: 30,
|
|
textStyle: {
|
|
color: '#999',
|
|
fontSize: 12,
|
|
},
|
|
formatter: function (value) {
|
|
// 设定一个最大长度，例如10个字符
|
|
const maxLength = 6;
|
|
return value.length > maxLength ? value.slice(0, maxLength) + '...' : value;
|
|
}
|
|
},
|
|
}
|
|
],
|
|
yAxis : [
|
|
{
|
|
type : 'value',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'transparent',
|
|
}
|
|
},
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#79a3ca',
|
|
fontSize: 12,
|
|
}
|
|
},
|
|
}
|
|
],
|
|
series : [
|
|
|
|
{
|
|
name:'联合执法单位排行',
|
|
type:'bar',
|
|
barWidth: '25%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data:[13, 12, 11, 9, 8, 7, 6, 5, 5, 4],
|
|
color:'#7ca9fb',
|
|
label: {
|
|
normal: {
|
|
show: true, //是否显示标签
|
|
position: 'outside', //标签的位置。
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
/*******执法人员涉企执法数量排行***********/
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('rankOfficer'));
|
|
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
title : {
|
|
text: '',
|
|
subtext: ''
|
|
},
|
|
tooltip : {
|
|
trigger: 'axis'
|
|
},
|
|
|
|
grid: {
|
|
left: '5%',
|
|
right: '0',
|
|
bottom: '5%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
show : false,
|
|
feature : {
|
|
dataView : {show: true, readOnly: false},
|
|
magicType : {show: true, type: ['line', 'bar']},
|
|
restore : {show: true},
|
|
saveAsImage : {show: true}
|
|
}
|
|
},
|
|
|
|
calculable : true,
|
|
xAxis : [
|
|
{
|
|
type : 'category',
|
|
data : ['张文藜','朱学东','黄明亮','刘得平','周华军','王军利','张江亮','郑学军','李方意','李小华'],
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
rotate: 30,
|
|
textStyle: {
|
|
color: '#999',
|
|
fontSize: 12,
|
|
},
|
|
formatter: function (value) {
|
|
// 设定一个最大长度，例如10个字符
|
|
const maxLength = 6;
|
|
return value.length > maxLength ? value.slice(0, maxLength) + '...' : value;
|
|
}
|
|
},
|
|
}
|
|
],
|
|
yAxis : [
|
|
{
|
|
type : 'value',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'transparent',
|
|
}
|
|
},
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#79a3ca',
|
|
fontSize: 12,
|
|
}
|
|
},
|
|
}
|
|
],
|
|
series : [
|
|
|
|
{
|
|
name:'执法人员涉企执法数量',
|
|
type:'bar',
|
|
barWidth: '25%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data:[13, 12, 11, 9, 8, 7, 6, 5, 5, 4],
|
|
color:'#7ca9fb',
|
|
label: {
|
|
normal: {
|
|
show: true, //是否显示标签
|
|
position: 'outside', //标签的位置。
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
|
|
|
|
|
|
/*******入企压减率排行***********/
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('rankReduction'));
|
|
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
title : {
|
|
text: '',
|
|
subtext: ''
|
|
},
|
|
tooltip : {
|
|
trigger: 'axis',
|
|
},
|
|
|
|
grid: {
|
|
left: '5%',
|
|
right: '0',
|
|
bottom: '5%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
show : false,
|
|
feature : {
|
|
dataView : {show: true, readOnly: false},
|
|
magicType : {show: true, type: ['line', 'bar']},
|
|
restore : {show: true},
|
|
saveAsImage : {show: true}
|
|
}
|
|
},
|
|
|
|
calculable : true,
|
|
xAxis : [
|
|
{
|
|
type : 'category',
|
|
data : ['深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局'],
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
rotate: 30,
|
|
textStyle: {
|
|
color: '#999',
|
|
fontSize: 12,
|
|
},
|
|
formatter: function (value) {
|
|
// 设定一个最大长度，例如10个字符
|
|
const maxLength = 6;
|
|
return value.length > maxLength ? value.slice(0, maxLength) + '...' : value;
|
|
}
|
|
},
|
|
}
|
|
],
|
|
yAxis : [
|
|
{
|
|
type : 'value',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'transparent',
|
|
}
|
|
},
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#79a3ca',
|
|
fontSize: 12,
|
|
}
|
|
},
|
|
}
|
|
],
|
|
series : [
|
|
|
|
{
|
|
name:'入企压减率',
|
|
type:'bar',
|
|
barWidth: '25%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data:[13, 12, 11, 9, 8, 7, 6, 5, 5, 4],
|
|
color:'#7ca9fb',
|
|
label: {
|
|
normal: {
|
|
show: true, //是否显示标签
|
|
position: 'outside', //标签的位置。
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
|
|
|
|
/*******职权使用率排行***********/
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('powerUse'));
|
|
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
title : {
|
|
text: '',
|
|
subtext: ''
|
|
},
|
|
tooltip : {
|
|
trigger: 'axis'
|
|
},
|
|
|
|
grid: {
|
|
left: '5%',
|
|
right: '0',
|
|
bottom: '5%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
show : false,
|
|
feature : {
|
|
dataView : {show: true, readOnly: false},
|
|
magicType : {show: true, type: ['line', 'bar']},
|
|
restore : {show: true},
|
|
saveAsImage : {show: true}
|
|
}
|
|
},
|
|
|
|
calculable : true,
|
|
xAxis : [
|
|
{
|
|
type : 'category',
|
|
data : ['深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局'],
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
rotate: 30,
|
|
textStyle: {
|
|
color: '#999',
|
|
fontSize: 12,
|
|
},
|
|
formatter: function (value) {
|
|
// 设定一个最大长度，例如10个字符
|
|
const maxLength = 6;
|
|
return value.length > maxLength ? value.slice(0, maxLength) + '...' : value;
|
|
}
|
|
},
|
|
}
|
|
],
|
|
yAxis : [
|
|
{
|
|
type : 'value',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'transparent',
|
|
}
|
|
},
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#79a3ca',
|
|
fontSize: 12,
|
|
}
|
|
},
|
|
}
|
|
],
|
|
series : [
|
|
|
|
{
|
|
name:'职权使用率',
|
|
type:'bar',
|
|
barWidth: '25%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data:[13, 12, 11, 9, 8, 7, 6, 5, 5, 4],
|
|
color:'#7ca9fb',
|
|
label: {
|
|
normal: {
|
|
show: true, //是否显示标签
|
|
position: 'outside', //标签的位置。
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
|
|
|
|
|
|
/*******职权休眠率排行***********/
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('powerSleep'));
|
|
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
title : {
|
|
text: '',
|
|
subtext: ''
|
|
},
|
|
tooltip : {
|
|
trigger: 'axis'
|
|
},
|
|
|
|
grid: {
|
|
left: '5%',
|
|
right: '0',
|
|
bottom: '5%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
show : false,
|
|
feature : {
|
|
dataView : {show: true, readOnly: false},
|
|
magicType : {show: true, type: ['line', 'bar']},
|
|
restore : {show: true},
|
|
saveAsImage : {show: true}
|
|
}
|
|
},
|
|
|
|
calculable : true,
|
|
xAxis : [
|
|
{
|
|
type : 'category',
|
|
data : ['深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局'],
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
rotate: 30,
|
|
textStyle: {
|
|
color: '#999',
|
|
fontSize: 12,
|
|
},
|
|
formatter: function (value) {
|
|
// 设定一个最大长度，例如10个字符
|
|
const maxLength = 6;
|
|
return value.length > maxLength ? value.slice(0, maxLength) + '...' : value;
|
|
}
|
|
},
|
|
}
|
|
],
|
|
yAxis : [
|
|
{
|
|
type : 'value',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'transparent',
|
|
}
|
|
},
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#79a3ca',
|
|
fontSize: 12,
|
|
}
|
|
},
|
|
}
|
|
],
|
|
series : [
|
|
|
|
{
|
|
name:'职权休眠率',
|
|
type:'bar',
|
|
barWidth: '25%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data:[13, 12, 11, 9, 8, 7, 6, 5, 5, 4],
|
|
color:'#7ca9fb',
|
|
label: {
|
|
normal: {
|
|
show: true, //是否显示标签
|
|
position: 'outside', //标签的位置。
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
/*******职权使用次数排行***********/
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('powerNumber'));
|
|
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
title : {
|
|
text: '',
|
|
subtext: ''
|
|
},
|
|
tooltip : {
|
|
trigger: 'axis'
|
|
},
|
|
|
|
grid: {
|
|
left: '5%',
|
|
right: '0',
|
|
bottom: '5%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
show : false,
|
|
feature : {
|
|
dataView : {show: true, readOnly: false},
|
|
magicType : {show: true, type: ['line', 'bar']},
|
|
restore : {show: true},
|
|
saveAsImage : {show: true}
|
|
}
|
|
},
|
|
|
|
calculable : true,
|
|
xAxis : [
|
|
{
|
|
type : 'category',
|
|
data : ['深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局'],
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
rotate: 30,
|
|
textStyle: {
|
|
color: '#999',
|
|
fontSize: 12,
|
|
},
|
|
formatter: function (value) {
|
|
// 设定一个最大长度，例如10个字符
|
|
const maxLength = 6;
|
|
return value.length > maxLength ? value.slice(0, maxLength) + '...' : value;
|
|
}
|
|
},
|
|
}
|
|
],
|
|
yAxis : [
|
|
{
|
|
type : 'value',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'transparent',
|
|
}
|
|
},
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#79a3ca',
|
|
fontSize: 12,
|
|
}
|
|
},
|
|
}
|
|
],
|
|
series : [
|
|
|
|
{
|
|
name:'职权使用次数',
|
|
type:'bar',
|
|
barWidth: '25%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data:[13, 12, 11, 9, 8, 7, 6, 5, 5, 4],
|
|
color:'#7ca9fb',
|
|
label: {
|
|
normal: {
|
|
show: true, //是否显示标签
|
|
position: 'outside', //标签的位置。
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*******职权被投诉次数排行***********/
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('powerComplaint'));
|
|
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
title : {
|
|
text: '',
|
|
subtext: ''
|
|
},
|
|
tooltip : {
|
|
trigger: 'axis'
|
|
},
|
|
|
|
grid: {
|
|
left: '5%',
|
|
right: '0',
|
|
bottom: '5%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
show : false,
|
|
feature : {
|
|
dataView : {show: true, readOnly: false},
|
|
magicType : {show: true, type: ['line', 'bar']},
|
|
restore : {show: true},
|
|
saveAsImage : {show: true}
|
|
}
|
|
},
|
|
|
|
calculable : true,
|
|
xAxis : [
|
|
{
|
|
type : 'category',
|
|
data : ['深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局','深圳市司法局'],
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
rotate: 30,
|
|
textStyle: {
|
|
color: '#999',
|
|
fontSize: 12,
|
|
},
|
|
formatter: function (value) {
|
|
// 设定一个最大长度，例如10个字符
|
|
const maxLength = 6;
|
|
return value.length > maxLength ? value.slice(0, maxLength) + '...' : value;
|
|
}
|
|
},
|
|
}
|
|
],
|
|
yAxis : [
|
|
{
|
|
type : 'value',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'transparent',
|
|
}
|
|
},
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#79a3ca',
|
|
fontSize: 12,
|
|
}
|
|
},
|
|
}
|
|
],
|
|
series : [
|
|
|
|
{
|
|
name:'职权被投诉次数',
|
|
type:'bar',
|
|
barWidth: '25%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data:[13, 12, 11, 9, 8, 7, 6, 5, 5, 4],
|
|
color:'#7ca9fb',
|
|
label: {
|
|
normal: {
|
|
show: true, //是否显示标签
|
|
position: 'outside', //标签的位置。
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
|
|
|
|
|
|
//*****************职权使用率
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('powerUseRate'));
|
|
var xData = ['投诉率', '使用率']
|
|
var yData = ['25', '62']
|
|
var colorList = [ '#fc7d8f', '#4e97fe', '#fed100','#ababac']
|
|
var visualMapPiecesData = []
|
|
// visualMap: {
|
|
// pieces: [
|
|
// { value: 123, label: '123（自定义特殊颜色）', color: 'grey' }
|
|
// ]
|
|
// }
|
|
for (var i = 0; i < xData.length; i++) {
|
|
visualMapPiecesData.push({
|
|
value: yData[i],
|
|
label: xData[i],
|
|
color: colorList[i]
|
|
})
|
|
}
|
|
var option = {
|
|
grid: {
|
|
// top: 20,
|
|
bottom:0,
|
|
left:'25%',
|
|
right:0,
|
|
containLabel: true
|
|
},
|
|
title:{
|
|
top:'35%',
|
|
left:'center',
|
|
text:'总数',
|
|
textStyle:{
|
|
color:'#666',
|
|
fontSize:14,
|
|
fontWeight:500,
|
|
},
|
|
subtext:"1375",
|
|
subtextStyle:{
|
|
color:'#598dff',
|
|
fontSize:24,
|
|
height:36,
|
|
verticalAlign:'top',
|
|
fontWeight:600,
|
|
},
|
|
itemGap: 5
|
|
},
|
|
legend: {
|
|
bottom: 'center',
|
|
left: '1%',
|
|
itemGap: 20,
|
|
orient: 'vercital'
|
|
},
|
|
visualMap: {
|
|
top: 40,
|
|
x: 'left',
|
|
orient: 'vertical',
|
|
textStyle: {
|
|
color: '#000'
|
|
},
|
|
pieces: visualMapPiecesData,
|
|
outOfRange: {
|
|
color: '#999'
|
|
}
|
|
},
|
|
color:['#0091FF','#EC4899','#14CC8F'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
textStyle:{
|
|
fontWeight:'bold',
|
|
color:'#606266'
|
|
}
|
|
},
|
|
polar: { //极坐标系
|
|
radius: ['42%', '80%'], //极坐标系的半径，数组的第一项是内半径，第二项是外半径
|
|
},
|
|
angleAxis:{
|
|
show:false,
|
|
startAngle:90,
|
|
max:100,
|
|
// end
|
|
},
|
|
radiusAxis: {
|
|
type: 'category',
|
|
data: xData,
|
|
z: 100,
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLine:{
|
|
show:false,
|
|
},
|
|
axisTick:{
|
|
show:false
|
|
},
|
|
axisLabel:{
|
|
show:false,
|
|
}
|
|
},
|
|
series:[
|
|
{
|
|
type: 'bar',
|
|
roundCap: true,
|
|
coordinateSystem: 'polar',
|
|
barWidth: 20,
|
|
barGap: '60%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
color: '#f0f0f0',
|
|
},
|
|
itemStyle:{
|
|
normal: {
|
|
//柱形图圆角，初始化效果
|
|
barBorderRadius:[10, 10, 10, 10],
|
|
label: {
|
|
show: false,//是否展示
|
|
position: 'top',
|
|
formatter: '{b}: {c}',
|
|
textStyle: {
|
|
fontSize : '12',
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data: [
|
|
{
|
|
value:25,
|
|
itemStyle:{
|
|
color: '#fc7d8f',
|
|
}
|
|
},
|
|
{
|
|
value:62,
|
|
itemStyle:{
|
|
color: '#7ca9fb',
|
|
}
|
|
},
|
|
],
|
|
coordinateSystem: 'polar', //使用极坐标系
|
|
barWidth:12,
|
|
barGap:10,
|
|
// 设置axisLabel显示
|
|
axisLabel: {
|
|
show: false // 显示坐标轴的标签
|
|
},
|
|
|
|
}
|
|
]
|
|
}
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
|
|
|
|
|
|
/*******综合数据***********/
|
|
|
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('countDistrict'));
|
|
|
|
// 指定图表的配置项和数据
|
|
var option = {
|
|
title : {
|
|
text: '',
|
|
subtext: ''
|
|
},
|
|
tooltip : {
|
|
trigger: 'axis',
|
|
/*formatter: function(params) {
|
|
// 计算当前柱子的占比
|
|
var percent = (params[0].value / total * 100).toFixed(2) + '%';
|
|
// 返回自定义的 tooltip 内容
|
|
return params[0].name + '<br/>' +
|
|
'数量: ' + params[0].value + '<br/>' +
|
|
'占比: ' + percent;
|
|
}*/
|
|
/*formatter: function (params) {
|
|
// 计算百分比
|
|
var total = params[0].data + params[1].data;
|
|
var percent1 = (params[0].data / total * 100).toFixed(2) + '%';
|
|
var percent2 = (params[1].data / total * 100).toFixed(2) + '%';
|
|
|
|
// 返回自定义的tooltip内容
|
|
return params[0].name + '<br/>' +
|
|
params[0].seriesName + ': ' + params[0].data + ' (' + percent1 + ')' + '<br/>' +
|
|
params[1].seriesName + ': ' + params[1].data + ' (' + percent2 + ')';
|
|
}*/
|
|
},
|
|
legend: {
|
|
top: 0,
|
|
right: 0,
|
|
padding: 5,
|
|
itemGap: 20,
|
|
itemWidth: 10,
|
|
itemHeight: 10,
|
|
data:['单独执法','联合执法','被执法企业','入企压减率','涉企投诉','企业数量']
|
|
},
|
|
grid: {
|
|
left: '0',
|
|
right: '0',
|
|
bottom: '0',
|
|
top: '20%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
show : false,
|
|
feature : {
|
|
dataView : {show: true, readOnly: false},
|
|
magicType : {show: true, type: ['line', 'bar']},
|
|
restore : {show: true},
|
|
saveAsImage : {show: true}
|
|
}
|
|
},
|
|
|
|
calculable : true,
|
|
xAxis : [
|
|
{
|
|
type : 'category',
|
|
data : ['福田区','罗湖区','南山区','盐田区','宝安区','龙岗区','龙华区','坪山区','光明区','大鹏新区','深汕特别合作区'],
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
rotate: 0,
|
|
textStyle: {
|
|
color: '#999',
|
|
fontSize: 12,
|
|
}
|
|
},
|
|
}
|
|
],
|
|
yAxis : [
|
|
{
|
|
type : 'value',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'transparent',
|
|
}
|
|
},
|
|
axisLine: {show: false},
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#79a3ca',
|
|
fontSize: 12,
|
|
}
|
|
},
|
|
}
|
|
],
|
|
series : [
|
|
|
|
{
|
|
name:'单独执法',
|
|
type:'bar',
|
|
barWidth: '10%',
|
|
showBackground: true,
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data:[13078, 13980, 15687, 6093, 12092, 16073, 9087,7254,8088,3021,4596],
|
|
color:'#7baaf4',
|
|
label: {
|
|
normal: {
|
|
show: true, //是否显示标签
|
|
position: 'outside', //标签的位置。
|
|
}
|
|
},
|
|
},
|
|
{
|
|
name:'联合执法',
|
|
type:'bar',
|
|
barWidth: '10%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data:[13078, 13980, 15687, 6093, 12092, 16073, 9087,7254,8088,3021,4596],
|
|
color:'#82dfe6',
|
|
label: {
|
|
normal: {
|
|
show: true, //是否显示标签
|
|
position: 'outside', //标签的位置。
|
|
}
|
|
},
|
|
},
|
|
{
|
|
name:'被执法企业',
|
|
type:'bar',
|
|
barWidth: '10%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data:[13078, 13980, 15687, 6093, 12092, 16073, 9087,7254,8088,3021,4596],
|
|
color:'#a39ddf',
|
|
label: {
|
|
normal: {
|
|
show: true, //是否显示标签
|
|
position: 'outside', //标签的位置。
|
|
}
|
|
},
|
|
},
|
|
{
|
|
name:'入企压减率',
|
|
type:'bar',
|
|
barWidth: '10%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data:[1380, 1309, 1056, 930, 1800, 1660, 1900, 1272, 1160, 1030, 1745],
|
|
color:'#75c99f',
|
|
label: {
|
|
normal: {
|
|
show: true, //是否显示标签
|
|
position: 'outside', //标签的位置。
|
|
}
|
|
},
|
|
},
|
|
{
|
|
name:'涉企投诉',
|
|
type:'bar',
|
|
barWidth: '10%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data:[1378, 1380, 1587, 603, 1092, 1673, 987,754,808,301,496],
|
|
color:'#fc9797',
|
|
label: {
|
|
normal: {
|
|
show: true, //是否显示标签
|
|
position: 'outside', //标签的位置。
|
|
}
|
|
},
|
|
},
|
|
{
|
|
name:'企业数量',
|
|
type:'bar',
|
|
barWidth: '10%',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [5, 5, 0, 0]
|
|
},
|
|
data:[13078, 13980, 15687, 6093, 12092, 16073, 9087,7254,8088,3021,4596],
|
|
color:'#a3d7f8',
|
|
label: {
|
|
normal: {
|
|
show: true, //是否显示标签
|
|
position: 'outside', //标签的位置。
|
|
}
|
|
},
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
|
|
|
|
/*******执法类别数量及占比***********/
|
|
|
|
var myChart = echarts.init(document.getElementById("countInspect"));
|
|
|
|
// 圆环图各环节的颜色
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
//formatter: '{b}: {c} ({d}%)'
|
|
formatter:function(param){
|
|
return param.marker + " " + param.name + " : " + param.value +" ( " + param.percent + "% )";
|
|
}
|
|
|
|
},
|
|
series: [
|
|
{
|
|
name: '执法类别数量及占比',
|
|
type: 'pie',
|
|
radius: ['42%', '60%'],
|
|
avoidLabelOverlap: false,
|
|
padAngle: 3, // 间隔大小
|
|
itemStyle: {
|
|
borderRadius: 0,
|
|
borderColor: '#fff',
|
|
borderWidth: 1
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '14',
|
|
fontWeight: 'bold',
|
|
position:'outer',
|
|
alignTo:'labelLine'
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
formatter: "{b|{b}}" + "{b|:}" + " {a|{c}}" + "{d| ({d}%)}",
|
|
rich: {
|
|
a: {
|
|
color: 'rgba(0, 0, 0, .6)',
|
|
fontSize: 12,
|
|
//fontWeight: 550,
|
|
lineHeight: 14
|
|
},
|
|
b: {
|
|
color: 'rgba(0, 0, 0, .85)',
|
|
fontSize: 12,
|
|
lineHeight: 16
|
|
},
|
|
d: {
|
|
color: 'rgba(0, 0, 0, .6)',
|
|
fontSize: 12,
|
|
//lineHeight: 20
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: true,
|
|
length: 30,
|
|
length2: 50,
|
|
smooth: 0
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
labelLayout: {
|
|
hideOverlap: false
|
|
},
|
|
data: [
|
|
{ value: 1048, name: '行政检查'},
|
|
{ value: 580, name: '行政处罚'},
|
|
{ value: 484, name: '行政许可'},
|
|
{ value: 300, name: '行政强制'},
|
|
{ value: 200, name: '行政征收'},
|
|
{ value: 1048, name: '行政给付'},
|
|
{ value: 580, name: '行政确认'},
|
|
{ value: 484, name: '行政登记'},
|
|
{ value: 300, name: '行政裁决'},
|
|
{ value: 200, name: '文书送达'},
|
|
],
|
|
//color: ['#0038bb', '#0047eb', '#1c60ff', '#3f78ff', '#6592ff', '#9ebafc'],
|
|
color: ['#5292fc','#91cc75','#fac858','#ef6667','#73c0df','#3ba272','#fc8352','#9b60b4','#9ebafc', '#0047eb'],
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
|
|
|
|
|
|
/*******重点领域数量及占比***********/
|
|
|
|
var myChart = echarts.init(document.getElementById("countCommpany"));
|
|
|
|
// 圆环图各环节的颜色
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
//formatter: '{b}: {c} ({d}%)'
|
|
formatter:function(param){
|
|
return param.marker + " " + param.name + " : " + param.value +" ( " + param.percent + "% )";
|
|
}
|
|
|
|
},
|
|
series: [
|
|
{
|
|
name: '重点领域类别数量及占比',
|
|
type: 'pie',
|
|
radius: ['42%', '60%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 0,
|
|
borderColor: '#fff',
|
|
borderWidth: 1
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '14',
|
|
fontWeight: 'bold',
|
|
position:'outer',
|
|
alignTo:'labelLine'
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
formatter: "{b|{b}}" + "{b|:}" + " {a|{c}}" + "{d| ({d}%)}",
|
|
rich: {
|
|
a: {
|
|
color: 'rgba(0, 0, 0, .6)',
|
|
fontSize: 12,
|
|
//fontWeight: 550,
|
|
lineHeight: 14
|
|
},
|
|
b: {
|
|
color: 'rgba(0, 0, 0, .85)',
|
|
fontSize: 12,
|
|
lineHeight: 16
|
|
},
|
|
d: {
|
|
color: 'rgba(0, 0, 0, .6)',
|
|
fontSize: 12,
|
|
//lineHeight: 20
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: true,
|
|
length: 30,
|
|
length2: 10,
|
|
smooth: 0
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
labelLayout: {
|
|
hideOverlap: false
|
|
},
|
|
|
|
data: [
|
|
{ value: 1048, name: '市场监督管理' },
|
|
{ value: 735, name: '规划和自然资源' },
|
|
{ value: 580, name: '生态环境' },
|
|
{ value: 484, name: '交通运输' },
|
|
{ value: 300, name: '卫生健康' },
|
|
{ value: 200, name: '应急管理' },
|
|
{ value: 484, name: '住房和建设' },
|
|
{ value: 300, name: '消防救援' },
|
|
{ value: 200, name: '公安' }
|
|
],
|
|
//color: ['#0038bb', '#0047eb', '#1c60ff', '#3f78ff', '#6592ff', '#9ebafc'],
|
|
color: ['#5292fc','#91cc75','#fac858','#ef6667','#73c0df','#3ba272','#fc8352','#9b60b4','#9ebafc'],
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
|
|
|
|
|
|
/*******投诉类别数量及占比***********/
|
|
|
|
var myChart = echarts.init(document.getElementById("countComplaint"));
|
|
|
|
// 圆环图各环节的颜色
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
//formatter: '{b}: {c} ({d}%)'
|
|
formatter:function(param){
|
|
return param.marker + " " + param.name + " : " + param.value +" ( " + param.percent + "% )";
|
|
}
|
|
|
|
},
|
|
series: [
|
|
{
|
|
name: '投诉类别数量及占比',
|
|
type: 'pie',
|
|
radius: ['42%', '60%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 0,
|
|
borderColor: '#fff',
|
|
borderWidth: 1
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '14',
|
|
fontWeight: 'bold',
|
|
position:'outer',
|
|
alignTo:'labelLine'
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
formatter: "{b|{b}}" + "{b|:}" + " {a|{c}}" + "{d| ({d}%)}",
|
|
rich: {
|
|
a: {
|
|
color: 'rgba(0, 0, 0, .6)',
|
|
fontSize: 12,
|
|
//fontWeight: 550,
|
|
lineHeight: 14
|
|
},
|
|
b: {
|
|
color: 'rgba(0, 0, 0, .85)',
|
|
fontSize: 12,
|
|
lineHeight: 16
|
|
},
|
|
d: {
|
|
color: 'rgba(0, 0, 0, .6)',
|
|
fontSize: 12,
|
|
//lineHeight: 20
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: true,
|
|
length: 30,
|
|
length2: 10,
|
|
smooth: 0
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
labelLayout: {
|
|
hideOverlap: false
|
|
},
|
|
|
|
data: [
|
|
{ value: 748, name: '违规执法' },
|
|
{ value: 35, name: '违法执法' },
|
|
//{ value: 180, name: '不文明执法' },
|
|
//{ value: 484, name: '选择性执法' },
|
|
{ value: 102, name: '入企不扫码' },
|
|
{ value: 107, name: '其他' }
|
|
],
|
|
//color: ['#0038bb', '#0047eb', '#1c60ff', '#3f78ff', '#6592ff', '#9ebafc'],
|
|
color: ['#5292fc','#ef6667','#fac858','#91cc75','#73c0df','#3ba272','#fc8352','#9b60b4','#9ebafc'],
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize",function(){
|
|
myChart.resize();
|
|
});
|
|
|
|
|
|
/*******投诉办结数量及占比***********/
|
|
|
|
var myChart = echarts.init(document.getElementById('complaintHandling'));
|
|
|
|
//初始化数据
|
|
var category = ['未办结', '已办结' ];
|
|
var valueData = [42, 395];
|
|
var percentData = ['9.63%', '90.37%'];
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '15%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
show: false,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: category,splitLine: {show: false},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
offset: 10,
|
|
nameTextStyle: {
|
|
fontSize: 16,
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: 'rgba(255,255,255,.85)',
|
|
fontSize : 14
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'bar',
|
|
data: valueData.map((value, index) => ({value,
|
|
percent: percentData[index] // 将百分比数据作为自定义属性
|
|
})),
|
|
barWidth: 13,
|
|
barGap: 20,
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [10],
|
|
color: '#fef1f1',
|
|
},
|
|
smooth: true,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: [700, 0],
|
|
offset: [5, 0],
|
|
textStyle: {
|
|
color: '#666',
|
|
fontSize: 14
|
|
},
|
|
//formatter: '{c} ({d}%)',
|
|
formatter: function(params) {
|
|
return params.value + ' (' + params.data.percent + ')'; // 在标签中显示数值和百分比
|
|
}
|
|
},
|
|
},
|
|
itemStyle: {
|
|
emphasis: {
|
|
barBorderRadius: 8
|
|
},normal: {
|
|
barBorderRadius: 8,
|
|
color: '#fea0a0',
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
|
|
|
|
/*******评价数量及占比***********/
|
|
|
|
var myChart = echarts.init(document.getElementById('evaluateRate'));
|
|
//初始化数据
|
|
|
|
var category = ['未评价', '不满意', '较满意', '满意' ];
|
|
var valueData = [1612, 35, 430, 792 ];
|
|
var percentData = ['60.20%', '0.28%', '16.22%', '23.30%'];
|
|
/*var total = data.reduce((sum, value) => sum + value, 0);
|
|
var dataPercentage = data.map(value => (value / total * 100).toFixed(2));*/
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
top: '10%',
|
|
left: '3%',
|
|
right: '15%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
show: false,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: category,splitLine: {show: false},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
offset: 10,
|
|
nameTextStyle: {
|
|
fontSize: 16,
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: 'rgba(255,255,255,.85)',
|
|
fontSize : 14
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'bar',
|
|
data: valueData.map((value, index) => ({value,
|
|
percent: percentData[index] // 将百分比数据作为自定义属性
|
|
})),
|
|
barWidth: 12,
|
|
barGap: 15,
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
borderRadius: [10],
|
|
color: '#e9f0fc',
|
|
},
|
|
smooth: true,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: [700, 0],
|
|
offset: [5, 0],
|
|
textStyle: {
|
|
color: '#666',
|
|
fontSize: 14
|
|
},
|
|
|
|
//formatter: '{c} ({d}%)',
|
|
formatter: function(params) {
|
|
return params.value + ' (' + params.data.percent + ')'; // 在标签中显示数值和百分比
|
|
}
|
|
},
|
|
},
|
|
itemStyle: {
|
|
emphasis: {
|
|
barBorderRadius: 8
|
|
},normal: {
|
|
barBorderRadius: 8,
|
|
color: '#97bbfd',
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|