$(function(){
map();
leidatu();
wuran();
huaxing();
zhexian();
function leida1(){
var myChart = echarts.init(document.getElementById('map'));
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
})
function map(){
var myChart = echarts.init(document.getElementById('map'));
let iconRQ = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAUCAYAAABiS3YzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNCRkRBMEJBQzgwRjExRUFBNUI0RTMyMThEN0UxMzFEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNCRkRBMEJCQzgwRjExRUFBNUI0RTMyMThEN0UxMzFEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0JGREEwQjhDODBGMTFFQUE1QjRFMzIxOEQ3RTEzMUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0JGREEwQjlDODBGMTFFQUE1QjRFMzIxOEQ3RTEzMUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5mT42iAAABQ0lEQVR42mL8LabOQCQIBOL1xChkItJAkLp+IBajpqFWQCwPxJ7UNDQCSgdQy1BmIA6Bsl2AmJMahjoAsTiUzQPETtQwNAKN709IAwvUayZQ/hcg/o0k/x6Ig9D0+ABxKJT9HYh/oMm/BBm6GYitgTgfiBmJcLkkEK/CIXcGiGNB3v8JxIVQF31gIA/8AeIWaNK7gRymG4BYH4hPkGjgXSC2A+JaWNChR9QjqIJeIP5PhIGzgdgAiI8Tin2QbSVAvIOAgROBOA0auUQlKV4gtidgqBGp6RSUFrmIKA/ESDEUPcGfBOIUIH6Lln29iTVUCIjdkJJKExDbAPFcqJdPEMpd2AwF5TBWaFKxBeJ6qOHIqaMbmjrcsBUw2AwNh7rKAEeaBaWOMiD2BeJvQOxOyFBuaFJJwZZU0MBWaHCIo0sABBgAetA4Jx5t/ToAAAAASUVORK5CYII="
let data = [{
name: "北京",
value: [116.24, 39.55, 100]
},
{
name: "深圳",
value: [114.271522, 22.753644]
},
{
name: "重庆",
value: [106.54, 29.59]
},
{
name: "浙江",
value: [120.19, 30.26]
},
{
name: "上海",
value: [121.4648, 31.2891]
},
]
let LableData = [
{
name: "北京",
coords: [
[116.24, 39.55, 100],
[120.24, 46.55, 100]
], // 线条位置[开始位置，结束位置]
value: [1021, 120]
},
{
name: "深圳",
coords: [
[114.271522, 22.753644],
[118.24, 18.55, 100]
], // 线条位置[开始位置，结束位置]
value: [1021, 120]
},
{
name: "重庆",
coords: [
[106.54, 29.59],
[104.24, 35.55]
], // 线条位置[开始位置，结束位置]
value: [1021, 120]
},
{
name: "浙江",
coords: [
[120.19, 30.26],
[125.24, 27.55, 100]
], // 线条位置[开始位置，结束位置]
value: [1021, 120]
},
{
name: "上海",
coords: [
[121.4648, 31.2891],
[122.4648, 32.2891]
], // 线条位置[开始位置，结束位置]
value: [1201, 60]
},
];
option = {
/*backgroundColor: '#000f1e',*/
geo: {
map: 'china',
aspectScale: 0.85,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '100%',
itemStyle: {
normal: {
shadowColor: '#276fce',
shadowOffsetX: 0,
shadowOffsetY: 15,
opacity: 0.5,
},
emphasis: {
areaColor: '#276fce',
}
},
regions: [{
name: '南海诸岛',
itemStyle: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)',
normal: {
opacity: 0,
label: {
show: false,
color: "#009cc9",
}
},
},
label: {
show: false,
color: '#FFFFFF',
fontSize: 12,
},
}],
},
series: [
// 常规地图
{
type: 'map',
mapType: 'china',
aspectScale: 0.85,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '100%',
zoom: 1, //当前视角的缩放比例
// roam: true, //是否开启平游或缩放
scaleLimit: { //滚轮缩放的极限控制
min: 1,
max: 2
},
itemStyle: {
normal: {
areaColor: '#0c274b',
borderColor: '#1cccff',
borderWidth: 1.5
},
emphasis: {
areaColor: '#02102b',
label: {
color: "#fff"
}
}
},
},
{ //首都星图标
name: '首都',
type: 'scatter',
coordinateSystem: 'geo',
data: [{
name: '首都',
value: [116.24, 41.55, 100],
}, ],
symbol: iconRQ,
symbolSize: 20,
label: {
normal: {
show: false,
},
emphasis: {
show: false
}
},
},
// 区域散点图
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
symbolSize: 10,
rippleEffect: { //坐标点动画
period: 3,
scale: 5,
brushType: 'fill'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
color: '#b3e2f2',
fontWeight: "bold",
fontSize: 16
}
},
data: data,
itemStyle: { //坐标点颜色
normal: {
show: true,
color: '#ff8003',
shadowBlur: 20,
shadowColor: '#fff'
},
emphasis: {
areaColor: '#f00'
}
},
},
/*{
name: 'lable',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: [50,50],
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 9,
},
formatter (value){
return value.data.value[1]
}
}
},
itemStyle: {
normal: {
color: '#D8BC37', //标志颜色
}
},
data: data,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
zlevel: 1
},*/
{
type: 'lines',
zlevel: 3,
symbol: 'circle',
symbolSize: [5, 5],
color: '#ff8003',
opacity: 1,
label: {
show: true,
padding: [10, 20],
color: '#fff',
backgroundColor: "#1a3961",
borderColor: '#aee9fb',
borderWidth: 1,
borderRadius: 6,
formatter(params) {
let arr = [params.name, "废水污染：" + params.value[1] + "家", "废气污染：" + params.value[0] + "家"];
return arr.join("\n")
},
textStyle: {
align: 'left',
lineHeight: 20,
}
/* normal: {
textStyle: {
color: '#fff',
fontSize: 9,
},
formatter (value){
return value.data.value[2]
},
}*/
},
lineStyle: {
type: 'solid',
color: '#fff',
width: 0.5,
opacity: 1,
},
data: LableData,
},
]
};
myChart.on('click', function(params) {
console.log(params);
});
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
function leidatu(){
// var imgPath = ['http://bmob-cdn-15355.b0.upaiyun.com/2017/12/01/bee4341c4089af7980b87074a77479ad.png']
var myChart = echarts.init(document.getElementById('leida'));
option = {
color: ['#00c2ff', '#f9cf67', '#e92b77'],
legend: {
show: true,
// icon: 'circle',//图例形状
bottom: 0,
center: 0,
itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
textStyle: {
fontSize: 12,
color: '#ade3ff'
},
data: ['2016', '2017', '2018'],
},
radar: [{
indicator: [{
text: '重庆市',
max: 100
},
{
text: '北京市',
max: 100
},
{
text: '上海市',
max: 100
},
{
text: '广东省',
max: 100
},
{
text: '浙江省',
max: 100
}
],
textStyle: {
color: 'red'
},
center: ['50%', '50%'],
radius: 60,
startAngle: 90,
splitNumber: 3,
orient: 'horizontal', // 图例列表的布局朝向,默认'horizontal'为横向,'vertical'为纵向.
// shape: 'circle',
// backgroundColor: {
// image:imgPath[0]
// },
name: {
formatter: '{value}',
textStyle: {
fontSize: 12, //外圈标签字体大小
color: '#5b81cb' //外圈标签字体颜色
}
},
splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
show: true,
areaStyle: { // 分隔区域的样式设置。
color: ['#141c42', '#141c42'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
}
},
// axisLabel:{//展示刻度
// show: true
// },
axisLine: { //指向外圈文本的分隔线样式
lineStyle: {
color: '#153269'
}
},
splitLine: {
lineStyle: {
color: '#113865', // 分隔线颜色
width: 1, // 分隔线线宽
}
}
}, ],
series: [{
name: '雷达图',
type: 'radar',
itemStyle: {
emphasis: {
lineStyle: {
width: 4
}
}
},
data: [{
name: '2016',
value: [85, 65, 55, 90, 82],
areaStyle: {
normal: { // 单项区域填充样式
color: {
type: 'linear',
x: 0, //右
y: 0, //下
x2: 1, //左
y2: 1, //上
colorStops: [{
offset: 0,
color: '#00c2ff'
}, {
offset: 0.5,
color: 'rgba(0,0,0,0)'
}, {
offset: 1,
color: '#00c2ff'
}],
globalCoord: false
},
opacity: 1 // 区域透明度
}
},
symbolSize: 2.5, // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
label: { // 单个拐点文本的样式设置
normal: {
show: true, // 单个拐点文本的样式设置。[ default: false ]
position: 'top', // 标签的位置。[ default: top ]
distance: 2, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
color: '#6692e2', // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
fontSize: 14, // 文字的字体大小
formatter:function(params) {
return params.value;
}
}
},
itemStyle: {
normal: { //图形悬浮效果
borderColor: '#00c2ff',
borderWidth: 2.5
}
},
// lineStyle: {
// normal: {
// opacity: 0.5// 图形透明度
// }
// }
}, {
name: '2017',
value: [50, 20, 45, 30, 75],
symbolSize: 2.5,
itemStyle: {
normal: {
borderColor: '#f9cf67',
borderWidth: 2.5,
}
},
areaStyle: {
normal: { // 单项区域填充样式
color: {
type: 'linear',
x: 0, //右
y: 0, //下
x2: 1, //左
y2: 1, //上
colorStops: [{
offset: 0,
color: '#f9cf67'
}, {
offset: 0.5,
color: 'rgba(0,0,0,0)'
}, {
offset: 1,
color: '#f9cf67'
}],
globalCoord: false
},
opacity: 1 // 区域透明度
}
},
// lineStyle: {
// normal: {
// opacity: 0.5// 图形透明度
// }
// }
}, {
name: '2018',
value: [37, 80, 12, 50, 25],
symbolSize: 2.5,
itemStyle: {
normal: {
borderColor: '#e92b77',
borderWidth: 2.5,
}
},
areaStyle: {
normal: { // 单项区域填充样式
color: {
type: 'linear',
x: 0, //右
y: 0, //下
x2: 1, //左
y2: 1, //上
colorStops: [{
offset: 0,
color: '#e92b77'
}, {
offset: 0.5,
color: 'rgba(0,0,0,0)'
}, {
offset: 1,
color: '#e92b77'
}],
globalCoord: false
},
opacity: 1 // 区域透明度
}
}
}]
}, ]
};
myChart.setOption(option);
}
function wuran(){
var myChart = echarts.init(document.getElementById('wuran'));
var salvProName =["企业总数","废气企业","废水企业","铅污染","铬污染"];
var salvProValue =[117,74,72,67,55];
var salvProMax =[];//背景按最大值
for (let i = 0; i < salvProValue.length; i++) {
salvProMax.push(salvProValue[0])
}
option = {
grid: {
left: '2%',
right: '2%',
bottom: '-6%',
top: '8%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: function(params) {
return params[0].name + ' : ' + params[0].value
}
},
xAxis: {
show: false,
type: 'value'
},
yAxis: [{
type: 'category',
inverse: true,
axisLabel: {
show: true,
textStyle: {
color: '#fff'
},
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
data: salvProName
}, {
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
textStyle: {
color: '#ffffff',
fontSize: '12'
},
},
data:salvProValue
}],
series: [{
name: '值',
type: 'bar',
zlevel: 1,
itemStyle: {
normal: {
barBorderRadius: 30,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgb(57,89,255,1)'
}, {
offset: 1,
color: 'rgb(46,200,207,1)'
}]),
},
},
barWidth: 10,
data: salvProValue
},
{
name: '背景',
type: 'bar',
barWidth: 10,
barGap: '-100%',
data: salvProMax,
itemStyle: {
normal: {
color: 'rgba(24,31,68,1)',
barBorderRadius: 30,
}
},
},
]
};
myChart.setOption(option);
}
function huaxing(){
var myChart = echarts.init(document.getElementById('huaxing'));
var dataStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
shadowBlur: 0,
shadowColor: '#203665'
}
};
option = {
series: [{
name: '第一个圆环',
type: 'pie',
clockWise: false,
radius: [45, 55],
itemStyle: dataStyle,
hoverAnimation: false,
center: ['15%', '50%'],
data: [{
value: 25,
label: {
normal: {
rich: {
a: {
color: '#3a7ad5',
align: 'center',
fontSize: 14,
fontWeight: "bold"
},
b: {
color: '#fff',
align: 'center',
fontSize: 12
}
},
formatter: function(params){
return "{b|饮用水质}\n\n"+"{a|"+params.value+"个}"+"\n\n{b|增长2%}";
},
position: 'center',
show: true,
textStyle: {
fontSize: '12',
fontWeight: 'normal',
color: '#fff'
}
}
},
itemStyle: {
normal: {
color: '#2c6cc4',
shadowColor: '#2c6cc4',
shadowBlur: 0
}
}
}, {
value: 75,
name: 'invisible',
itemStyle: {
normal: {
color: '#24375c'
},
emphasis: {
color: '#24375c'
}
}
}]
}, {
name: '第二个圆环',
type: 'pie',
clockWise: false,
radius: [45, 55],
itemStyle: dataStyle,
hoverAnimation: false,
center: ['50%', '50%'],
data: [{
value: 50,
label: {
normal: {
rich: {
a: {
color: '#d03e93',
align: 'center',
fontSize: 14,
fontWeight: "bold"
},
b: {
color: '#fff',
align: 'center',
fontSize: 12
}
},
formatter: function(params){
return "{b|生活用水}\n\n"+"{a|"+params.value+"个}"+"\n\n{b|增长2%}";
},
position: 'center',
show: true,
textStyle: {
fontSize: '12',
fontWeight: 'normal',
color: '#fff'
}
}
},
itemStyle: {
normal: {
color: '#ef45ac',
shadowColor: '#ef45ac',
shadowBlur: 0
}
}
}, {
value: 50,
name: 'invisible',
itemStyle: {
normal: {
color: '#412a4e'
},
emphasis: {
color: '#412a4e'
}
}
}]
}, {
name: '第三个圆环',
type: 'pie',
clockWise: false,
radius: [45, 55],
itemStyle: dataStyle,
hoverAnimation: false,
center: ['85%', '50%'],
data: [{
value: 75,
label: {
normal: {
rich: {
a: {
color: '#603dd0',
align: 'center',
fontSize: 14,
fontWeight: "bold"
},
b: {
color: '#fff',
align: 'center',
fontSize: 12
}
},
formatter: function(params){
return "{b|自来水}\n\n"+"{a|"+params.value+"个}"+"\n\n{b|增长2%}";
},
position: 'center',
show: true,
textStyle: {
fontSize: '12',
fontWeight: 'normal',
color: '#fff'
}
}
},
itemStyle: {
normal: {
color: '#613fd1',
shadowColor: '#613fd1',
shadowBlur: 0
}
}
}, {
value: 25,
name: 'invisible',
itemStyle: {
normal: {
color: '#453284'
},
emphasis: {
color: '#453284'
}
}
}]
}]
}
myChart.setOption(option);
}
function zhexian() {
var myChart = echarts.init(document.getElementById('zhexian'));
dataText = [{
name: '上游流速',
type: 'line',
smooth: true,
symbolSize: 8,
data: [127, 224, 120, 278, 227, 237],
barWidth: '30%',
itemStyle: {
normal: {
color: '#f0c725'
}
}
}, {
name: '下游流速',
type: 'line',
smooth: true,
symbolSize: 8,
data: [27, 124, 70, 178, 127, 157],
barWidth: '30%',
itemStyle: {
normal: {
color: '#16f892'
}
}
},
{
name: '平均流速',
type: 'line',
smooth: true,
symbolSize: 8,
data: [127, 74, 120, 99, 130, 355],
barWidth: '30%',
itemStyle: {
normal: {
color: '#0BE3FF'
}
}
}
]
dataObj = {
year: ['2015', '2016', '2017', '2018', '2019', '2020'],
data: {
value: [{
name: '上游流速',
value: [127, 224, 250, 278, 227, 355]
}, {
name: '下游流速',
value: [27, 124, 70, 178, 127, 157]
}, {
name: '平均流速',
value: [127, 74, 120, 99, 130, 50]
}]
}
}
let dataArr = []
dataObj.data.value.map(item => {
let datachild = []
let newArr = {
name: item.name,
type: 'line',
smooth: true,
symbolSize: 8,
data: item.value,
barWidth: '30%',
itemStyle: {
normal: {
color: item.name === '上游流速' ? '#f0c725' : item.name === '下游流速' ? '#0BE3FF' : '#16f892'
}
}
}
dataArr.push(newArr)
})
option = {
color: ['#f0c725', '#16f892'],
title: {
left: 'center',
text: '',
textStyle: {
color: '#FFFFFF',
fontSize: '14',
}
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
x: 'center',
top: '25',
textStyle: {
color: '#c1cadf',
"fontSize": 14
}
},
grid: {
left: '6%',
right: '4%',
top: '25%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'center'
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: dataObj.year,
axisLine: {
lineStyle: {
color: 'rgba(240,199,37,0.5)'
}
},
axisLabel: {
interval: 0,
color: '#c1cadf',
fontSize: '15'
}
}],
yAxis: [{
type: 'value',
name: '(m3)',
nameTextStyle: {
color: '#c1cadf',
align: 'right',
lineHeight: 10
},
axisLine: {
lineStyle: {
color: 'rgba(240,199,37,0.5)'
}
},
axisLabel: {
interval: 0,
color: '#c1cadf',
fontSize: '15'
},
splitLine: {
show: false
}
}],
series: dataArr
};
/*var myChart = echarts.init(document.getElementById('channel_handle_detail'));
myChart.clear();
if(data.handleTimeData.length>0){
myChart.setOption(option);
}else{
noDataTip($("#channel_handle_detail"));
}*/
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}