$(function () {
char_4();
map();
Gender();
char_1();
char_2();
char_3();
/**/
char_5();
char_6();
char_7();
char_8();
function map() {
var myChart = echarts.init(document.getElementById('china'));
var geoCoordMap = {
'新疆玛纳斯基地': [86.22, 44.30],
'九江': [116.00, 29.70],
'新乡': [116.402217, 35.311657],
' ': [79.92, 37.12],
' ': [86.85, 47.70],
'若羌县': [88.17, 39.02],
'上海': [121.4648, 31.2891],
'东莞': [113.8953, 22.901],
'东营': [118.7073, 37.5513],
'中山': [113.4229, 22.478],
'临汾': [111.4783, 36.1615],
'临沂': [118.3118, 35.2936],
'丹东': [124.541, 40.4242],
'丽水': [119.5642, 28.1854],
'乌鲁木齐': [87.9236, 43.5883],
'佛山': [112.8955, 23.1097],
'保定': [115.0488, 39.0948],
'兰州': [103.5901, 36.3043],
'包头': [110.3467, 41.4899],
'北京': [116.4551, 40.2539],
'北海': [109.314, 21.6211],
'南京': [118.8062, 31.9208],
'南宁': [108.479, 23.1152],
'南昌': [116.0046, 28.6633],
'南通': [121.1023, 32.1625],
'厦门': [118.1689, 24.6478],
'台州': [121.1353, 28.6688],
'合肥': [117.29, 32.0581],
'呼和浩特': [111.4124, 40.4901],
'咸阳': [108.4131, 34.8706],
'哈尔滨': [127.9688, 45.368],
'唐山': [118.4766, 39.6826],
'嘉兴': [120.9155, 30.6354],
'大同': [113.7854, 39.8035],
'大连': [122.2229, 39.4409],
'天津': [117.4219, 39.4189],
'太原': [112.3352, 37.9413],
'威海': [121.9482, 37.1393],
'宁波': [121.5967, 29.6466],
'宝鸡': [107.1826, 34.3433],
'宿迁': [118.5535, 33.7775],
'常州': [119.4543, 31.5582],
'广州': [113.5107, 23.2196],
'廊坊': [116.521, 39.0509],
'延安': [109.1052, 36.4252],
'张家口': [115.1477, 40.8527],
'徐州': [117.5208, 34.3268],
'德州': [116.6858, 37.2107],
'惠州': [114.6204, 23.1647],
'成都': [103.9526, 30.7617],
'扬州': [119.4653, 32.8162],
'承德': [117.5757, 41.4075],
'拉萨': [91.1865, 30.1465],
'无锡': [120.3442, 31.5527],
'日照': [119.2786, 35.5023],
'昆明': [102.9199, 25.4663],
'杭州': [119.5313, 29.8773],
'枣庄': [117.323, 34.8926],
'柳州': [109.3799, 24.9774],
'株洲': [113.5327, 27.0319],
'武汉': [114.3896, 30.6628],
'汕头': [117.1692, 23.3405],
'江门': [112.6318, 22.1484],
'沈阳': [123.1238, 42.1216],
'沧州': [116.8286, 38.2104],
'河源': [114.917, 23.9722],
'泉州': [118.3228, 25.1147],
'泰安': [117.0264, 36.0516],
'泰州': [120.0586, 32.5525],
'济南': [117.1582, 36.8701],
'济宁': [116.8286, 35.3375],
'海口': [110.3893, 19.8516],
'淄博': [118.0371, 36.6064],
'淮安': [118.927, 33.4039],
'深圳': [114.5435, 22.5439],
'清远': [112.9175, 24.3292],
'温州': [120.498, 27.8119],
'渭南': [109.7864, 35.0299],
'湖州': [119.8608, 30.7782],
'湘潭': [112.5439, 27.7075],
'滨州': [117.8174, 37.4963],
'潍坊': [119.0918, 36.524],
'烟台': [120.7397, 37.5128],
'玉溪': [101.9312, 23.8898],
'珠海': [113.7305, 22.1155],
'盐城': [120.2234, 33.5577],
'盘锦': [121.9482, 41.0449],
'石家庄': [114.4995, 38.1006],
'福州': [119.4543, 25.9222],
'秦皇岛': [119.2126, 40.0232],
'绍兴': [120.564, 29.7565],
'聊城': [115.9167, 36.4032],
'肇庆': [112.1265, 23.5822],
'舟山': [122.2559, 30.2234],
'苏州': [120.6519, 31.3989],
'莱芜': [117.6526, 36.2714],
'菏泽': [115.6201, 35.2057],
'营口': [122.4316, 40.4297],
'葫芦岛': [120.1575, 40.578],
'衡水': [115.8838, 37.7161],
'衢州': [118.6853, 28.8666],
'西宁': [101.4038, 36.8207],
'西安': [109.1162, 34.2004],
'贵阳': [106.6992, 26.7682],
'连云港': [119.1248, 34.552],
'邢台': [114.8071, 37.2821],
'邯郸': [114.4775, 36.535],
'郑州': [113.4668, 34.6234],
'鄂尔多斯': [108.9734, 39.2487],
'重庆': [107.7539, 30.1904],
'金华': [120.0037, 29.1028],
'铜川': [109.0393, 35.1947],
'银川': [106.3586, 38.1775],
'镇江': [119.4763, 31.9702],
'长春': [125.8154, 44.2584],
'长沙': [113.0823, 28.2568],
'长治': [112.8625, 36.4746],
'阳泉': [113.4778, 38.0951],
'青岛': [120.4651, 36.3373],
'韶关': [113.7964, 24.7028]
};
var BJData = [
[{
name: '新乡'
}, {
name: '新乡',
value: 200
}],
[{
name: '新乡'
}, {
name: '呼和浩特',
value: 90
}],
[{
name: '新乡'
}, {
name: '哈尔滨',
value: 90
}],
[{
name: '新乡'
}, {
name: '石家庄',
value: 90
}],
[{
name: '新乡'
}, {
name: '昆明',
value: 30
}],
[{
name: '新乡'
}, {
name: '北京',
value: 100
}],
[{
name: '新乡'
}, {
name: '长春',
value: 40
}],
[{
name: '新乡'
}, {
name: '重庆',
value: 40
}],
[{
name: '新乡'
}, {
name: '贵阳',
value: 50
}],
[{
name: '新乡'
}, {
name: '南宁',
value: 30
}],
[{
name: '新乡'
}, {
name: '济南',
value: 10
}],
[{
name: '新乡'
}, {
name: '太原',
value: 40
}],
[{
name: '新乡'
}, {
name: '西安',
value: 60
}],
[{
name: '新乡'
}, {
name: '武汉',
value: 50
}],
[{
name: '新乡'
}, {
name: '合肥',
value: 40
}],
[{
name: '新乡'
}, {
name: '南京',
value: 30
}],
[{
name: '新乡'
}, {
name: '沈阳',
value: 20
}],
[{
name: '新乡'
}, {
name: '成都',
value: 10
}]
];
var SHData = [
[{
name: '九江'
}, {
name: '九江',
value: 200
}],
[{
name: '九江'
}, {
name: '长沙',
value: 95
}],
[{
name: '九江'
}, {
name: '武汉',
value: 30
}],
[{
name: '九江'
}, {
name: '南昌',
value: 20
}],
[{
name: '九江'
}, {
name: '合肥',
value: 70
}],
[{
name: '九江'
}, {
name: '南京',
value: 60
}],
[{
name: '九江'
}, {
name: '福州',
value: 50
}],
[{
name: '九江'
}, {
name: '上海',
value: 100
}],
[{
name: '九江'
}, {
name: '深圳',
value: 100
}],
];
var GZData = [
[{
name: '新疆玛纳斯基地'
}, {
name: '新疆玛纳斯基地',
value: 200
}],
[{
name: '新疆玛纳斯基地'
}, {
name: ' ',
value: 90
}],
[{
name: '新疆玛纳斯基地'
}, {
name: ' ',
value: 40
}],
[{
name: '新疆玛纳斯基地'
}, {
name: '呼和浩特',
value: 90
}],
[{
name: '新疆玛纳斯基地'
}, {
name: '昆明',
value: 40
}],
[{
name: '新疆玛纳斯基地'
}, {
name: '成都',
value: 10
}],
[{
name: '新疆玛纳斯基地'
}, {
name: '兰州',
value: 95
}],
[{
name: '新疆玛纳斯基地'
}, {
name: '银川',
value: 90
}],
[{
name: '新疆玛纳斯基地'
}, {
name: '西宁',
value: 80
}],
];
var planePath = 'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705';
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord
}, {
coord: toCoord
}]);
}
}
return res;
};
var color = ['#3ed4ff', '#ffa022', '#a6c84c'];
var series = [];
[
['新乡', BJData],
['九江', SHData],
['新疆', GZData]
].forEach(function(item, i) {
series.push({
name: item[0] + ' Top10',
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
},
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.2
}
},
data: convertData(item[1])
}, {
name: item[0] + ' Top10',
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.4,
curveness: 0.2
}
},
data: convertData(item[1])
}, {
name: item[0] + ' Top10',
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function(val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: color[i]
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
});
});
option = {
/*backgroundColor: '#080a20',*/
title: {
text: '物流情况',
subtext: '',
left: 'left',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
top: 'bottom',
left: 'right',
data: ['北京 Top10', '上海 Top10', '广州 Top10'],
textStyle: {
color: '#fff'
},
selectedMode: 'single'
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#132937',
borderColor: '#0692a4'
},
emphasis: {
areaColor: '#0b1c2d'
}
}
},
series: series
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function Gender() {
var myChart = echarts.init(document.getElementById('Gender'));
var symbols = [
'path://M18.2629891,11.7131596 L6.8091608,11.7131596 C1.6685112,11.7131596 0,13.032145 0,18.6237673 L0,34.9928467 C0,38.1719847 4.28388932,38.1719847 4.28388932,34.9928467 L4.65591984,20.0216948 L5.74941883,20.0216948 L5.74941883,61.000787 C5.74941883,65.2508314 11.5891201,65.1268798 11.5891201,61.000787 L11.9611506,37.2137775 L13.1110872,37.2137775 L13.4831177,61.000787 C13.4831177,65.1268798 19.3114787,65.2508314 19.3114787,61.000787 L19.3114787,20.0216948 L20.4162301,20.0216948 L20.7882606,34.9928467 C20.7882606,38.1719847 25.0721499,38.1719847 25.0721499,34.9928467 L25.0721499,18.6237673 C25.0721499,13.032145 23.4038145,11.7131596 18.2629891,11.7131596 M12.5361629,1.11022302e-13 C15.4784742,1.11022302e-13 17.8684539,2.38997966 17.8684539,5.33237894 C17.8684539,8.27469031 15.4784742,10.66467 12.5361629,10.66467 C9.59376358,10.66467 7.20378392,8.27469031 7.20378392,5.33237894 C7.20378392,2.38997966 9.59376358,1.11022302e-13 12.5361629,1.11022302e-13',
'path://M28.9624207,31.5315864 L24.4142575,16.4793596 C23.5227152,13.8063773 20.8817445,11.7111088 17.0107398,11.7111088 L12.112691,11.7111088 C8.24168636,11.7111088 5.60080331,13.8064652 4.70917331,16.4793596 L0.149791395,31.5315864 C-0.786976655,34.7595013 2.9373074,35.9147532 3.9192135,32.890727 L8.72689855,19.1296485 L9.2799493,19.1296485 C9.2799493,19.1296485 2.95992025,43.7750224 2.70031069,44.6924335 C2.56498417,45.1567684 2.74553639,45.4852068 3.24205501,45.4852068 L8.704461,45.4852068 L8.704461,61.6700801 C8.704461,64.9659872 13.625035,64.9659872 13.625035,61.6700801 L13.625035,45.360657 L15.5097899,45.360657 L15.4984835,61.6700801 C15.4984835,64.9659872 20.4191451,64.9659872 20.4191451,61.6700801 L20.4191451,45.4852068 L25.8814635,45.4852068 C26.3667633,45.4852068 26.5586219,45.1567684 26.4345142,44.6924335 C26.1636859,43.7750224 19.8436568,19.1296485 19.8436568,19.1296485 L20.3966199,19.1296485 L25.2043926,32.890727 C26.1862111,35.9147532 29.9105828,34.7595013 28.9625083,31.5315864 L28.9624207,31.5315864 Z M14.5617154,0 C17.4960397,0 19.8773132,2.3898427 19.8773132,5.33453001 C19.8773132,8.27930527 17.4960397,10.66906 14.5617154,10.66906 C11.6274788,10.66906 9.24611767,8.27930527 9.24611767,5.33453001 C9.24611767,2.3898427 11.6274788,0 14.5617154,0 L14.5617154,0 Z',
'path://M512 292.205897c80.855572 0 146.358821-65.503248 146.358821-146.358821C658.358821 65.503248 592.855572 0 512 0 431.144428 0 365.641179 65.503248 365.641179 146.358821 365.641179 227.214393 431.144428 292.205897 512 292.205897zM512 731.282359c-80.855572 0-146.358821 65.503248-146.358821 146.358821 0 80.855572 65.503248 146.358821 146.358821 146.358821 80.855572 0 146.358821-65.503248 146.358821-146.358821C658.358821 796.273863 592.855572 731.282359 512 731.282359z'
];
var bodyMax = 100; //指定图形界限的值
var labelSetting = {
normal: {
show: true,
position: 'bottom',
offset: [0, 10],
formatter: function(param) {
return (param.value / bodyMax * 100).toFixed(0) + '%';
},
textStyle: {
fontSize: 18,
fontFamily: 'Arial',
color: '#ffffff'
}
}
};
var markLineSetting = { //设置标线
symbol: 'none',
lineStyle: {
normal: {
opacity: 0.3
}
},
data: [{
type: 'max',
label: {
normal: {
formatter: 'max: {c}'
}
}
}, {
type: 'min',
label: {
normal: {
formatter: 'min: {c}'
}
}
}]
};
option = {
tooltip: {
show: false, //鼠标放上去显示悬浮数据
},
legend: {
data: ['男性', '女性'],
selectedMode: 'single',
itemWidth: 10, //图例的宽度
itemHeight: 10, //图例的高度
itemGap: 30,
orient: 'horizontal',
left: 'center',
top: '20px',
icon: 'rect',
// selectedMode: false, //取消图例上的点击事件
textStyle: {
color: '#ffffff'
},
},
grid: {
// left: '20%',
// right: '20%',
top: '20%',
bottom: '20%',
containLabel: true
},
xAxis: {
data: ['a', 'x', 'b'],
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: {
max: bodyMax,
splitLine: {
show: false
},
axisTick: {
// 刻度线
show: false
},
axisLine: {
// 轴线
show: false
},
axisLabel: {
// 轴坐标文字
show: false
}
},
series: [{
name: '男性',
type: 'pictorialBar',
symbolClip: true,
symbolBoundingData: bodyMax,
label: labelSetting,
data: [{
value: 35,
symbol: symbols[0],
itemStyle: {
normal: {
color: 'rgba(105,204,230)' //单独控制颜色
}
},
},
{
},
{
value: 65,
symbol: symbols[1],
itemStyle: {
normal: {
color: 'rgba(255,130,130)' //单独控制颜色
}
},
}
],
// markLine: markLineSetting,
z: 10
},
{
name: '女性',
type: 'pictorialBar',
symbolClip: true,
symbolBoundingData: bodyMax,
label: labelSetting,
data: [{
value: 70,
symbol: symbols[0]
},
{},
{
value: 30,
symbol: symbols[1]
}
],
// markLine: markLineSetting,
z: 10
},
{
// 设置背景底色，不同的情况用这个
name: 'full',
type: 'pictorialBar', //异型柱状图 图片、SVG PathData
symbolBoundingData: bodyMax,
animationDuration: 0,
itemStyle: {
normal: {
color: '#ccc' //设置全部颜色，统一设置
}
},
z: 10,
data: [{
itemStyle: {
normal: {
color: 'rgba(105,204,230,0.40)' //单独控制颜色
}
},
value: 100,
symbol: symbols[0]
},
{
// 设置中间冒号
itemStyle: {
normal: {
color: '#1DA1F2' //单独控制颜色
}
},
value: 100,
symbol: symbols[2],
symbolSize: [8, '18%'],
symbolOffset: [0, '-200%']
},
{
itemStyle: {
normal: {
color: 'rgba(255,130,130,0.40)' //单独控制颜色
}
},
value: 100,
symbol: symbols[1]
}
]
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function char_1() {
var myChart = echarts.init(document.getElementById('char_1'));
var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];
option = {
/*backgroundColor: '#0e2147',*/
grid: {
left: '11%',
top: '12%',
right: '0%',
bottom: '8%',
containLabel: true
},
xAxis: [{
show: false,
}],
yAxis: [{
axisTick: 'none',
axisLine: 'none',
offset: '27',
axisLabel: {
textStyle: {
color: '#ffffff',
fontSize: '16',
}
},
/*data: ['南昌转运中心', '广州转运中心', '杭州转运中心', '宁夏转运中心', '兰州转运中心', '南宁转运中心', '长沙转运中心', '武汉转运中心', '合肥转运中心', '贵州转运中心']*/
data: ['兰州转运中心', '南宁转运中心', '长沙转运中心', '武汉转运中心', '合肥转运中心', '贵州转运中心']
}, {
axisTick: 'none',
axisLine: 'none',
axisLabel: {
textStyle: {
color: '#ffffff',
fontSize: '14',
}
},
data: ['6', '5', '4', '3', '2', '1']
}, {
name: '分拨延误TOP 10',
nameGap: '50',
nameTextStyle: {
color: '#ffffff',
fontSize: '14',
},
axisLine: {
lineStyle: {
color: 'rgba(0,0,0,0)'
}
},
data: [],
}],
series: [{
name: '条',
type: 'bar',
yAxisIndex: 0,
data: [ 38, 44, 50, 52, 60, 72],
label: {
normal: {
show: true,
position: 'right',
textStyle: {
color: '#ffffff',
fontSize: '10',
}
}
},
barWidth: 5,
itemStyle: {
normal: {
color: function(params) {
var num = myColor.length;
return myColor[params.dataIndex % num]
},
}
},
z: 2
}, {
name: '白框',
type: 'bar',
yAxisIndex: 1,
barGap: '-100%',
data: [99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
barWidth: 5,
itemStyle: {
normal: {
color: '#0e2147',
barBorderRadius: 5,
}
},
z: 1
}, {
name: '外框',
type: 'bar',
yAxisIndex: 2,
barGap: '-100%',
data: [100, 100, 100, 100, 100, 100],
barWidth: 12,
itemStyle: {
normal: {
color: function(params) {
var num = myColor.length;
return myColor[params.dataIndex % num]
},
barBorderRadius: 5,
}
},
z: 0
},
{
name: '外圆',
type: 'scatter',
hoverAnimation: false,
data: [ 0, 0, 0, 0, 0, 0],
yAxisIndex: 2,
symbolSize: 15,
itemStyle: {
normal: {
color: function(params) {
var num = myColor.length;
return myColor[params.dataIndex % num]
},
opacity: 1,
}
},
z: 2
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function char_2() {
var myChart = echarts.init(document.getElementById('char_2'));
var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];
option = {
/*backgroundColor: '#0e2147',*/
grid: {
left: '11%',
top: '12%',
right: '0%',
bottom: '8%',
containLabel: true
},
xAxis: [{
show: false,
}],
yAxis: [{
axisTick: 'none',
axisLine: 'none',
offset: '27',
axisLabel: {
textStyle: {
color: '#ffffff',
fontSize: '16',
}
},
/*data: ['南昌转运中心', '广州转运中心', '杭州转运中心', '宁夏转运中心', '兰州转运中心', '南宁转运中心', '长沙转运中心', '武汉转运中心', '合肥转运中心', '贵州转运中心']*/
data: ['兰州转运中心', '南宁转运中心', '长沙转运中心', '武汉转运中心', '合肥转运中心', '贵州转运中心']
}, {
axisTick: 'none',
axisLine: 'none',
axisLabel: {
textStyle: {
color: '#ffffff',
fontSize: '14',
}
},
data: ['6', '5', '4', '3', '2', '1']
}, {
name: '分拨延误TOP 10',
nameGap: '50',
nameTextStyle: {
color: '#ffffff',
fontSize: '14',
},
axisLine: {
lineStyle: {
color: 'rgba(0,0,0,0)'
}
},
data: [],
}],
series: [{
name: '条',
type: 'bar',
yAxisIndex: 0,
data: [ 8, 14, 20, 32, 35, 42],
label: {
normal: {
show: true,
position: 'right',
textStyle: {
color: '#ffffff',
fontSize: '10',
}
}
},
barWidth: 10,
itemStyle: {
normal: {
color: function(params) {
var num = myColor.length;
return myColor[params.dataIndex % num]
},
}
},
z: 2
}, {
name: '白框',
type: 'bar',
yAxisIndex: 1,
barGap: '-50%',
data: [50,50,50,50,50,50],
barWidth: 10,
itemStyle: {
normal: {
color: '#0e2147',
barBorderRadius: 5,
}
},
z: 1
}, {
name: '外框',
type: 'bar',
yAxisIndex: 2,
barGap: '-500%',
data: [50,50,50,50,50,50],
barWidth: 12,
itemStyle: {
normal: {
color: function(params) {
var num = myColor.length;
return myColor[params.dataIndex % num]
},
barBorderRadius: 5,
}
},
z: 0
},
{
name: '外圆',
type: 'scatter',
hoverAnimation: false,
data: [ 0, 0, 0, 0, 0, 0],
yAxisIndex: 2,
symbolSize: 15,
itemStyle: {
normal: {
color: function(params) {
var num = myColor.length;
return myColor[params.dataIndex % num]
},
opacity: 1,
}
},
z: 2
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function char_3() {
var myChart = echarts.init(document.getElementById('chart_3'));
let seriesLineData = []
let LineData = [{
name: '破损件',
data: [5, 12, 3, 23, 4, 21, 12, 34, 23, 13, 45, 5, 12, 3, 23, 4, 21, 12, 34, 23, 13, 45, 3, 23, 4, 21, 12, 34],
color: ['#2773fa', '#051f48']
},
{
name: '丢失件',
data: [15, 2, 13, 20, 14, 20, 11, 24, 21, 33, 12, 2, 12, 42, 5, 6, 4, 15, 31, 23, 11, 22, 5, 33, 14, 31, 22, 14],
color: ['#14c3fc', '#022536']
},
{
name: '损坏件',
data: [12, 32, 32, 33, 11, 1, 33, 2, 23, 12, 35, 2, 13, 22, 23, 34, 12, 34, 11, 22, 12, 11, 23, 12, 22, 13, 12, 23],
color: ['#5deefe', '#01323a']
},
{
name: '拒收件',
data: [6, 2, 23, 12, 22, 21, 12, 23, 12, 44, 12, 22, 13, 23, 11, 12, 23, 45, 12, 5, 23, 12, 14, 23, 13, 23, 45, 12],
color: ['#fff369', '#353910']
},
{
name: '未签收',
data: [16, 22, 13, 22, 32, 11, 22, 12, 34, 11, 23, 12, 23, 12, 34, 11, 23, 23, 12, 23, 12, 34, 11, 22, 11, 22, 12, 23],
color: ['#ffaf48', '#0f1e21']
}
];
for (var i = 0; i < LineData.length; i++) {
seriesLineData.push({
name: LineData[i].name,
type: 'line',
smooth: true,
symbol: "none", //去掉折线点
stack: i, //数据区叠加 问题
symbolSize: 5, //折线点的大小
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: LineData[i].color[1]
}, {
offset: 0.8,
color: LineData[i].color[1]
},
{
offset: 1,
color: '#0f1e21' // 100% 处的颜色
}
], false),
}
},
itemStyle: {
normal: {
color: LineData[i].color[0],
borderColor: LineData[i].color[0],
borderWidth: 12
}
},
data: LineData[i].data,
})
}
option = {
/*backgroundColor: '#02121e',*/
title: {
text: '单位 / 件',
textStyle: {
fontSize: 12,
fontWeight: 'normal',
color: '#c7cbcd' //标题颜色
},
left: '2%',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
},
}
},
legend: {
icon: "roundRect",
orient: 'horizontal', //图例朝向
// data: ['空闲', '训练事件'],
textStyle: {
fontSize: 12, //字体大小
color: '#c7cbcd', //字体颜色
},
itemWidth: 10,
itemHeight: 5,
right: '3%' //距离右侧
},
grid: {
left: '3%',
top: '5%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: ['广州', '浙江', '上海', '福建', '江西', '安徽', '湖南', '湖北', '河南', '河北', '北京', '山西', '陕西', '贵州', '云南', '广西', '重庆', '四川', '内蒙', '辽宁', '黑龙江', '江西', '山东', '吉林', '青海', '海南', '宁夏', '天津'],
axisLabel: {
interval:0,
rotate:40,//倾斜角度
show: true,
textStyle: {
color: '#c7cbcd'
}
},
axisLine: {
lineStyle: {
color: '#0a2b52',
width: 0.5, //这里是为了突出显示加上的
}
}
}],
yAxis: [{
type: 'value',
// splitNumber : 10,
interval: 10, //坐标抽分割间隔
axisLine: {
onZero: false,
lineStyle: {
color: '#0a2b52',
width: 1, //这里是为了突出显示加上的
}
},
axisLabel: {
show: true,
textStyle: {
color: '#c7cbcd' //字体颜色
}
},
splitLine: { //保留网格线
show: true,
lineStyle: { //y轴网格线设置
color: '#0a2b52',
width: 1,
type: 'dashed'
}
},
}],
series: seriesLineData
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function char_4() {
var myChart = echarts.init(document.getElementById('maps'));
//var uploadedDataURL = "./js/data-1519279347346-BkslpCjwf.json";
var uploadedDataURL = "./js/data-1576140623415-kSH4vRQ1.json";
$.getJSON(uploadedDataURL, function(geoJson) {
echarts.registerMap('jiangxi', geoJson);
var chinaGeoCoordMap = {
"合肥市": [117.29, 32.0581],
"亳州市": [116.1914, 33.4698],
"六安市": [116.3123, 31.8329],
"安庆市": [116.7517, 30.5255],
"宣城市": [118.8062, 30.6244],
"宿州市": [117.5208, 33.6841],
"池州市": [117.3889, 30.2014],
"淮北市": [116.6968, 33.6896],
"淮南市": [116.7847, 32.7722],
"滁州市": [118.1909, 32.536],
"芜湖市": [118.3557, 31.0858],
"蚌埠市": [117.4109, 33.1073],
"铜陵市": [117.9382, 30.9375],
"阜阳市": [115.7629, 32.9919],
"马鞍山市": [118.6304, 31.5363],
"黄山市": [118.0481, 29.9542]
};
var chinaDatas = [
[{
name: '合肥市',
value: 0
}],
[{
name: '亳州市',
value: 0
}],
[{
name: '六安市',
value: 0
}],
[{
name: '安庆市',
value: 0
}],
[{
name: '宣城市',
value: 0
}],
[{
name: '宿州市',
value: 0
}],
[{
name: '池州市',
value: 0
}],
[{
name: '淮北市',
value: 0
}],
[{
name: '淮南市',
value: 0
}],
[{
name: '滁州市',
value: 0
}],
[{
name: '芜湖市',
value: 0
}],
[{
name: '蚌埠市',
value: 0
}],
[{
name: '铜陵市',
value: 0
}],
[{
name: '阜阳市',
value: 0
}],
[{
name: '马鞍山市',
value: 0
}],
[{
name: '黄山市',
value: 0
}]
];
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = chinaGeoCoordMap[dataItem[0].name];
var toCoord = [117.29, 32.0581];
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value
}, {
coord: toCoord,
}]);
}
}
return res;
};
var series = [];
[['合肥市', chinaDatas]].forEach(function(item, i) {
console.log(item)
series.push({
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 5, //图标大小
},
lineStyle: {
normal: {
width: 1, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: .3 //尾迹线条曲直度
}
},
data: convertData(item[1])
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { //涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 4 //波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
formatter: function(params) { //圆环显示文字
return params.data.name;
},
fontSize: 13
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function(val) {
return 5 + val[2] * 5; //圆环大小
},
itemStyle: {
normal: {
show: false,
color: '#f00'
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[0].name,
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
};
}),
},
//被攻击点
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: true,
position: 'right',
//offset:[5, 0],
color: '#0f0',
formatter: '{b}',
textStyle: {
color: "#0f0"
}
},
emphasis: {
show: true,
color: "#f60"
}
},
symbol: 'pin',
symbolSize: 50,
data: [{
name: item[0],
value: chinaGeoCoordMap[item[0]].concat([10]),
}],
}
);
});
option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(166, 200, 76, 0.82)',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function(params, ticket, callback) {
//根据业务自己拓展要显示的内容
var res = "";
var name = params.name;
var value = params.value[params.seriesIndex + 1];
res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
return res;
}
},
/*backgroundColor: "#013954",*/
visualMap: { //图例值控制
min: 0,
max: 1,
calculable: true,
show: true,
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'jiangxi',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: true, //是否允许缩放
itemStyle: {
normal: {
color: 'rgba(51, 69, 89, .5)', //地图背景色
borderColor: '#516a89', //省市边界线00fcff 516a89
borderWidth: 1
},
emphasis: {
color: 'rgba(37, 43, 61, .5)' //悬浮背景
}
}
},
series: series
};
myChart.setOption(option);
});
// 使用刚指定的配置项和数据显示图表。
//myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function char_5() {
var myChart = echarts.init(document.getElementById('chart_5'));
option = {
/*backgroundColor: '#141845',*/
title: {
text: '买家人员情况',
textStyle:{
color:'#fff',
},
x:'center',
y:'20'
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
title: [{
text: '买家人员情况',
textStyle: {
color: '#fff',
fontSize:'20'
},
x:'center',
y:'50'
},
{
text: '性别比例',
top: '20%',
left: '4%',
textStyle: {
color: '#fff',
},
},
{
text: '学历分布',
top: '20%',
left: '26%',
textStyle: {
color: '#fff',
},
},
{
text: '学历分布',
top: '20%',
left: '46%',
textStyle: {
color: '#fff',
},
},
{
text: '年龄分布',
top: '20%',
left: '85%',
textStyle: {
color: '#fff',
},
}
],
legend: [],
grid: {
left: '63%',
top: 'center',
right: '5%',
containLabel: true
},
xAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#fff'
}
},
},
yAxis: {
type: 'category',
data: ['70后', '80后', '90后', '00后'],
axisLine: {
lineStyle: {
color: "#fff"
}
},
},
series: [{
name: '人数',
type: 'bar',
data: [190, 520, 290, 20]
},
{
tooltip: {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
type: 'pie',
center: ['8%', '50%'],
radius: ['20%', '39%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'inside',
formatter: '{b},{d}%'
},
emphasis: {
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 189,
name: '男'
},
{
value: 48,
name: '女'
}
]
},
{
tooltip: {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
type: 'pie',
center: ['30%', '50%'],
radius: ['20%', '39%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'inside',
formatter: '{b},{d}%'
},
emphasis: {
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 124,
name: '本科'
},
{
value: 41,
name: '硕士'
},
{
value: 21,
name: '博士'
},
{
value: 20,
name: '其他'
}
]
},{
tooltip: {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
type: 'pie',
center: ['50%', '50%'],
radius: ['20%', '39%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'inside',
formatter: '{b},{d}%'
},
emphasis: {
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 124,
name: '本科'
},
{
value: 41,
name: '硕士'
},
{
value: 21,
name: '博士'
},
{
value: 20,
name: '其他'
}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function char_6() {
var myChart = echarts.init(document.getElementById('chart_6'));
let data = [{
name: "进场",
list: [{
date: "周一",
value: 20
},
{
date: "周二",
value: 13
},
{
date: "周三",
value: 15
},
{
date: "周四",
value: 18
},
{
date: "周五",
value: 6
},
{
date: "周六",
value: 11
},
{
date: "周日",
value: 14
}
]
},
{
name: "进场",
list: [{
date: "周一",
value: 20
},
{
date: "周二",
value: 13
},
{
date: "周三",
value: 15
},
{
date: "周四",
value: 18
},
{
date: "周五",
value: 6
},
{
date: "周六",
value: 11
},
{
date: "周日",
value: 14
}
]
}
];
let dateList=[];
let yData1 = [];
let yData2 = [];
data[0].list.forEach(function(item,index){
dateList.push(data[0].list[index].date);
yData1.push(data[0].list[index].value);
});
data[1].list.forEach(function(item,index){
yData2.push(data[1].list[index].value);
});
option = {
/*backgroundColor: 'rgb(3, 19, 52)',*/
color: ['#2ea5c3', '#e08f68'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(params) {
var tiplabel = params[0].name + '<br/>' +
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[0].color.colorStops[0].color + '"></span>' +
params[0].seriesName + ':' + params[0].value + '<br/>' +
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[1].color.colorStops[0].color + '"></span>' +
params[1].seriesName + ':' + params[1].value;
return tiplabel;
}
},
legend: {
data: [data[0].name, data[1].name],
left: 'right',
icon: "circle",
textStyle: {
color: '#fff'
}
},
grid: {
//top:80,
left: 20,
bottom: 20,
right: 40,
containLabel: true,
},
xAxis: {
type: 'category',
data: dateList,
axisLabel: {
tooltip: {
show: true,
},
inside: false,
textStyle: {
fontSize: 14
},
interval: 0,
color: 'rgba(255,255,255,0.6)'
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#0C1A5B',
}
},
},
yAxis: [{
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)'
}
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#0C1A5B',
}
},
axisLabel: {
textStyle: {
fontSize: 14
},
formatter: function(value) {
return value
},
color: 'rgba(255,255,255,0.6)'
}
}],
series: [{
name: data[0].name,
yAxisIndex: 0,
//barMinHeight:5,
barCategoryGap: '30%',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
color: '#fff',
fontSize: 14,
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#A43EE5'
}, {
offset: 1,
color: '#CE7C13'
}]),
opacity: 1,
shadowBlur: 5,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
type: 'bar',
data: yData1
},
{
name: data[1].name,
yAxisIndex: 0,
//barMinHeight:5,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
color: '#fff',
fontSize: 14
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00FFFF'
}, {
offset: 1,
color: '#004EFF'
}]),
opacity: 1,
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
type: 'bar',
data: yData2
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function char_7() {
var myChart = echarts.init(document.getElementById('chart_7'));
var data={
"title":["标题","单位"],
"legend":["a","b","c","d","e","f"],
"data":[[8,30,2825],[9,90,3355],[5,150,2675],[5,210,2495],[6,270,2265],[7,330,1945]]
}
option = {
title: [
{
text: data.title[0],
left: 'center',
textStyle:{
color:"#fff"
}
},{
text: data.title[1],
left: 'center',
top:'center',
textStyle:{
color:"#fff"
}
}
],
color: ['#d74e67', '#0092ff', '#eba954', '#21b6b9','#60a900','#01949b',' #f17677'],
legend: {
data: data.legend,
left:'center',
bottom: 10,
textStyle: {
color: '#ffffff'
},
},
polar: {},
angleAxis: {
show:false,
type: 'value',
min:0,
max:360
},
radiusAxis: {
show:false,
axisAngle: 0
},
series: []
};
for(let i=0;i<3;i++){
option.series.push({
type:'pie',
radius:[20*i+"%",20*(i+1)+"%"],
silent:true,
labelLine:{
normal:{
show:false
},
emphasis:{
show:false
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFFFFF'
}, {
offset: 0.10,
color: '#FFFFFF'
}, {
offset: 0.45,
color: '#DFDFFF'
}, {
offset: 0.55,
color: '#DFDFFF'
}, {
offset: 0.90,
color: '#FFFFFF'
},
{
offset: 1,
color: '#FFFFFF'
}
], false),
}
},
data:[{value:100}]
});
}
var size=[];
for(let i=0;i<data.data.length;i++){
size.push(data.data[i][2]);
}
for(let i=0;i<data.data.length;i++){
option.series.push({
name:data.legend[i],
coordinateSystem: 'polar',
angleAxisIndex: 0,
radiusAxisIndex: 0,
type: 'scatter',
symbolSize: function(d){
return d[2]*50/Math.max.apply(Math,size);
},
label:{
normal:{
show:true,
}
},
data: [data.data[i]]
})
}
setInterval(function () {
for(var i =0;i<data.data.length;i++){
data.data[i][1]++;
if(data.data[i][1]>=360){
data.data[i][1]=0;
}
}
// console.log(data.data[0][1])
myChart.setOption(option)
},100);
// 使用刚指定的配置项和数据显示图表。
//myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function char_8() {
var myChart = echarts.init(document.getElementById('chart_8'));
option = {
/*backgroundColor: '#2c343c',*/
title: {
text: '商品搜索占比',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
visualMap: {
show: false,
min: 500,
max: 600,
inRange: {
//colorLightness: [0, 1]
}
},
series: [{
name: '访问来源',
type: 'pie',
radius: '50%',
center: ['50%', '50%'],
color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
data: [{
value: 285,
name: '化妆品'
},
{
value: 410,
name: '衣服'
},
{
value: 274,
name: '手机'
},
{
value: 235,
name: '电脑'
}
].sort(function(a, b) {
return a.value - b.value
}),
roseType: 'radius',
label: {
normal: {
formatter: ['{c|{c}次}', '{b|{b}}'].join('\n'),
rich: {
c: {
color: 'rgb(241,246,104)',
fontSize: 20,
fontWeight:'bold',
lineHeight: 5
},
b: {
color: 'rgb(98,137,169)',
fontSize: 15,
height: 40
},
},
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgb(98,137,169)',
},
smooth: 0.2,
length: 10,
length2: 20,
}
},
itemStyle: {
normal: {
shadowColor: 'rgba(0, 0, 0, 0.8)',
shadowBlur: 50,
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
})