//*****************统计分析图表
/*******被执法企业次数排行***********/
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 + '
' +
'数量: ' + params[0].value + '
' +
'占比: ' + 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 + '
' +
params[0].seriesName + ': ' + params[0].data + ' (' + percent1 + ')' + '
' +
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 + '
' +
'数量: ' + params[0].value + '
' +
'占比: ' + 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 + '
' +
params[0].seriesName + ': ' + params[0].data + ' (' + percent1 + ')' + '
' +
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);