|
|
/*Echarts图表封装*/
|
|
|
|
|
|
//横向柱状图
|
|
|
const horizontalBarChart = (res, ids) => {
|
|
|
|
|
|
let mycharts = echarts.init(ids);
|
|
|
|
|
|
//参考：https://www.makeapie.com/editor.html?c=xqjNqqjc_U
|
|
|
let datas = [
|
|
|
{ranking: 1, station: "SC227", value: 199999},
|
|
|
{ranking: 2, station: "SC228", value: 104970},
|
|
|
{ranking: 3, station: "SC229", value: 29034},
|
|
|
{ranking: 4, station: "SC223", value: 23489},
|
|
|
{ranking: 5, station: "SC224", value: 18203},
|
|
|
];
|
|
|
let seriesName = "产量";
|
|
|
|
|
|
function contains(arr, dst) {
|
|
|
var i = arr.length;
|
|
|
while ((i -= 1)) {
|
|
|
if (arr[i] == dst) {
|
|
|
return i;
|
|
|
}
|
|
|
}
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
let attackSourcesColor = [
|
|
|
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
|
|
{offset: 0, color: "#EB3B5A"},
|
|
|
{offset: 1, color: "#FE9C5A"},
|
|
|
]),
|
|
|
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
|
|
{offset: 0, color: "#FA8231"},
|
|
|
{offset: 1, color: "#FFD14C"},
|
|
|
]),
|
|
|
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
|
|
{offset: 0, color: "#F7B731"},
|
|
|
{offset: 1, color: "#FFEE96"},
|
|
|
]),
|
|
|
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
|
|
{offset: 0, color: "#395CFE"},
|
|
|
{offset: 1, color: "#2EC7CF"},
|
|
|
]),
|
|
|
];
|
|
|
let attackSourcesColor1 = [
|
|
|
"#EB3B5A",
|
|
|
"#FA8231",
|
|
|
"#F7B731",
|
|
|
"#3860FC",
|
|
|
"#1089E7",
|
|
|
"#F57474",
|
|
|
"#56D0E3",
|
|
|
"#1089E7",
|
|
|
"#F57474",
|
|
|
"#1089E7",
|
|
|
"#F57474",
|
|
|
"#F57474",
|
|
|
];
|
|
|
let stationData = [];
|
|
|
let values = [];
|
|
|
|
|
|
res.datas.forEach(function (it, index) {
|
|
|
stationData.push(it.station);
|
|
|
values.push(it.value);
|
|
|
});
|
|
|
|
|
|
function dataFormat(data) {
|
|
|
let arr = [];
|
|
|
data.forEach(function (item, i) {
|
|
|
let itemStyle = {
|
|
|
color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
|
|
|
};
|
|
|
arr.push({
|
|
|
value: item,
|
|
|
itemStyle: itemStyle,
|
|
|
});
|
|
|
});
|
|
|
return arr;
|
|
|
}
|
|
|
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
type: "shadow",
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
top: "9%",
|
|
|
left: "-9%",
|
|
|
right: "4%",
|
|
|
bottom: "3%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: "value",
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
inverse: true,
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
data: stationData,
|
|
|
axisLabel: {
|
|
|
margin: 30,
|
|
|
fontSize: 10,
|
|
|
align: "left",
|
|
|
padding: [2, 0, 0, 0],
|
|
|
color: "#000",
|
|
|
|
|
|
formatter: function (value, index) {
|
|
|
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
type: "category",
|
|
|
inverse: true,
|
|
|
axisTick: "none",
|
|
|
axisLine: "none",
|
|
|
show: true,
|
|
|
axisLabel: {
|
|
|
textStyle: {
|
|
|
color: "#A8A6AB",
|
|
|
fontSize: "12",
|
|
|
},
|
|
|
},
|
|
|
data: dataFormat(values),
|
|
|
},
|
|
|
|
|
|
{
|
|
|
type: "category",
|
|
|
inverse: true,
|
|
|
offset: -10,
|
|
|
position: "left",
|
|
|
axisTick: "none",
|
|
|
axisLine: "none",
|
|
|
show: true,
|
|
|
axisLabel: {
|
|
|
interval: 0,
|
|
|
color: ["#A8A6AB"],
|
|
|
align: "left",
|
|
|
verticalAlign: "bottom",
|
|
|
lineHeight: 32,
|
|
|
fontSize: 12,
|
|
|
},
|
|
|
data: dataFormat(stationData),
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
zlevel: 1,
|
|
|
name: seriesName,
|
|
|
type: "bar",
|
|
|
barWidth: 15,
|
|
|
data: dataFormat(values),
|
|
|
align: "center",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
barBorderRadius: 10,
|
|
|
},
|
|
|
},
|
|
|
label: {
|
|
|
show: false,
|
|
|
fontSize: 12,
|
|
|
color: "#A8A6AB",
|
|
|
textBorderWidth: 2,
|
|
|
padding: [2, 0, 0, 0],
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
name: seriesName,
|
|
|
type: "bar",
|
|
|
barWidth: 15,
|
|
|
barGap: "-100%",
|
|
|
data: res.plan,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#05325F",
|
|
|
//width:"100%",
|
|
|
fontSize: 12,
|
|
|
barBorderRadius: 30,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
mycharts.setOption(option);
|
|
|
$(window).resize(mycharts.resize);
|
|
|
}
|
|
|
|
|
|
//折线面积图
|
|
|
const brokenLineAreaDiagram = (res, ids) => {
|
|
|
let mycharts = echarts.init(ids);
|
|
|
|
|
|
let option = {
|
|
|
tooltip: {},
|
|
|
grid: {
|
|
|
top: "8%",
|
|
|
left: "1%",
|
|
|
right: "1%",
|
|
|
bottom: "8%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
legend: {
|
|
|
itemGap: 50,
|
|
|
data: ["人员出入总数"],
|
|
|
textStyle: {
|
|
|
color: "#f9f9f9",
|
|
|
borderColor: "#fff",
|
|
|
},
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
boundaryGap: true,
|
|
|
axisLine: {
|
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: "#2A3852",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
//坐标轴刻度标签的相关设置
|
|
|
textStyle: {
|
|
|
color: "#A8A6AB",
|
|
|
margin: 15,
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
data: [
|
|
|
"07",
|
|
|
"08",
|
|
|
"09",
|
|
|
"10",
|
|
|
"11",
|
|
|
"12",
|
|
|
"13",
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
min: 0,
|
|
|
// max: 140,
|
|
|
splitNumber: 7,
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: "#0a3256",
|
|
|
},
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: false,
|
|
|
margin: 20,
|
|
|
textStyle: {
|
|
|
color: "#A8A6AB",
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "小时产量",
|
|
|
type: "line",
|
|
|
smooth: false, //是否平滑曲线显示
|
|
|
showAllSymbol: true,
|
|
|
symbol: "emptyCircle",
|
|
|
symbolSize: 6,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
color: "#13D064", // 线条颜色
|
|
|
},
|
|
|
borderColor: "#f0f",
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#28ffb3",
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#28ffb3",
|
|
|
},
|
|
|
},
|
|
|
tooltip: {
|
|
|
show: false,
|
|
|
},
|
|
|
areaStyle: {
|
|
|
//区域填充样式
|
|
|
normal: {
|
|
|
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
0,
|
|
|
0,
|
|
|
1,
|
|
|
[
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "rgba(19,208,100,1)",
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "rgba(0,0,0, 0)",
|
|
|
},
|
|
|
],
|
|
|
false
|
|
|
),
|
|
|
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
|
|
|
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|
|
},
|
|
|
},
|
|
|
data: [100, 120, 110, 60, 70, 130, 150],
|
|
|
}
|
|
|
],
|
|
|
};
|
|
|
|
|
|
mycharts.setOption(option);
|
|
|
$(window).resize(mycharts.resize);
|
|
|
}
|
|
|
|
|
|
//柱状图
|
|
|
const threeDimensionalCylindrical = (res, ids) => {
|
|
|
let mycharts = echarts.init(ids);
|
|
|
|
|
|
|
|
|
let xAxisData = [];
|
|
|
let seriesData1 = [];
|
|
|
let sum = 0;
|
|
|
|
|
|
let barTopColor = ["#02c3f1"];
|
|
|
let barBottomColor = [
|
|
|
"rgba(2,195,241,0.1)",
|
|
|
];
|
|
|
res.datas.forEach((item) => {
|
|
|
xAxisData.push(item.name);
|
|
|
seriesData1.push(item.value);
|
|
|
sum += item.value;
|
|
|
});
|
|
|
let option = {
|
|
|
|
|
|
grid: {
|
|
|
top: "15%",
|
|
|
bottom: "20%",
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: xAxisData,
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
margin: 25,
|
|
|
align: "center",
|
|
|
textStyle: {
|
|
|
fontSize: 14,
|
|
|
color: "#A8A6AB",
|
|
|
rich: {
|
|
|
a: {
|
|
|
fontSize: 12,
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
b: {
|
|
|
height: 20,
|
|
|
fontSize: 14,
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
interval: 0,
|
|
|
},
|
|
|
yAxis: {
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "柱顶部",
|
|
|
type: "pictorialBar",
|
|
|
symbolSize: [26, 10],
|
|
|
symbolOffset: [0, -5],
|
|
|
z: 12,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: function (params) {
|
|
|
return barTopColor[0];
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
fontSize: 16,
|
|
|
},
|
|
|
symbolPosition: "end",
|
|
|
data: seriesData1,
|
|
|
},
|
|
|
{
|
|
|
name: "柱底部",
|
|
|
type: "pictorialBar",
|
|
|
symbolSize: [26, 10],
|
|
|
symbolOffset: [0, 5],
|
|
|
z: 12,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: function (params) {
|
|
|
return barTopColor[0];
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
data: seriesData1,
|
|
|
},
|
|
|
{
|
|
|
name: "第一圈",
|
|
|
type: "pictorialBar",
|
|
|
symbolSize: [47, 16],
|
|
|
symbolOffset: [0, 11],
|
|
|
z: 11,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "transparent",
|
|
|
borderColor: barTopColor[0],
|
|
|
borderWidth: 4,
|
|
|
},
|
|
|
},
|
|
|
data: [seriesData1[0], "", ""],
|
|
|
},
|
|
|
{
|
|
|
name: "第一圈",
|
|
|
type: "pictorialBar",
|
|
|
symbolSize: [47, 16],
|
|
|
symbolOffset: [0, 11],
|
|
|
z: 11,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "transparent",
|
|
|
borderColor: barTopColor[0],
|
|
|
borderWidth: 4,
|
|
|
},
|
|
|
},
|
|
|
data: ["", seriesData1[1], ""],
|
|
|
},
|
|
|
{
|
|
|
name: "第一圈",
|
|
|
type: "pictorialBar",
|
|
|
symbolSize: [47, 16],
|
|
|
symbolOffset: [0, 11],
|
|
|
z: 11,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "transparent",
|
|
|
borderColor: barTopColor[0],
|
|
|
borderWidth: 4,
|
|
|
},
|
|
|
},
|
|
|
data: ["", "", seriesData1[2]],
|
|
|
},
|
|
|
{
|
|
|
name: "第二圈",
|
|
|
type: "pictorialBar",
|
|
|
symbolSize: [62, 22],
|
|
|
symbolOffset: [0, 17],
|
|
|
z: 10,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "transparent",
|
|
|
borderColor: barTopColor[0],
|
|
|
borderWidth: 4,
|
|
|
},
|
|
|
},
|
|
|
data: [seriesData1[0], "", ""],
|
|
|
},
|
|
|
{
|
|
|
name: "第二圈",
|
|
|
type: "pictorialBar",
|
|
|
symbolSize: [62, 22],
|
|
|
symbolOffset: [0, 17],
|
|
|
z: 10,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "transparent",
|
|
|
borderColor: barTopColor[0],
|
|
|
borderWidth: 4,
|
|
|
},
|
|
|
},
|
|
|
data: ["", seriesData1[1], ""],
|
|
|
},
|
|
|
{
|
|
|
name: "第二圈",
|
|
|
type: "pictorialBar",
|
|
|
symbolSize: [62, 22],
|
|
|
symbolOffset: [0, 17],
|
|
|
z: 10,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "transparent",
|
|
|
borderColor: barTopColor[0],
|
|
|
borderWidth: 4,
|
|
|
},
|
|
|
},
|
|
|
data: ["", "", seriesData1[2]],
|
|
|
},
|
|
|
|
|
|
{
|
|
|
type: "bar",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: function (params) {
|
|
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: barTopColor[0],
|
|
|
},
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: barBottomColor[0],
|
|
|
},
|
|
|
]);
|
|
|
},
|
|
|
opacity: 0.8,
|
|
|
},
|
|
|
},
|
|
|
z: 16,
|
|
|
silent: true,
|
|
|
barWidth: 26,
|
|
|
barGap: "-100%", // Make series be overlap
|
|
|
data: seriesData1,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
|
|
|
mycharts.setOption(option);
|
|
|
$(window).resize(mycharts.resize);
|
|
|
}
|
|
|
|