$(function () {
layer.load(2);
$.getScript("https://cidc.oss-cn-chengdu.aliyuncs.com/js/echarts.js", function () {
layer.closeAll('loading');
var data1 = ["a","b","c","d","e"];
var value1 = [11,223,23,234,554];
var data2 = ["a","b","c","d","e"];
var value2 = [23,1231,42343,5436,546];
var data3 = ["a","b","c","d","e"];
var value3 = [123,23443,4576,879,89];
var data4 = ["a","b","c","d","e"];
var value4 = [123,34,3455,657,678];
var data5 = ["a","b","c","d","e"];
var value5 = [123,34,56,234,123];
var data6 = ["a","b","c","d","e"];
var value6 = [123,3454,74,34,65];
var data7 = ["男","女"];
var value7 = [1212,324];
var data8 = ["a","b","c","d","e"];
var value8 = [223,23434,54,543,546];
var data9 = ["城管学院","工业职院","c","d","e"];
var value9 = [123,345,567,345,234];
var data10 = ["城管学院","工业职院","c","d","e"];
var value10 = [23,345,64,23,234];
var data11 = ["工业职院","b","c","d","e"];
var value11 = [123,435346,567,345,12];
var data12 = ["a","工业职院","c","d","e"];
var value12 = [324,32,2154,546,23];
var data13 = ["a","工业职院","c","d","e"];
var value13 = [213,3254,5462,341,345];
var data14 = ["a","工业职院","c","d","e"];
var value14 = [213,3454,25,624,624];
var myChart = echarts.init(document.getElementById('data41'));
var option = {
tooltip: {},
legend: {},
grid: {
left: '10%',
right: '20%',
top: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
splitLine: {
show: false,
},
axisLabel: {
color: "#FAC203",
show: false
}
},
yAxis: {
data: data1,
axisLabel: {
color: "#fff",
fontSize: "12px"
},
axisLine: {
lineStyle: {
color: '#FAC203'
}
}
},
series: [{
type: 'bar', barWidth: '50%',
itemStyle: {
color: '#FAC203',
borderColor: '#FFE232',
borderWidth: 1,
},
data: value1,
label: {
normal: {
show: true,
formatter: function (params) {
return echarts.format.addCommas(params.value);
},
position: 'right',
fontSize: 14,
color: '#fff',
align: 'left',
offset: [5, 2]
}
}
}]
};
myChart.setOption(option);
var myChart1 = echarts.init(document.getElementById('data42'));
var option1 = {
tooltip: {},
legend: {},
grid: {
left: '10%',
right: '20%',
top: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
splitLine: {
show: false,
},
axisLabel: {
color: "#FAC203",
show: false
}
},
yAxis: {
data: data2,
axisLabel: {
color: "#fff",
fontSize: "12px"
},
axisLine: {
lineStyle: {
color: '#FAC203'
}
}
},
series: [{
type: 'bar', barWidth: '50%',
itemStyle: {
color: '#FAC203',
borderColor: '#FFE232',
borderWidth: 1,
},
data: value2,
label: {
normal: {
show: true,
formatter: function (params) {
return echarts.format.addCommas(params.value);
},
position: 'right',
fontSize: 14,
color: '#fff',
align: 'left',
offset: [5, 2]
}
}
}]
};
myChart1.setOption(option1);
var myChart3 = echarts.init(document.getElementById('data43'));
var option3 = {
tooltip: {},
legend: {},
grid: {
left: '10%',
right: '20%',
top: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
splitLine: {
show: false,
},
axisLabel: {
color: "#FAC203",
show: false
}
},
yAxis: {
data: data3,
axisLabel: {
color: "#fff",
fontSize: "12px"
},
axisLine: {
lineStyle: {
color: '#FAC203'
}
}
},
series: [{
type: 'bar', barWidth: '50%',
itemStyle: {
color: '#FAC203',
borderColor: '#FFE232',
borderWidth: 1,
},
data: value3,
label: {
normal: {
show: true,
formatter: function (params) {
return echarts.format.addCommas(params.value);
},
position: 'right',
fontSize: 14,
color: '#fff',
align: 'left',
offset: [5, 2]
}
}
}]
};
myChart3.setOption(option3);
var myChart4 = echarts.init(document.getElementById('data44'));
var option4 = {
tooltip: {},
legend: {},
grid: {
left: '10%',
right: '20%',
top: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
splitLine: {
show: false,
},
axisLabel: {
color: "#FAC203",
show: false
}
},
yAxis: {
data: data4,
axisLabel: {
color: "#fff",
fontSize: "12px"
},
axisLine: {
lineStyle: {
color: '#FAC203'
}
}
},
series: [{
type: 'bar', barWidth: '50%',
itemStyle: {
color: '#FAC203',
borderColor: '#FFE232',
borderWidth: 1,
},
data: value4,
label: {
normal: {
show: true,
formatter: function (params) {
return echarts.format.addCommas(params.value);
},
position: 'right',
fontSize: 14,
color: '#fff',
align: 'left',
offset: [5, 2]
}
}
}]
};
myChart4.setOption(option4);
var myChart5 = echarts.init(document.getElementById('data45'));
var option5 = {
tooltip: {},
legend: {},
grid: {
left: '10%',
right: '20%',
top: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
splitLine: {
show: false,
},
axisLabel: {
color: "#FAC203",
show: false
}
},
yAxis: {
data: data5,
axisLabel: {
color: "#fff",
fontSize: "12px"
},
axisLine: {
lineStyle: {
color: '#FAC203'
}
}
},
series: [{
type: 'bar', barWidth: '50%',
itemStyle: {
color: '#FAC203',
borderColor: '#FFE232',
borderWidth: 1,
},
data: value5,
label: {
normal: {
show: true,
formatter: function (params) {
return echarts.format.addCommas(params.value);
},
position: 'right',
fontSize: 14,
color: '#fff',
align: 'left',
offset: [5, 2]
}
}
}]
};
myChart5.setOption(option5);
var myChart6 = echarts.init(document.getElementById('data46'));
var option6 = {
tooltip: {},
legend: {},
grid: {
left: '10%',
right: '20%',
top: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
splitLine: {
show: false,
},
axisLabel: {
color: "#FAC203",
show: false
}
},
yAxis: {
data: data6,
axisLabel: {
color: "#fff",
fontSize: "12px"
},
axisLine: {
lineStyle: {
color: '#FAC203'
}
}
},
series: [{
type: 'bar', barWidth: '50%',
itemStyle: {
color: '#FAC203',
borderColor: '#FFE232',
borderWidth: 1,
},
data: value6,
label: {
normal: {
show: true,
formatter: function (params) {
return echarts.format.addCommas(params.value);
},
position: 'right',
fontSize: 14,
color: '#fff',
align: 'left',
offset: [5, 2]
}
}
}]
};
myChart6.setOption(option6);
var myChart7 = echarts.init(document.getElementById('data47'));
var option7 = {
title: { show: false,
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}'
},
legend: {
orient: 'vertical',
left: 60, //调整图例位置
top: 40,
itemHeight: 15,
itemWidth: 15,
textStyle: { //图例文字的样式
color: '#fff', //图例文字颜色
fontSize: 12 //图例文字大小
},
formatter: function(name) {
var data = option7.series[0].data;
var total = 0;
var tarValue;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
}
var v = tarValue;
return `${name} ${v}`;
},
},
series: [
{
name: '求职者性别分布',
type: 'pie',
radius: '100%',
center: ['70%', '50%'],
data: [
{ value: 1212, name:"男" },
{ value: 324, name:"女" },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
formatter: '{d}%',
position: 'inside'
},
}
]
};
myChart7.setOption(option7);
var myChart8 = echarts.init(document.getElementById('data48'));
var option8 = {
tooltip: {},
legend: {},
grid: {
left: '10%',
right: '20%',
top: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
splitLine: {
show: false,
},
axisLabel: {
color: "#FAC203",
show: false
}
},
yAxis: {
data: data8,
axisLabel: {
color: "#fff",
fontSize: "12px"
},
axisLine: {
lineStyle: {
color: '#FAC203'
}
}
},
series: [{
type: 'bar', barWidth: '50%',
itemStyle: {
color: '#FAC203',
borderColor: '#FFE232',
borderWidth: 1,
},
data: value8,
label: {
normal: {
show: true,
formatter: function (params) {
return echarts.format.addCommas(params.value);
},
position: 'right',
fontSize: 14,
color: '#fff',
align: 'left',
offset: [5, 2]
}
}
}]
};
myChart8.setOption(option8);
var myChart9 = echarts.init(document.getElementById('data4_1'));
var option9 = {
tooltip: {},
legend: {},
grid: {
left: '5%',
right: '28%',
top: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
splitLine: {
show: false,
},
axisLabel: {
color: "#FAC203",
show: false
}
},
yAxis: {
data: data9,
axisLabel: {
color: "#fff",
fontSize: "11px"
},
axisLine: {
lineStyle: {
color: '#FAC203'
}
}
},
series: [{
type: 'bar', barWidth: '50%',
itemStyle: {
color: '#FAC203',
borderColor: '#FFE232',
borderWidth: 1,
},
data: value9,
label: {
normal: {
show: true,
formatter: function (params) {
return echarts.format.addCommas(params.value);
},
position: 'right',
fontSize: 12,
color: '#FFE232',
align: 'left',
offset: [0, 1]
}
}
}]
};
myChart9.setOption(option9);
var myChart10= echarts.init(document.getElementById('data4_2'));
var option10 = {
tooltip: {},
legend: {},
grid: {
left: '5%',
right: '28%',
top: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
splitLine: {
show: false,
},
axisLabel: {
color: "#FAC203",
show: false
}
},
yAxis: {
data: data10,
axisLabel: {
color: "#fff",
fontSize: "11px"
},
axisLine: {
lineStyle: {
color: '#FAC203'
}
}
},
series: [{
type: 'bar', barWidth: '50%',
itemStyle: {
color: '#FAC203',
borderColor: '#FFE232',
borderWidth: 1,
},
data: value10,
label: {
normal: {
show: true,
formatter: function (params) {
return echarts.format.addCommas(params.value);
},
position: 'right',
fontSize: 12,
color: '#FFE232',
align: 'left',
offset: [0, 1]
}
}
}]
};
myChart10.setOption(option10);
var myChart11= echarts.init(document.getElementById('data4_3'));
var option11 = {
tooltip: {},
legend: {},
grid: {
left: '5%',
right: '28%',
top: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
splitLine: {
show: false,
},
axisLabel: {
color: "#FAC203",
show: false
}
},
yAxis: {
data: data11,
axisLabel: {
color: "#fff",
fontSize: "11px"
},
axisLine: {
lineStyle: {
color: '#FAC203'
}
}
},
series: [{
type: 'bar', barWidth: '50%',
itemStyle: {
color: '#FAC203',
borderColor: '#FFE232',
borderWidth: 1,
},
data: value11,
label: {
normal: {
show: true,
formatter: function (params) {
return echarts.format.addCommas(params.value);
},
position: 'right',
fontSize: 12,
color: '#FFE232',
align: 'left',
offset: [0, 1]
}
}
}]
};
myChart11.setOption(option11);
var myChart12= echarts.init(document.getElementById('data4_4'));
var option12 = {
tooltip: {},
legend: {},
grid: {
left: '5%',
right: '28%',
top: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
splitLine: {
show: false,
},
axisLabel: {
color: "#FAC203",
show: false
}
},
yAxis: {
data: data12,
axisLabel: {
color: "#fff",
fontSize: "11px"
},
axisLine: {
lineStyle: {
color: '#FAC203'
}
}
},
series: [{
type: 'bar', barWidth: '50%',
itemStyle: {
color: '#FAC203',
borderColor: '#FFE232',
borderWidth: 1,
},
data: value12,
label: {
normal: {
show: true,
formatter: function (params) {
return echarts.format.addCommas(params.value);
},
position: 'right',
fontSize: 12,
color: '#FFE232',
align: 'left',
offset: [0, 1]
}
}
}]
};
myChart12.setOption(option12);
var myChart13= echarts.init(document.getElementById('data4_5'));
var option13 = {
tooltip: {},
legend: {},
grid: {
left: '5%',
right: '28%',
top: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
splitLine: {
show: false,
},
axisLabel: {
color: "#FAC203",
show: false
}
},
yAxis: {
data: data13,
axisLabel: {
color: "#fff",
fontSize: "11px"
},
axisLine: {
lineStyle: {
color: '#FAC203'
}
}
},
series: [{
type: 'bar', barWidth: '50%',
itemStyle: {
color: '#FAC203',
borderColor: '#FFE232',
borderWidth: 1,
},
data: value13,
label: {
normal: {
show: true,
formatter: function (params) {
return echarts.format.addCommas(params.value);
},
position: 'right',
fontSize: 12,
color: '#FFE232',
align: 'left',
offset: [0, 1]
}
}
}]
};
myChart13.setOption(option13);
var myChart14= echarts.init(document.getElementById('data4_6'));
var option14 = {
tooltip: {},
legend: {},
grid: {
left: '5%',
right: '28%',
top: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
splitLine: {
show: false,
},
axisLabel: {
color: "#FAC203",
show: false
}
},
yAxis: {
data: data14,
axisLabel: {
color: "#fff",
fontSize: "11px"
},
axisLine: {
lineStyle: {
color: '#FAC203'
}
}
},
series: [{
type: 'bar', barWidth: '50%',
itemStyle: {
color: '#FAC203',
borderColor: '#FFE232',
borderWidth: 1,
},
data: value14,
label: {
normal: {
show: true,
formatter: function (params) {
return echarts.format.addCommas(params.value);
},
position: 'right',
fontSize: 12,
color: '#FFE232',
align: 'left',
offset: [0, 1]
}
}
}]
};
myChart14.setOption(option14);
var dom = document.getElementById('map');
var myChart_map = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var option_map;
myChart_map.showLoading();
$.get('/js/cq.json', function (geoJson) {
myChart_map.hideLoading();
echarts.registerMap('CHONGQING', geoJson);
myChart_map.setOption(
(option_map = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
series: [
{
name: '重庆市地图',
type: 'map',
layoutSize: {
width: '100%',
height: '80%'
},
map: 'CHONGQING',
itemStyle: {
normal: {
areaColor: '#046EFE',
},
emphasis: {
areaColor: '#c1eeee'
}
},
label: {
show: true
},
data: [
{ name: '万州区',code:'500101', },
{ name: '涪陵区',code:'500102', },
{ name: '渝中区',code:'500103', },
{ name: '大渡口区',code:'500104', },
{ name: '江北区',code:'500105', },
{ name: '沙坪坝区',code:'500106', },
{ name: '九龙坡区',code:'500107', },
{ name: '南岸区',code:'500108', },
{ name: '北碚区',code:'500109', },
{ name: '万盛区',code:'500110', },
{ name: '双桥区',code:'500111', },
{ name: '渝北区',code:'500112', },
{ name: '巴南区',code:'500113', },
{ name: '黔江区',code:'500114', },
{ name: '长寿区',code:'500115', },
{ name: '綦江区',code:'500222', },
{ name: '潼南区',code:'500223', },
{ name: '铜梁区',code:'500224', },
{ name: '大足区',code:'500225', },
{ name: '荣昌区',code:'500226', },
{ name: '璧山区',code:'500227', },
{ name: '城口县',code:'500229', },
{ name: '丰都县',code:'500230', },
{ name: '垫江县',code:'500231', },
{ name: '武隆区',code:'500232', },
{ name: '忠县',code:'500233', },
{ name: '开州区',code:'500234', },
{ name: '云阳县',code:'500235', },
{ name: '奉节县',code:'500236', },
{ name: '巫山县',code:'500237', },
{ name: '巫溪县',code:'500238', },
{ name: '石柱土家族自治县',code:'500240', },
{ name: '秀山土家族苗族自治县',code:'500241', },
{ name: '酉阳土家族苗族自治县',code:'500242', },
{ name: '彭水苗族土家族自治县',code:'500243', },
{ name: '江津区',code:'500381', },
{ name: '合川区',code:'500382', },
{ name: '永川区',code:'500383', },
{ name: '南川区',code:'500384', },
]
}
]
})
);
});
if (option_map && typeof option_map === 'object') {
myChart_map.setOption(option_map);
}
myChart_map.on('click', function (params) {
console.log(params);
console.log(params.name);
window.location.href="/kanban/county/"+params.data.code+".html";
});
window.addEventListener('resize', myChart_map.resize);
});
})