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.
844 lines
17 KiB
844 lines
17 KiB
$(function() {
|
|
echarts_1();
|
|
echarts_2();
|
|
c.init();
|
|
echarts_3();
|
|
// echarts_4();
|
|
// echarts_5();
|
|
// echarts_6();
|
|
})
|
|
|
|
function echarts_1() {
|
|
// 活动类别分析
|
|
var myChart = echarts.init(document.getElementById('echarts_1'));
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b}: {c}条",
|
|
},
|
|
series: [{
|
|
name: '活动类别分析',
|
|
type: 'pie',
|
|
radius: '75%',
|
|
center: ['50%', '50%'],
|
|
zlevel: 3,
|
|
color: ['#c968e1', '#0d83fb', '#00ffff', '#ebc14f', '#fb802e', '#7f3eb9', '#2adbac'],
|
|
data: [{
|
|
value: 42,
|
|
name: '扶贫济困'
|
|
},
|
|
{
|
|
value: 42,
|
|
name: '医疗卫生'
|
|
},
|
|
{
|
|
value: 76,
|
|
name: '妇女儿童服务'
|
|
},
|
|
{
|
|
value: 12,
|
|
name: '其他'
|
|
},
|
|
{
|
|
value: 36,
|
|
name: '社区治理'
|
|
},
|
|
{
|
|
value: 36,
|
|
name: '残疾人服务'
|
|
},
|
|
{
|
|
value: 76,
|
|
name: '养老服务'
|
|
}
|
|
],
|
|
label: {
|
|
padding: [18, 0, 0, 0],
|
|
formatter: [
|
|
'{c|}',
|
|
'{a|{c}条}',
|
|
'{b|{b}}'
|
|
].join('\n'),
|
|
rich: {
|
|
|
|
c: {
|
|
width: 4,
|
|
height: 4,
|
|
padding: [0, -4],
|
|
marginBottom: 50,
|
|
borderRadius: 4,
|
|
lineHeight: 0,
|
|
backgroundColor: 'auto'
|
|
},
|
|
a: {
|
|
padding: [-30, 0, 0, 5],
|
|
color: "#02f7f4",
|
|
fontSize: 20,
|
|
align: "center",
|
|
|
|
},
|
|
b: {
|
|
padding: [-10, 0, 0, 5],
|
|
color: "#fff",
|
|
fontSize: 14,
|
|
align: "center",
|
|
lineHeight: 18,
|
|
},
|
|
|
|
},
|
|
},
|
|
labelLine: {
|
|
show: true,
|
|
length: 15,
|
|
length2: 32,
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 0,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
},
|
|
|
|
}
|
|
|
|
, {
|
|
name: '外边框',
|
|
type: 'pie',
|
|
zlevel: 1,
|
|
radius: ['90%', '90%'], //边框大小
|
|
center: ['50%', '50%'], //边框位置
|
|
cursor: 'default',
|
|
emphasis: {
|
|
scale: false
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
data: [{
|
|
value: 1,
|
|
label: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
borderWidth: 1, //设置边框粗细
|
|
borderColor: 'rgba(29,176,226,.5)' //边框颜色
|
|
}
|
|
}],
|
|
},
|
|
{
|
|
name: '内边框',
|
|
type: 'pie',
|
|
zlevel: 3,
|
|
radius: ['0', '25%'], //边框大小
|
|
center: ['50%', '50%'], //边框位置
|
|
cursor: 'default',
|
|
emphasis: {
|
|
scale: false
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
data: [{
|
|
value: 1,
|
|
label: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
color: '#fff'
|
|
}
|
|
}],
|
|
},
|
|
{
|
|
type: 'pie',
|
|
zlevel: 4,
|
|
emphasis: {
|
|
scale: false
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
radius: [0, '10%'],
|
|
data: [{
|
|
value: 1,
|
|
itemStyle: {
|
|
color: '#f0f7ff'
|
|
},
|
|
label: {
|
|
show: false
|
|
}
|
|
}]
|
|
},
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function() {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
function echarts_2() {
|
|
// 需求类别分析
|
|
var myChart = echarts.init(document.getElementById('echarts_2'));
|
|
var data1 = [15, 22, 45, 18, 22]; //招标
|
|
var data2 = [20, 22, 28, 20, 25]; //众筹
|
|
var data3 = [20, 20, 20, 20, 20]; //指派
|
|
// 总计
|
|
var total_data = function() {
|
|
var datas = [];
|
|
for (var i = 0; i < data1.length; i++) {
|
|
datas.push(data1[i] + data2[2] + data3[i]);
|
|
}
|
|
return datas;
|
|
}();
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
},
|
|
grid: {
|
|
height: "58%",
|
|
top: '5%',
|
|
},
|
|
legend: {
|
|
show: true,
|
|
align: 'auto',
|
|
data: ['招标', '众筹', '指派'],
|
|
bottom: '1%',
|
|
itemWidth: 13,
|
|
itemHeight: 13,
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 12,
|
|
}
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['基本共工服务', '社会管理服务', '行业管理与协调性服务', '技术性服务', '政府履职所需的辅助性事项'],
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "rgba(95,200,225,.5)",
|
|
type: 'solid',
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
alignWithLabel: true,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "rgba(95,200,225,.5)",
|
|
type: 'solid',
|
|
}
|
|
},
|
|
boundaryGap: true,
|
|
axisLabel: {
|
|
color: '#fff',
|
|
fontSize: 12,
|
|
lineHeight: 14,
|
|
show: true,
|
|
interval: '0',
|
|
formatter: function(params) {
|
|
var newParamsName = ""; // 最终拼接成的字符串
|
|
var paramsNameNumber = params.length; // 实际标签的个数
|
|
var provideNumber = 4; // 每行能显示的字的个数
|
|
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
|
|
/**
|
|
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
|
|
*/
|
|
// 条件等同于rowNumber>1
|
|
if (paramsNameNumber > provideNumber) {
|
|
/** 循环每一行,p表示行 */
|
|
for (var p = 0; p < rowNumber; p++) {
|
|
var tempStr = ""; // 表示每一次截取的字符串
|
|
var start = p * provideNumber; // 开始截取的位置
|
|
var end = start + provideNumber; // 结束截取的位置
|
|
// 此处特殊处理最后一行的索引值
|
|
if (p == rowNumber - 1) {
|
|
// 最后一次不换行
|
|
tempStr = params.substring(start, paramsNameNumber);
|
|
} else {
|
|
// 每一次拼接字符串并换行
|
|
tempStr = params.substring(start, end) + "\n";
|
|
}
|
|
newParamsName += tempStr; // 最终拼成的字符串
|
|
}
|
|
|
|
} else {
|
|
// 将旧标签的值赋给新标签
|
|
newParamsName = params;
|
|
}
|
|
//将最终的字符串返回
|
|
return newParamsName
|
|
}
|
|
},
|
|
|
|
}],
|
|
yAxis: [{
|
|
type: "value",
|
|
show: true,
|
|
name: "人数",
|
|
nameTextStyle: {
|
|
color: "#b7efff",
|
|
fontSize: 14,
|
|
},
|
|
nameLocation: "end",
|
|
max: 100,
|
|
min: 0,
|
|
splitNumber: 5,
|
|
axisLabel: {
|
|
color: '#b7efff',
|
|
fontSize: 12,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgba(95,200,225,.5)",
|
|
type: 'dashed',
|
|
}
|
|
}
|
|
}],
|
|
series: [{
|
|
name: '招标',
|
|
type: "bar",
|
|
barWidth: 11,
|
|
stack: "需求人数",
|
|
data: data1,
|
|
itemStyle: {
|
|
color: '#1e6afa',
|
|
}
|
|
}, {
|
|
name: '众筹',
|
|
type: "bar",
|
|
barWidth: 11,
|
|
stack: "需求人数",
|
|
data: data2,
|
|
itemStyle: {
|
|
color: '#2d9aff',
|
|
}
|
|
}, {
|
|
name: '指派',
|
|
type: "bar",
|
|
stack: "需求人数",
|
|
barWidth: 11,
|
|
data: data3,
|
|
itemStyle: {
|
|
color: '#00ffff',
|
|
barBorderRadius: [11, 11, 0, 0]
|
|
}
|
|
}, {
|
|
name: '总计',
|
|
type: "bar",
|
|
barWidth: 11,
|
|
stack: "需求人数",
|
|
label: {
|
|
show: true,
|
|
offset: [0, 0],
|
|
position: 'insideBottom',
|
|
formatter: '{c}',
|
|
textStyle: {
|
|
color: '#fff',
|
|
}
|
|
},
|
|
itemStyle: {
|
|
color: "rgba(128,128,128,0)",
|
|
},
|
|
data: total_data,
|
|
markPoint: {
|
|
data: [{
|
|
type: 'max',
|
|
name: "最大值",
|
|
symbol: "circle",
|
|
itemStyle: {
|
|
color: "rgba(225, 255, 255, 1)",
|
|
}
|
|
}],
|
|
symbol: "circle",
|
|
animation: true,
|
|
animationEasing: "bounceOut",
|
|
animationDurationUpdate: 1040,
|
|
symbolSize: 33,
|
|
itemStyle: {
|
|
color: "rgba(224, 40, 40, 1)",
|
|
borderWidth: 4,
|
|
borderType: "solid",
|
|
width: 3,
|
|
height: 3,
|
|
borderDashOffset: 4,
|
|
borderColor: "rgba(58, 51, 51, 1)",
|
|
borderCap: "square",
|
|
borderJoin: "round",
|
|
borderMiterLimit: 37,
|
|
shadowBlur: 7,
|
|
shadowColor: "rgba(225, 214, 214, 1)",
|
|
shadowOffsetX: 0.5,
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function() {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
function echarts_3() {
|
|
// 服务类别分析
|
|
var myChart = echarts.init(document.getElementById('echarts_3'));
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b}: {c}条",
|
|
},
|
|
series: [{
|
|
name: '服务类别分析',
|
|
type: 'pie',
|
|
radius: '75%',
|
|
center: ['50%', '50%'],
|
|
zlevel: 2,
|
|
color: ['#c968e1', '#0d83fb', '#00ffff', '#ebc14f', '#fb802e', '#7f3eb9', '#2adbac'],
|
|
data: [{
|
|
value: 42,
|
|
name: '扶贫济困'
|
|
},
|
|
{
|
|
value: 42,
|
|
name: '医疗卫生'
|
|
},
|
|
{
|
|
value: 76,
|
|
name: '妇女儿童服务'
|
|
},
|
|
{
|
|
value: 12,
|
|
name: '其他'
|
|
},
|
|
{
|
|
value: 36,
|
|
name: '社区治理'
|
|
},
|
|
{
|
|
value: 36,
|
|
name: '残疾人服务'
|
|
},
|
|
{
|
|
value: 76,
|
|
name: '养老服务'
|
|
}
|
|
],
|
|
label: {
|
|
padding: [18, 0, 0, 0],
|
|
formatter: [
|
|
'{c|}',
|
|
'{a|{c}条}',
|
|
'{b|{b}}'
|
|
].join('\n'),
|
|
rich: {
|
|
|
|
c: {
|
|
width: 4,
|
|
height: 4,
|
|
padding: [0, -4],
|
|
marginBottom: 50,
|
|
borderRadius: 4,
|
|
lineHeight: 0,
|
|
backgroundColor: 'auto'
|
|
},
|
|
a: {
|
|
padding: [-30, 0, 0, 5],
|
|
color: "#02f7f4",
|
|
fontSize: 20,
|
|
align: "center",
|
|
|
|
},
|
|
b: {
|
|
padding: [-10, 0, 0, 5],
|
|
color: "#fff",
|
|
fontSize: 14,
|
|
align: "center",
|
|
lineHeight: 18,
|
|
},
|
|
|
|
},
|
|
},
|
|
labelLine: {
|
|
show: true,
|
|
length: 15,
|
|
length2: 32,
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 0,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
},
|
|
|
|
},
|
|
{
|
|
name: '内边框',
|
|
type: 'pie',
|
|
zlevel: 3,
|
|
radius: ['0', '60%'], //边框大小
|
|
center: ['50%', '50%'], //边框位置
|
|
cursor: 'default',
|
|
emphasis: {
|
|
scale: false,
|
|
disabled: true
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
data: [{
|
|
value: 1,
|
|
label: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
color: '#283fd6'
|
|
}
|
|
}],
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function() {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
var chartDom = document.getElementById('map');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
var clickLevel = 0;
|
|
|
|
var c = {
|
|
init() {
|
|
c.drawMap();
|
|
myChart.on('click', (params) => {
|
|
console.log(myChart)
|
|
if (params.componentSubType == 'map') {
|
|
myChart.clear();
|
|
c.drawMap(params.name, params.data.level)
|
|
} else if (params.componentSubType == 'scatter' || params.componentSubType ==
|
|
'effectScatter') {
|
|
console.log(params.componentSubType, "click")
|
|
this.$emit('pointClick', params)
|
|
}
|
|
})
|
|
},
|
|
|
|
drawMap(name, level) {
|
|
myChart.showLoading();
|
|
var url = "data/110.json";
|
|
|
|
if (name == '大兴区' || level == 2){
|
|
url = "data/110115.json";
|
|
var counterss = $(".counter");
|
|
counterss.each(function(){
|
|
var nums = $(this).attr("data-num")-15;
|
|
if($(this).hasClass('counterp')){
|
|
$(this).before("<p class='counter counterp' data-num='"+nums+"'>"+nums+"</p>")
|
|
}else if($(this).hasClass('counterb')){
|
|
$(this).before("<b class='counter counterb' data-num='"+nums+"'>"+nums+"</b>")
|
|
}else{
|
|
$(this).before("<span class='counter' data-num='"+nums+"'>"+nums+"</span>")
|
|
}
|
|
$(this).remove();
|
|
})
|
|
$('.counter').countUp({
|
|
delay: 50,
|
|
time: 1500
|
|
});
|
|
|
|
}
|
|
|
|
if (clickLevel == level && level == 2) {
|
|
myChart.hideLoading();
|
|
location.href = "/yiwanggongzhi/govern-show.html"
|
|
console.log(clickLevel)
|
|
return false;
|
|
} else
|
|
clickLevel = level
|
|
|
|
$.get(url, function(geoJson) {
|
|
if (level == 2) {
|
|
var countersss = $(".counter");
|
|
countersss.each(function(){
|
|
var nums = $(this).attr("data-num")-15;
|
|
if($(this).hasClass('counterp')){
|
|
$(this).before("<p class='counter counterp' data-num='"+nums+"'>"+nums+"</p>")
|
|
}else if($(this).hasClass('counterb')){
|
|
$(this).before("<b class='counter counterb' data-num='"+nums+"'>"+nums+"</b>")
|
|
}else{
|
|
$(this).before("<span class='counter' data-num='"+nums+"'>"+nums+"</span>")
|
|
}
|
|
$(this).remove();
|
|
|
|
})
|
|
$('.counter').countUp({
|
|
delay: 50,
|
|
time: 1500
|
|
});
|
|
|
|
const jsons = geoJson.features.filter(item => item.properties.name == name)
|
|
const mapJson = {
|
|
"type": "FeatureCollection",
|
|
"features": jsons
|
|
}
|
|
geoJson = mapJson;
|
|
}
|
|
|
|
myChart.hideLoading();
|
|
echarts.registerMap('DX', geoJson);
|
|
myChart.setOption(
|
|
(option = {
|
|
title: {
|
|
text: '',
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}'
|
|
},
|
|
toolbox: {
|
|
show: false,
|
|
orient: 'vertical',
|
|
left: 'right',
|
|
top: 'center',
|
|
feature: {
|
|
restore: {},
|
|
}
|
|
},
|
|
visualMap: {
|
|
min: 800,
|
|
max: 50000,
|
|
text: ['High', 'Low'],
|
|
realtime: false,
|
|
calculable: true,
|
|
inRange: {
|
|
color: ['rgba(117,68,177,0.9)', 'rgba(106,215,175,0.9)',
|
|
'rgba(223,127,64,0.9)'
|
|
],
|
|
},
|
|
show: false,
|
|
},
|
|
series: [{
|
|
name: '北京市大兴区',
|
|
type: 'map',
|
|
map: 'DX',
|
|
zoom: 1.2, //当前视角的缩放比例
|
|
roam: true, //是否开启平游或缩放
|
|
scaleLimit: {
|
|
min: 1,
|
|
max: 1.6
|
|
},
|
|
label: {
|
|
show: true
|
|
},
|
|
left: 'center',
|
|
top: 'center',
|
|
data: [{
|
|
name: '榆垡镇',
|
|
value: 10057.34,
|
|
level: 2
|
|
},
|
|
|
|
{
|
|
name: '黄村镇',
|
|
value: 20057.34,
|
|
level: 2
|
|
},
|
|
{
|
|
name: '北臧村镇',
|
|
value: 15477.48,
|
|
level: 2
|
|
},
|
|
{
|
|
name: '庞各庄镇',
|
|
value: 31686.1,
|
|
level: 2
|
|
},
|
|
{
|
|
name: '礼贤镇',
|
|
value: 6992.6,
|
|
level: 2
|
|
},
|
|
{
|
|
name: '魏善庄镇',
|
|
value: 44045.49,
|
|
level: 2
|
|
},
|
|
{
|
|
name: '安定镇',
|
|
value: 40689.64,
|
|
level: 2
|
|
},
|
|
{
|
|
name: '青云店镇',
|
|
value: 37659.78,
|
|
level: 2
|
|
},
|
|
{
|
|
name: '长子营镇',
|
|
value: 45180.97,
|
|
level: 2
|
|
},
|
|
|
|
{
|
|
name: '采育镇',
|
|
value: 55204.26,
|
|
level: 2
|
|
},
|
|
{
|
|
name: '西红门镇',
|
|
value: 21900.9,
|
|
level: 2
|
|
},
|
|
{
|
|
name: '旧宫镇',
|
|
value: 4918.26,
|
|
level: 2
|
|
},
|
|
{
|
|
name: '亦庄镇',
|
|
value: 5881.84,
|
|
level: 2
|
|
},
|
|
{
|
|
name: '瀛海镇',
|
|
value: 4178.01,
|
|
level: 2
|
|
},
|
|
{
|
|
name: '兴丰街道',
|
|
value: 2227.92,
|
|
level: 2
|
|
},
|
|
{
|
|
name: '清源街道',
|
|
value: 2180.98,
|
|
level: 2
|
|
},
|
|
{
|
|
name: '林校路街道',
|
|
value: 9172.94,
|
|
level: 2
|
|
},
|
|
{
|
|
name: '观音寺街道',
|
|
value: 3368,
|
|
level: 2
|
|
},
|
|
{
|
|
name: '天宫院街道',
|
|
value: 806.98,
|
|
level: 2
|
|
},
|
|
{
|
|
name: '高米店街道',
|
|
value: 22706.98,
|
|
level: 2
|
|
},
|
|
{
|
|
name: '东城区',
|
|
value: 33106.98,
|
|
level: 1
|
|
|
|
},
|
|
{
|
|
name: '西城区',
|
|
value: 31306.98,
|
|
level: 1
|
|
|
|
},
|
|
{
|
|
name: '朝阳区',
|
|
value: 21706.98,
|
|
level: 1
|
|
|
|
},
|
|
{
|
|
name: '丰台区',
|
|
value: 14706.98,
|
|
level: 1
|
|
|
|
},
|
|
{
|
|
name: '石景山区',
|
|
value: 43706.98,
|
|
level: 1
|
|
|
|
},
|
|
{
|
|
name: '海淀区',
|
|
value: 23306.98,
|
|
level: 1
|
|
|
|
}, {
|
|
name: '顺义区',
|
|
value: 12706.98,
|
|
level: 1
|
|
|
|
}, {
|
|
name: '通州区',
|
|
value: 1506.98,
|
|
level: 1
|
|
|
|
}, {
|
|
name: '大兴区',
|
|
value: 4706.98,
|
|
level: 1
|
|
|
|
}, {
|
|
name: '房山区',
|
|
value: 3706.98,
|
|
level: 1
|
|
|
|
}, {
|
|
name: '门头沟区',
|
|
value: 12806.98,
|
|
level: 1
|
|
|
|
}, {
|
|
name: '昌平区',
|
|
value: 22606.98,
|
|
level: 1
|
|
|
|
}, {
|
|
name: '平谷区',
|
|
value: 42306.98,
|
|
level: 1
|
|
|
|
}, {
|
|
name: '密云区',
|
|
value: 30206.98,
|
|
level: 1
|
|
|
|
}, {
|
|
name: '怀柔区',
|
|
value: 20706.98,
|
|
level: 1
|
|
|
|
}, {
|
|
name: '延庆区',
|
|
value: 10206.98,
|
|
level: 1
|
|
|
|
}
|
|
],
|
|
// 自定义名称映射
|
|
nameMap: {
|
|
|
|
}
|
|
}]
|
|
})
|
|
);
|
|
});
|
|
}
|
|
}
|