|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
|
var time1 = () => {
|
|
|
}
|
|
|
var time2 = () => {
|
|
|
}
|
|
|
var time3 = () => {
|
|
|
}
|
|
|
var time4 = () => {
|
|
|
}
|
|
|
// 随机数
|
|
|
const random = (val = 1) => {
|
|
|
return Math.ceil(Math.random() * val)
|
|
|
}
|
|
|
|
|
|
// 水平圆角带背景柱状图
|
|
|
const horizontalRoundedBarChartWithBackground = function (data, id) {
|
|
|
let charts = echarts.init(id);
|
|
|
if (!data) {
|
|
|
data = {
|
|
|
yName: ["设备001", "设备001", "设备001", "设备001", "设备001"],
|
|
|
xData: [53, 24, 66, 23, 100],
|
|
|
xDataName: "达成率",
|
|
|
}
|
|
|
}
|
|
|
let backGround = []
|
|
|
data.xData.forEach(() => {
|
|
|
backGround.push(100)
|
|
|
})
|
|
|
let option = {
|
|
|
grid: {
|
|
|
left: "0%",
|
|
|
right: "12%",
|
|
|
bottom: "0%",
|
|
|
top: "0%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
type: "none",
|
|
|
},
|
|
|
textStyle: {
|
|
|
fontSize: 0.8 * vw
|
|
|
},
|
|
|
formatter: function (params) {
|
|
|
return (
|
|
|
params[0].name +
|
|
|
"<br/>" +
|
|
|
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
|
|
|
params[0].seriesName +
|
|
|
" : " + params[0].value + '%'
|
|
|
);
|
|
|
},
|
|
|
},
|
|
|
dataZoom: [],
|
|
|
xAxis: {
|
|
|
show: false,
|
|
|
type: "value",
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
inverse: true,
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
data: data.yName,
|
|
|
}
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: data.xDataName,
|
|
|
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: vw,
|
|
|
data: data.xData,
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "right",
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
formatter: '{c}%'
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
name: "背景",
|
|
|
type: "bar",
|
|
|
barWidth: vw,
|
|
|
barGap: "-100%",
|
|
|
data: backGround,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "rgba(24,31,68,1)",
|
|
|
barBorderRadius: 30,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
// if (data.xData?.length >= 3) {
|
|
|
// option.dataZoom.push({
|
|
|
// show: true,
|
|
|
// type: 'slider',
|
|
|
// yAxisIndex: 0,
|
|
|
// width: 0.75 * vw,
|
|
|
// start: 0,
|
|
|
// end: 1 / (data.xData.length / 4) * 100,
|
|
|
// textStyle: {
|
|
|
// fontSize: 0,
|
|
|
// color: 'rgba(0,0,0,0)'
|
|
|
// }
|
|
|
// })
|
|
|
// }
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
|
|
|
clearInterval(time1)
|
|
|
let charts = echarts.init(id);
|
|
|
if (!data) {
|
|
|
data = {
|
|
|
yNameOne: ["设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001"],
|
|
|
yData: [41, 99, 32, 41, 24, 4, 16, 64, 18],
|
|
|
xDataName: "达成率",
|
|
|
status: [1, 1, 1, 1, 1, 1, 1, 1, 1]
|
|
|
}
|
|
|
}
|
|
|
let myColor = ["green", "red", "yellow", "blue", "#8B78F6"];
|
|
|
let bgBar = []
|
|
|
data.yData.forEach(() => {
|
|
|
bgBar.push(100)
|
|
|
})
|
|
|
let option = {
|
|
|
grid: {
|
|
|
// left: "-10%",
|
|
|
left: "0%",
|
|
|
right: "8%",
|
|
|
bottom: "0%",
|
|
|
top: "0%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
dataZoom: [],
|
|
|
xAxis: {
|
|
|
show: false,
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
show: true,
|
|
|
data: data.yNameOne,
|
|
|
inverse: true,
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: "#fff",
|
|
|
// margin:150,
|
|
|
fontSize: 0.75 * vw,
|
|
|
textStyle: {
|
|
|
textAlign: 'center'
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "条",
|
|
|
type: "bar",
|
|
|
yAxisIndex: 0,
|
|
|
data: data.yData,
|
|
|
barWidth: '80%',
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
barBorderRadius: 30,
|
|
|
color: function (params) {
|
|
|
return myColor[data.status[params.dataIndex]];
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
name: "框",
|
|
|
type: "bar",
|
|
|
yAxisIndex: 0,
|
|
|
barGap: "-100%",
|
|
|
data: bgBar,
|
|
|
barWidth: '80%',
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "right",
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
formatter: function (val, index, e) {
|
|
|
return data.yData[val.dataIndex] + '%'
|
|
|
}
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "none",
|
|
|
borderColor: "#00c1de",
|
|
|
borderWidth: 1,
|
|
|
barBorderRadius: 15,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
if (data.yNameOne.length > 8) {
|
|
|
option.dataZoom.push({
|
|
|
show: false,
|
|
|
type: 'slider',
|
|
|
bottom: '0%',
|
|
|
yAxisIndex: 0,
|
|
|
height: 12,
|
|
|
start: 0,
|
|
|
end: 1 / (data.yNameOne.length / 9) * 100,
|
|
|
textStyle: {
|
|
|
fontSize: 0,
|
|
|
color: 'rgba(0,0,0,0)'
|
|
|
}
|
|
|
})
|
|
|
|
|
|
let step = 1 / (data.yNameOne.length / 9) * 100
|
|
|
time1 = setInterval(() => {
|
|
|
option.dataZoom[0].end += step
|
|
|
option.dataZoom[0].start += step
|
|
|
if (option.dataZoom[0].start >= 100) {
|
|
|
option.dataZoom[0].start = 0
|
|
|
option.dataZoom[0].end = step
|
|
|
}
|
|
|
if (option.dataZoom[0].end >= 100) {
|
|
|
option.dataZoom[0].end = 100
|
|
|
option.dataZoom[0].start = option.dataZoom[0].end - step
|
|
|
}
|
|
|
charts.setOption(option);
|
|
|
}, 6000)
|
|
|
// time()
|
|
|
}
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
|
|
|
// 柱状+折线图
|
|
|
const barChartAndLineChart = function (data, id, rotate = 0) {
|
|
|
let charts = echarts.init(id);
|
|
|
if (!data) {
|
|
|
data = {
|
|
|
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
|
|
yDataOne: [200, 382, 102, 267, 186, 315, 316],
|
|
|
yDataOneName: "成品数量",
|
|
|
yDataTwo: [382, 102, 186, 200, 102, 186, 315],
|
|
|
yDataTwoName: "成品数量",
|
|
|
}
|
|
|
}
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
textStyle: {
|
|
|
fontSize: 0.8 * vw
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
top: "15%",
|
|
|
left: "1%",
|
|
|
right: "1%",
|
|
|
bottom: "8%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
legend: {
|
|
|
show: false,
|
|
|
itemGap: 50,
|
|
|
data: ["注册总量", "最新注册量"],
|
|
|
textStyle: {
|
|
|
color: "#f9f9f9",
|
|
|
borderColor: "#fff",
|
|
|
},
|
|
|
},
|
|
|
dataZoom: [],
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
boundaryGap: true,
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: '#fff',
|
|
|
opacity: 0.3,
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
rotate: rotate,
|
|
|
interval: 0,
|
|
|
//坐标轴刻度标签的相关设置
|
|
|
textStyle: {
|
|
|
color: "#d1e6eb",
|
|
|
margin: 15,
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
type: 'dashed',
|
|
|
color: '#777777',
|
|
|
opacity: 0.3,
|
|
|
},
|
|
|
},
|
|
|
data: data.xName,
|
|
|
},
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
min: 0,
|
|
|
// max: 140,
|
|
|
splitNumber: 7,
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
type: 'dashed',
|
|
|
color: '#777777',
|
|
|
opacity: 0.3,
|
|
|
},
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: '#fff',
|
|
|
opacity: 0.3,
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
margin: 20,
|
|
|
textStyle: {
|
|
|
color: "#d1e6eb",
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: data.yDataOneName || '',
|
|
|
type: "line",
|
|
|
// smooth: true, //是否平滑曲线显示
|
|
|
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
|
showAllSymbol: true,
|
|
|
symbol: "emptyCircle",
|
|
|
symbolSize: 6,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "#8fb9d7",
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "#0F59E6",
|
|
|
},
|
|
|
]),
|
|
|
},
|
|
|
borderColor: "#f0f",
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#A5DBF3",
|
|
|
},
|
|
|
},
|
|
|
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(12,120,249,0.4)",
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "rgba(0,0,0, 0)",
|
|
|
},
|
|
|
],
|
|
|
false
|
|
|
),
|
|
|
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
|
|
|
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|
|
},
|
|
|
},
|
|
|
data: data.yDataOne || [],
|
|
|
},
|
|
|
{
|
|
|
name: data.yDataTwoName,
|
|
|
type: "bar",
|
|
|
barWidth: vw,
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
barBorderRadius: 5,
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "#0CAFF6",
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "#0F59E6",
|
|
|
},
|
|
|
]),
|
|
|
},
|
|
|
},
|
|
|
data: data.yDataTwo,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
const barChartAndLineChartTwo = function (data, id) {
|
|
|
let charts = echarts.init(id);
|
|
|
if (!data) {
|
|
|
data = {
|
|
|
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
|
|
yDataOne: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
|
|
|
yDataOneName: "百分比",
|
|
|
yDataTwo: [382, 102, 186, 200, 102, 186, 315, 255, 527, 837, 587, 173],
|
|
|
yDataTwoName: "成品数量",
|
|
|
}
|
|
|
}
|
|
|
let option = {
|
|
|
grid: {
|
|
|
top: "15%",
|
|
|
left: "1%",
|
|
|
right: "1%",
|
|
|
bottom: "2%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'cross',
|
|
|
crossStyle: {
|
|
|
color: '#999',
|
|
|
},
|
|
|
label: {
|
|
|
fontSize: 0.5 * vw,
|
|
|
}
|
|
|
},
|
|
|
textStyle: {
|
|
|
fontSize: 0.5 * vw,
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
data: [data.yDataOneName, data.yDataTwoName],
|
|
|
textStyle: {
|
|
|
color: "#d1e6eb",
|
|
|
margin: 15,
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
axisLabel: {
|
|
|
//坐标轴刻度标签的相关设置
|
|
|
textStyle: {
|
|
|
color: "#d1e6eb",
|
|
|
margin: 15,
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
type: 'category',
|
|
|
data: data.xName,
|
|
|
axisPointer: {
|
|
|
type: 'shadow'
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: 'value',
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
color: "rgba(255,255,255,0.1)",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
//坐标轴刻度标签的相关设置
|
|
|
textStyle: {
|
|
|
color: "#d1e6eb",
|
|
|
margin: 15,
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
formatter: '{value} %'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
type: 'value',
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
//坐标轴刻度标签的相关设置
|
|
|
textStyle: {
|
|
|
color: "#d1e6eb",
|
|
|
margin: 15,
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
formatter: '{value} '
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: data.yDataOneName,
|
|
|
type: 'bar',
|
|
|
data: data.yDataOne,
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: ['10%', `50%`],
|
|
|
textStyle: {
|
|
|
color: "rgba(255,255,255,0.5)",
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#0BB5FB',
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
name: data.yDataTwoName,
|
|
|
type: 'line',
|
|
|
yAxisIndex: 1,
|
|
|
data: data.yDataTwo,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#0DB99D',
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
const barChartAndLineChartThree = function (data, id) {
|
|
|
let charts = echarts.init(id);
|
|
|
if (!data) {
|
|
|
data = {
|
|
|
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
|
|
yDataOne: [200, 382, 102, 267, 186, 315, 316],
|
|
|
yDataOneName: "实际产量",
|
|
|
yDataTwo: [382, 102, 186, 200, 102, 186, 315],
|
|
|
yDataTwoName: "目标产量",
|
|
|
}
|
|
|
}
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
crossStyle: {
|
|
|
color: '#999',
|
|
|
},
|
|
|
label: {
|
|
|
fontSize: 0.5 * vw,
|
|
|
}
|
|
|
},
|
|
|
textStyle: {
|
|
|
fontSize: 0.8 * vw
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
top: "15%",
|
|
|
left: "1%",
|
|
|
right: "1%",
|
|
|
bottom: "8%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
legend: {
|
|
|
show: true,
|
|
|
itemGap: 50,
|
|
|
data: [data.yDataOneName, data.yDataTwoName],
|
|
|
textStyle: {
|
|
|
color: "#f9f9f9",
|
|
|
borderColor: "#fff",
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
dataZoom: [],
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
boundaryGap: true,
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: '#fff',
|
|
|
opacity: 0.3,
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
interval: 0,
|
|
|
//坐标轴刻度标签的相关设置
|
|
|
textStyle: {
|
|
|
color: "#d1e6eb",
|
|
|
margin: 15,
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
type: 'dashed',
|
|
|
color: '#777777',
|
|
|
opacity: 0.3,
|
|
|
},
|
|
|
},
|
|
|
data: data.xName,
|
|
|
},
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
min: 0,
|
|
|
// max: 140,
|
|
|
splitNumber: 7,
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
type: 'dashed',
|
|
|
color: '#777777',
|
|
|
opacity: 0.3,
|
|
|
},
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: '#fff',
|
|
|
opacity: 0.3,
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
margin: 20,
|
|
|
textStyle: {
|
|
|
color: "#d1e6eb",
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: data.yDataOneName,
|
|
|
type: "bar",
|
|
|
barWidth: '70%',
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
barBorderRadius: 5,
|
|
|
color: function (val) {
|
|
|
console.log()
|
|
|
if (data.yDataOne[val.dataIndex] >= data.yDataTwo[val.dataIndex]) {
|
|
|
return '#30e391'
|
|
|
} else {
|
|
|
return '#FE70A6'
|
|
|
}
|
|
|
// return "#0D81ED"
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
data: data.yDataOne,
|
|
|
},
|
|
|
{
|
|
|
name: data.yDataTwoName || '',
|
|
|
type: "line",
|
|
|
// smooth: true, //是否平滑曲线显示
|
|
|
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
|
showAllSymbol: true,
|
|
|
symbol: "emptyCircle",
|
|
|
symbolSize: 6,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
width: 3,
|
|
|
color: '#fff',
|
|
|
},
|
|
|
borderColor: "#f0f",
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
color: '#F2D770',
|
|
|
border: 0,
|
|
|
},
|
|
|
// tooltip: {
|
|
|
// show: false
|
|
|
// },
|
|
|
data: data.yDataTwo || [],
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
const barChartAndLineChartFour = function (data, id) {
|
|
|
let charts = echarts.init(id);
|
|
|
if (!data) {
|
|
|
data = {
|
|
|
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
|
|
yDataOne: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
|
|
|
yDataOneName: "不良数",
|
|
|
yDataTwo: [9, 3, 7, 7, 7, 2, 7, 1, 6, 7, 2, 1, 5],
|
|
|
yDataTwoName: "一次装配不合格率",
|
|
|
yDataThree: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
|
|
|
yDataThreeName: "目标",
|
|
|
}
|
|
|
}
|
|
|
let option = {
|
|
|
grid: {
|
|
|
top: "15%",
|
|
|
left: "1%",
|
|
|
right: "1%",
|
|
|
bottom: "2%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'cross',
|
|
|
crossStyle: {
|
|
|
color: '#999',
|
|
|
},
|
|
|
label: {
|
|
|
fontSize: 0.5 * vw,
|
|
|
}
|
|
|
},
|
|
|
textStyle: {
|
|
|
width: 30,
|
|
|
fontSize: 0.5 * vw,
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
itemWidth: 3 * vw,
|
|
|
data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName],
|
|
|
textStyle: {
|
|
|
color: "#d1e6eb",
|
|
|
margin: 15,
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
axisLabel: {
|
|
|
//坐标轴刻度标签的相关设置
|
|
|
textStyle: {
|
|
|
color: "#d1e6eb",
|
|
|
margin: 15,
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
type: 'category',
|
|
|
data: data.xName,
|
|
|
axisPointer: {
|
|
|
type: 'shadow'
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: 'value',
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
color: "rgba(255,255,255,0.1)",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
//坐标轴刻度标签的相关设置
|
|
|
textStyle: {
|
|
|
color: "#d1e6eb",
|
|
|
margin: 15,
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
formatter: '{value}'
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
type: 'value',
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
//坐标轴刻度标签的相关设置
|
|
|
textStyle: {
|
|
|
color: "#d1e6eb",
|
|
|
margin: 15,
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
formatter: '{value}% '
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: data.yDataOneName,
|
|
|
type: 'bar',
|
|
|
data: data.yDataOne,
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'top',
|
|
|
textStyle: {
|
|
|
color: "rgba(255,255,255,0.5)",
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: function (val) {
|
|
|
console.log()
|
|
|
if (data.yDataTwo[val.dataIndex] < data.yDataThree[val.dataIndex]) {
|
|
|
return '#30e391'
|
|
|
} else {
|
|
|
return '#FE70A6'
|
|
|
}
|
|
|
// return "#0D81ED"
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
name: data.yDataTwoName,
|
|
|
type: 'line',
|
|
|
yAxisIndex: 1,
|
|
|
data: data.yDataTwo,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#F9A25B',
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
name: data.yDataThreeName,
|
|
|
type: 'line',
|
|
|
yAxisIndex: 1,
|
|
|
data: data.yDataThree,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#0DB99D',
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
if (Math.max(...data.yDataOne) <= 5) {
|
|
|
option.yAxis[0].max = 5
|
|
|
}
|
|
|
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
|
|
|
// 折线图
|
|
|
const lineChart = function (data, id, unit = '',smooth=false,color='#14bd2d') {
|
|
|
let charts = echarts.init(id);
|
|
|
if (!data) {
|
|
|
data = {
|
|
|
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
|
|
yData: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
|
|
|
yDataName: "提升百分比",
|
|
|
}
|
|
|
}
|
|
|
let min = Math.ceil(Math.min(...data.yData))
|
|
|
let max = Math.ceil(Math.max(...data.yData))
|
|
|
let option = {
|
|
|
grid: {
|
|
|
top: '28%',
|
|
|
left: '5%',
|
|
|
right: '5%',
|
|
|
bottom: '0%',
|
|
|
containLabel: true,
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'shadow',
|
|
|
label: {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
legend: {
|
|
|
top: '5%',
|
|
|
itemWidth:20,
|
|
|
itemHeight:10,
|
|
|
itemStyle:{
|
|
|
borderWidth:1,
|
|
|
borderHeight:1,
|
|
|
},
|
|
|
formatter:function (val) {
|
|
|
return `${val} `
|
|
|
},
|
|
|
textStyle: {
|
|
|
fontSize: 0.75 * vw,
|
|
|
color: function () {
|
|
|
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: data.xName,
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: '#ffffff', //X轴文字颜色
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
name:'(元/台)',
|
|
|
min: (min - 2 < 0) ? 0 : min - 2,
|
|
|
max: (max + 2 > 100) ? 100 : max + 2,
|
|
|
type: 'value',
|
|
|
nameTextStyle: {
|
|
|
color: '#fff',
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: '#eeeeee',
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
interval:0,
|
|
|
textStyle: {
|
|
|
color: '#ffffff',
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: data.yDataName,
|
|
|
type: 'line',
|
|
|
smooth:smooth,
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
symbol: 'circle', //标记的图形为实心圆
|
|
|
symbolSize: 4, //标记的大小
|
|
|
itemStyle: {
|
|
|
//折线拐点标志的样式
|
|
|
color: color,
|
|
|
borderWidth: '2',
|
|
|
borderColor: color,
|
|
|
},
|
|
|
lineStyle: {
|
|
|
color: color,
|
|
|
},
|
|
|
label: {
|
|
|
//图形上的文本标签
|
|
|
normal: {
|
|
|
formatter: `{c}${unit}`,
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: color,
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.5 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
data: data.yData,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
const lineChartTwo = function (data, id, unit = '') {
|
|
|
let charts = echarts.init(id);
|
|
|
let color = ['#3094ea','#2fd032','#6ba72c','#7b6931','#8909E5']
|
|
|
if (!data) {
|
|
|
data = {
|
|
|
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
|
|
yData: [
|
|
|
{
|
|
|
name: "提升百分比",
|
|
|
data: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
|
|
|
},
|
|
|
{
|
|
|
name: "百分比",
|
|
|
data: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
|
|
|
},
|
|
|
],
|
|
|
}
|
|
|
}
|
|
|
let num = data.yData.map(val => val.data).flat(Infinity)
|
|
|
let min = Math.ceil(Math.min(...num))
|
|
|
let max = Math.ceil(Math.max(...num))
|
|
|
let series = data.yData.map((val,index) => {
|
|
|
return {
|
|
|
name: val.name,
|
|
|
type: 'line',
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
symbol: 'circle', //标记的图形为实心圆
|
|
|
symbolSize: 4, //标记的大小
|
|
|
itemStyle: {
|
|
|
//折线拐点标志的样式
|
|
|
color: color[index % color.length],
|
|
|
borderWidth: '2',
|
|
|
borderColor: color[index % color.length],
|
|
|
},
|
|
|
lineStyle: {
|
|
|
color: color[index % color.length],
|
|
|
},
|
|
|
label: {
|
|
|
//图形上的文本标签
|
|
|
normal: {
|
|
|
formatter: `{c}${unit}`,
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.8 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
data: val.data,
|
|
|
}
|
|
|
})
|
|
|
let option = {
|
|
|
grid: {
|
|
|
top: '20%',
|
|
|
left: '5%',
|
|
|
right: '5%',
|
|
|
bottom: '8%',
|
|
|
containLabel: true,
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'shadow',
|
|
|
label: {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
legend: {
|
|
|
top: '5%',
|
|
|
itemWidth:20,
|
|
|
itemHeight:10,
|
|
|
formatter:function (val) {
|
|
|
return `${val}`
|
|
|
},
|
|
|
textStyle: {
|
|
|
fontSize: 0.75 * vw,
|
|
|
color: () => {},
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: data.xName,
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: '#ffffff', //X轴文字颜色
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
min: (min - 2 < 0) ? 0 : min - 2,
|
|
|
max: (max + 2 > 100) ? 100 : max + 2,
|
|
|
type: 'value',
|
|
|
nameTextStyle: {
|
|
|
color: '#393939',
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: '#eeeeee',
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: '#ffffff',
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: series,
|
|
|
};
|
|
|
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
const lineChartThree = function (data, id, unit = '',smooth=false) {
|
|
|
let charts = echarts.init(id);
|
|
|
if (!data) {
|
|
|
data = {
|
|
|
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
|
|
yData: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
|
|
|
yDataName: "提升百分比",
|
|
|
yDataTwo: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
|
|
|
yDataTwoName: "百分比"
|
|
|
}
|
|
|
}
|
|
|
let min = Math.ceil(Math.min(...data.yData,...(data.yDataTwo || [])))
|
|
|
let max = Math.ceil(Math.max(...data.yData,...(data.yDataTwo || [])))
|
|
|
let option = {
|
|
|
grid: {
|
|
|
top: '28%',
|
|
|
left: '5%',
|
|
|
right: '5%',
|
|
|
bottom: '0%',
|
|
|
containLabel: true,
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'shadow',
|
|
|
label: {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
legend: {
|
|
|
top: '5%',
|
|
|
itemWidth:20,
|
|
|
itemHeight:10,
|
|
|
itemStyle:{
|
|
|
borderWidth:1,
|
|
|
borderHeight:1,
|
|
|
},
|
|
|
formatter:function (val) {
|
|
|
return `${val} `
|
|
|
},
|
|
|
textStyle: {
|
|
|
fontSize: 0.75 * vw,
|
|
|
color: function () {
|
|
|
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: data.xName,
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: '#ffffff', //X轴文字颜色
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
name:'(元/台)',
|
|
|
min: (min - 2 < 0) ? 0 : min - 2,
|
|
|
max: (max + 2 > 100) ? 100 : max + 2,
|
|
|
type: 'value',
|
|
|
nameTextStyle: {
|
|
|
color: '#fff',
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: '#eeeeee',
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
interval:0,
|
|
|
textStyle: {
|
|
|
color: '#ffffff',
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: data.yDataName,
|
|
|
type: 'line',
|
|
|
smooth:smooth,
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
symbol: 'circle', //标记的图形为实心圆
|
|
|
symbolSize: 4, //标记的大小
|
|
|
itemStyle: {
|
|
|
//折线拐点标志的样式
|
|
|
color: '#14bd2d',
|
|
|
borderWidth: '2',
|
|
|
borderColor: '#14bd2d',
|
|
|
},
|
|
|
lineStyle: {
|
|
|
color: '#14bd2d',
|
|
|
},
|
|
|
label: {
|
|
|
//图形上的文本标签
|
|
|
normal: {
|
|
|
formatter: `{c}${unit}`,
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#14bd2d",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.8 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
data: data.yData,
|
|
|
},
|
|
|
{
|
|
|
name: data.yDataTwoName,
|
|
|
type: 'line',
|
|
|
smooth:smooth,
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
symbol: 'circle', //标记的图形为实心圆
|
|
|
symbolSize: 4, //标记的大小
|
|
|
itemStyle: {
|
|
|
//折线拐点标志的样式
|
|
|
color: '#3094ea',
|
|
|
borderWidth: '2',
|
|
|
borderColor: '#3094ea',
|
|
|
},
|
|
|
lineStyle: {
|
|
|
color: '#3094ea',
|
|
|
},
|
|
|
label: {
|
|
|
//图形上的文本标签
|
|
|
normal: {
|
|
|
formatter: `{c}${unit}`,
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#3094ea",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.8 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
areaStyle: {
|
|
|
normal: {
|
|
|
color: {
|
|
|
type: 'linear',
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
colorStops: [{
|
|
|
offset: 0, color: 'rgba(76,82,193,0.7)' // 0% 处的颜色
|
|
|
}, {
|
|
|
offset: 1, color: 'rgba(191,194,220,0.4)' // 100% 处的颜色
|
|
|
}],
|
|
|
global: false // 缺省为 false
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
data: data.yDataTwo,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
|
|
|
|
|
|
// 饼图
|
|
|
const pieChart = function (data, id, unit = '次') {
|
|
|
let charts = echarts.init(id);
|
|
|
if (!data) {
|
|
|
data = [
|
|
|
{
|
|
|
value: 285,
|
|
|
name: "类型1",
|
|
|
},
|
|
|
{
|
|
|
value: 410,
|
|
|
name: "类型2",
|
|
|
},
|
|
|
{
|
|
|
value: 274,
|
|
|
name: "类型3",
|
|
|
},
|
|
|
{
|
|
|
value: 235,
|
|
|
name: "类型4",
|
|
|
},
|
|
|
]
|
|
|
}
|
|
|
if (data.length === 0) {
|
|
|
data = [{
|
|
|
value: 0,
|
|
|
name: ''
|
|
|
}]
|
|
|
}
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{b} : {c} ({d}%)",
|
|
|
textStyle: {
|
|
|
fontSize: 0.8 * vw
|
|
|
}
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
{
|
|
|
name: "访问来源",
|
|
|
type: "pie",
|
|
|
radius: "70%",
|
|
|
center: ["50%", "50%"],
|
|
|
colorBy: 'data',
|
|
|
// color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050'
|
|
|
data: data,
|
|
|
roseType: "radius",
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: `{b|{b}} \n {c|{c}${unit}}`,
|
|
|
rich: {
|
|
|
c: {
|
|
|
color: "rgb(241,246,104)",
|
|
|
fontSize: 0.75 * vw,
|
|
|
lineHeight: 5,
|
|
|
},
|
|
|
b: {
|
|
|
color: "rgb(98,137,169)",
|
|
|
fontSize: 0.75 * vw,
|
|
|
height: 1.5 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
emphasis: {
|
|
|
label: {
|
|
|
fontSize: 0.75 * vw
|
|
|
}
|
|
|
},
|
|
|
labelLine: {
|
|
|
normal: {
|
|
|
lineStyle: {
|
|
|
color: "rgb(98,137,169)",
|
|
|
},
|
|
|
smooth: true,
|
|
|
length: 20,
|
|
|
length2: 20,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
const pieChartTwo = function (data, id, unit = '次') {
|
|
|
let charts = echarts.init(id);
|
|
|
if (!data) {
|
|
|
data = [
|
|
|
{
|
|
|
value: 285,
|
|
|
name: "类型1",
|
|
|
},
|
|
|
{
|
|
|
value: 410,
|
|
|
name: "类型2",
|
|
|
},
|
|
|
{
|
|
|
value: 274,
|
|
|
name: "类型3",
|
|
|
},
|
|
|
{
|
|
|
value: 235,
|
|
|
name: "类型4",
|
|
|
},
|
|
|
]
|
|
|
}
|
|
|
if (data.length === 0) {
|
|
|
data = [{
|
|
|
value: 0,
|
|
|
name: ''
|
|
|
}]
|
|
|
}
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{b} : {c} ({d}%)",
|
|
|
textStyle: {
|
|
|
fontSize: 0.8 * vw
|
|
|
}
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
{
|
|
|
name: "访问来源",
|
|
|
type: "pie",
|
|
|
radius: "50%",
|
|
|
center: ["50%", "50%"],
|
|
|
colorBy: 'data',
|
|
|
// color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050'
|
|
|
data: data,
|
|
|
roseType: "radius",
|
|
|
overflow:'break',
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: `{b|{b}} \n {c|{c}${unit}}`,
|
|
|
rich: {
|
|
|
c: {
|
|
|
color: "rgb(241,246,104)",
|
|
|
fontSize: 0.75 * vw,
|
|
|
lineHeight: 5,
|
|
|
},
|
|
|
b: {
|
|
|
color: "rgb(98,137,169)",
|
|
|
fontSize: 0.75 * vw,
|
|
|
height: 1.5 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
emphasis: {
|
|
|
label: {
|
|
|
fontSize: 0.75 * vw
|
|
|
}
|
|
|
},
|
|
|
labelLine: {
|
|
|
normal: {
|
|
|
lineStyle: {
|
|
|
color: "rgb(98,137,169)",
|
|
|
},
|
|
|
smooth: true,
|
|
|
length: 20,
|
|
|
length2: 20,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
|
|
|
// 垂直柱状图
|
|
|
const verticalBarChart = function (data, id, unit = '次') {
|
|
|
let charts = echarts.init(id);
|
|
|
if (!data) {
|
|
|
data = {
|
|
|
xName: ["0-3分钟", "3-10分钟", ">10分钟"],
|
|
|
yData: [254, 3254, 1654],
|
|
|
}
|
|
|
}
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
textStyle: {
|
|
|
fontSize: 0.8 * vw
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
top: "10%",
|
|
|
left: "1%",
|
|
|
right: "1%",
|
|
|
bottom: "1%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: data.xName,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "#0177d4",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: "#fff",
|
|
|
fontSize: 0.8 * vw,
|
|
|
interval: 0,
|
|
|
},
|
|
|
},
|
|
|
yAxis: {
|
|
|
nameTextStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 0.8 * vw,
|
|
|
},
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "#0177d4",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: "#fff",
|
|
|
fontSize: 0.8 * vw,
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: "#0177d4",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
type: "bar",
|
|
|
barWidth: data.yData.length<4? 2*vw:'75%',
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'top',
|
|
|
textStyle: {
|
|
|
fontSize: 0.8 * vw,
|
|
|
color: '#fff'
|
|
|
},
|
|
|
formatter: `{c}${unit}`
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
0,
|
|
|
0,
|
|
|
1,
|
|
|
[
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "#00b0ff",
|
|
|
},
|
|
|
{
|
|
|
offset: 0.8,
|
|
|
color: "#7052f4",
|
|
|
},
|
|
|
],
|
|
|
false
|
|
|
),
|
|
|
},
|
|
|
},
|
|
|
data: data.yData,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
|
|
|
}
|
|
|
|
|
|
// 多个垂直柱状图
|
|
|
const multipleVerticalBarChart = function (data, id) {
|
|
|
let charts = echarts.init(id);
|
|
|
if (!data) {
|
|
|
data = {
|
|
|
xName: [
|
|
|
"7:00",
|
|
|
"8:00",
|
|
|
"9:00",
|
|
|
"10:00",
|
|
|
"11:00",
|
|
|
"12:00",
|
|
|
],
|
|
|
yDataOne: [4.9, 7.3, 9.2, 5.6, 7.7, 5.6],
|
|
|
yDataOneName: "制氢",
|
|
|
yDataTwo: [2.9, 5, 4.4, 2.7, 5.7, 4.6],
|
|
|
yDataTwoName: "发电",
|
|
|
yDataThree: [3.9, 6, 5.4, 3.7, 6.7, 5.6],
|
|
|
yDataThreeName: "充装",
|
|
|
}
|
|
|
}
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
//提示框组件
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
lineStyle: {
|
|
|
color: "#57617B",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
// trigger: "axis",
|
|
|
// formatter: `{b}<br />{a0}: {c0}<br />{a1}: {c1}`,
|
|
|
// axisPointer: {
|
|
|
// type: "shadow",
|
|
|
// label: {
|
|
|
// backgroundColor: "#6a7985",
|
|
|
// },
|
|
|
// },
|
|
|
// textStyle: {
|
|
|
// color: "#fff",
|
|
|
// fontStyle: "normal",
|
|
|
// fontFamily: "微软雅黑",
|
|
|
// fontSize: 12,
|
|
|
// },
|
|
|
},
|
|
|
grid: {
|
|
|
left: "1%",
|
|
|
right: "4%",
|
|
|
bottom: "0",
|
|
|
top: 30,
|
|
|
padding: "0 0 10 0",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
legend: {
|
|
|
//图例组件，颜色和名字
|
|
|
right: 10,
|
|
|
top: 0,
|
|
|
itemGap: 16,
|
|
|
itemWidth: vw,
|
|
|
itemHeight: 0.6 * vw,
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
dataZoom: [],
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
boundaryGap: true, //坐标轴两边留白
|
|
|
data: data.xName,
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
color: '#fff'
|
|
|
},
|
|
|
axisTick: {
|
|
|
//坐标轴刻度相关设置。
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
//坐标轴轴线相关设置
|
|
|
lineStyle: {
|
|
|
color: "#fff",
|
|
|
opacity: 0.2,
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
type: 'dashed',
|
|
|
color: '#777777',
|
|
|
opacity: 0.3,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
splitNumber: 5,
|
|
|
max: Math.max(...data.yDataOne, ...data.yDataTwo) + 5,
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
color: '#fff'
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
type: 'dashed',
|
|
|
color: '#777777',
|
|
|
opacity: 0.3,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: data.yDataOneName,
|
|
|
type: "bar",
|
|
|
data: data.yDataOne,
|
|
|
barWidth: 1 * vw,
|
|
|
barGap: 0, //柱间距离
|
|
|
label: {
|
|
|
//图形上的文本标签
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
//图形样式
|
|
|
normal: {
|
|
|
barBorderRadius: [5, 5, 0, 0],
|
|
|
color: {
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
type: 'linear',
|
|
|
global: false,
|
|
|
colorStops: [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: 'rgb(21, 148, 244)',
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: 'rgb(13, 48, 243)',
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
name: data.yDataTwoName,
|
|
|
type: "bar",
|
|
|
data: data.yDataTwo,
|
|
|
barWidth: 1 * vw,
|
|
|
barGap: 0.5, //柱间距离
|
|
|
label: {
|
|
|
//图形上的文本标签
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
//图形样式
|
|
|
normal: {
|
|
|
barBorderRadius: [5, 5, 0, 0],
|
|
|
color: {
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
type: 'linear',
|
|
|
global: false,
|
|
|
colorStops: [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: '#0DCEB1',
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: '#14A15A',
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
name: data.yDataThreeName,
|
|
|
type: "bar",
|
|
|
data: data.yDataThree,
|
|
|
barWidth: 1 * vw,
|
|
|
barGap: 0.5, //柱间距离
|
|
|
label: {
|
|
|
//图形上的文本标签
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
//图形样式
|
|
|
normal: {
|
|
|
barBorderRadius: [5, 5, 0, 0],
|
|
|
color: "rgba(26, 99, 74, 0.7)",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
if (data?.xName?.length >= 4) {
|
|
|
option.dataZoom.push({
|
|
|
show: true,
|
|
|
type: 'slider',
|
|
|
bottom: '0%',
|
|
|
xAxisIndex: 0,
|
|
|
height: 12,
|
|
|
start: 0,
|
|
|
end: 1 / (data.xName.length / 4) * 100,
|
|
|
textStyle: {
|
|
|
fontSize: 0,
|
|
|
color: 'rgba(0,0,0,0)'
|
|
|
}
|
|
|
})
|
|
|
option.grid.bottom = '7%'
|
|
|
}
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '',margin=20,isColor=true) {
|
|
|
let charts = echarts.init(id);
|
|
|
if (!data) {
|
|
|
data = {
|
|
|
xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
|
|
|
yDataOne: [22, 52, 55, 12, 35, 44, 66],
|
|
|
yDataOneName: 'a1',
|
|
|
yDataTwo: [32, 42, 50, 22, 30, 40, 52],
|
|
|
yDataTwoName: "a2",
|
|
|
}
|
|
|
}
|
|
|
let option = {
|
|
|
grid: {
|
|
|
top: "20%",
|
|
|
left: "1%",
|
|
|
right: "1%",
|
|
|
bottom: "1%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'shadow'
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
right:'0',
|
|
|
data: [data.yDataOneName, data.yDataTwoName],
|
|
|
textStyle: {
|
|
|
fontSize: 0.75 * vw,
|
|
|
color: "#F1F1F3",
|
|
|
},
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
axisTick: {show: false},
|
|
|
axisLabel: {
|
|
|
rotate: rotate,
|
|
|
margin: margin,
|
|
|
textStyle: {
|
|
|
fontSize: 0.75 * vw,
|
|
|
color: "#F1F1F3",
|
|
|
},
|
|
|
},
|
|
|
data: data.xName
|
|
|
}
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
axisLabel: {
|
|
|
textStyle: {
|
|
|
fontSize: 0.75 * vw,
|
|
|
color: "#F1F1F3",
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
color: "rgba(255,255,255,0.1)",
|
|
|
},
|
|
|
},
|
|
|
type: 'value'
|
|
|
}
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: data.yDataOneName,
|
|
|
type: 'bar',
|
|
|
barGap: 0,
|
|
|
emphasis: {
|
|
|
focus: 'series'
|
|
|
},
|
|
|
barWidth: '30%',
|
|
|
itemStyle: {
|
|
|
//图形样式
|
|
|
normal: {
|
|
|
color: isColor? '#db8151': "#64BCEC",
|
|
|
},
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
formatter: `{c}${unit}`,
|
|
|
textStyle: {
|
|
|
color: "rgba(255,255,255,0.5)",
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
data: data.yDataOne
|
|
|
},
|
|
|
{
|
|
|
name: data.yDataTwoName,
|
|
|
type: 'bar',
|
|
|
emphasis: {
|
|
|
focus: 'series'
|
|
|
},
|
|
|
barWidth: '30%',
|
|
|
barGap: '40%',
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
formatter: `{c}${unit}`,
|
|
|
textStyle: {
|
|
|
color: "rgba(255,255,255,0.5)",
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
//图形样式
|
|
|
normal: {
|
|
|
color: isColor? '#9ce375': "#4FD3B9",
|
|
|
},
|
|
|
},
|
|
|
data: data.yDataTwo
|
|
|
},
|
|
|
]
|
|
|
};
|
|
|
|
|
|
if (data?.length >= 3) {
|
|
|
option.dataZoom.push({
|
|
|
show: true,
|
|
|
type: 'slider',
|
|
|
xAxisIndex: 0,
|
|
|
width: 12,
|
|
|
start: 0,
|
|
|
end: 1 / (data.length / 3) * 100,
|
|
|
textStyle: {
|
|
|
fontSize: 0,
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
const multipleVerticalBarChartThree = function (data, id, rotate = 0) {
|
|
|
|
|
|
clearInterval(time4)
|
|
|
let charts = echarts.init(id);
|
|
|
if (!data) {
|
|
|
data = {
|
|
|
xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '7月', '7月'],
|
|
|
yDataOne: [22, 52, 55, 12, 35, 44, 66, 44, 66],
|
|
|
yDataOneName: 'a1',
|
|
|
yDataTwo: [32, 42, 50, 22, 30, 40, 52, 44, 66],
|
|
|
yDataTwoName: "a2",
|
|
|
yDataThree: [32, 42, 50, 22, 30, 40, 52, 44, 66],
|
|
|
yDataThreeName: "a3",
|
|
|
yDataFour: [32, 42, 50, 22, 30, 40, 52, 44, 66],
|
|
|
yDataFourName: "a4",
|
|
|
}
|
|
|
}
|
|
|
let option = {
|
|
|
grid: {
|
|
|
top: "20%",
|
|
|
left: "1%",
|
|
|
right: "1%",
|
|
|
bottom: "1%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'shadow'
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName, data.yDataFourName],
|
|
|
textStyle: {
|
|
|
fontSize: 0.75 * vw,
|
|
|
color: "#F1F1F3",
|
|
|
},
|
|
|
},
|
|
|
dataZoom: [],
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
axisTick: {show: false},
|
|
|
axisLabel: {
|
|
|
rotate: rotate,
|
|
|
margin: 20,
|
|
|
textStyle: {
|
|
|
fontSize: 0.75 * vw,
|
|
|
color: "#F1F1F3",
|
|
|
},
|
|
|
},
|
|
|
data: data.xName
|
|
|
}
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
axisLabel: {
|
|
|
textStyle: {
|
|
|
fontSize: 0.75 * vw,
|
|
|
color: "#F1F1F3",
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
color: "rgba(255,255,255,0.1)",
|
|
|
},
|
|
|
},
|
|
|
type: 'value'
|
|
|
}
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: data.yDataOneName,
|
|
|
type: 'bar',
|
|
|
barGap: 0,
|
|
|
emphasis: {
|
|
|
focus: 'series'
|
|
|
},
|
|
|
itemStyle: {
|
|
|
//图形样式
|
|
|
normal: {
|
|
|
color: "#1FEDCA",
|
|
|
},
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "rgba(255,255,255,0.5)",
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
data: data.yDataOne
|
|
|
},
|
|
|
{
|
|
|
name: data.yDataTwoName,
|
|
|
type: 'bar',
|
|
|
emphasis: {
|
|
|
focus: 'series'
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "rgba(255,255,255,0.5)",
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
//图形样式
|
|
|
normal: {
|
|
|
color: "#E65454",
|
|
|
},
|
|
|
},
|
|
|
data: data.yDataTwo
|
|
|
},
|
|
|
{
|
|
|
name: data.yDataThreeName,
|
|
|
type: 'bar',
|
|
|
emphasis: {
|
|
|
focus: 'series'
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "rgba(255,255,255,0.5)",
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
//图形样式
|
|
|
normal: {
|
|
|
color: "#351865",
|
|
|
},
|
|
|
},
|
|
|
data: data.yDataThree
|
|
|
},
|
|
|
{
|
|
|
name: data.yDataFourName,
|
|
|
type: 'bar',
|
|
|
emphasis: {
|
|
|
focus: 'series'
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "rgba(255,255,255,0.5)",
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
//图形样式
|
|
|
normal: {
|
|
|
color: "#4b7232",
|
|
|
},
|
|
|
},
|
|
|
data: data.yDataFour
|
|
|
},
|
|
|
]
|
|
|
};
|
|
|
|
|
|
if (data.yDataOne.length > 7) {
|
|
|
option.dataZoom.push({
|
|
|
show: false,
|
|
|
type: 'slider',
|
|
|
bottom: '0%',
|
|
|
xAxisIndex: 0,
|
|
|
height: 12,
|
|
|
start: 0,
|
|
|
end: 1 / (data.yDataOne.length / 6) * 100,
|
|
|
textStyle: {
|
|
|
fontSize: 0,
|
|
|
color: 'rgba(0,0,0,0)'
|
|
|
}
|
|
|
})
|
|
|
|
|
|
let step = 1 / (data.yDataOne.length / 6) * 100
|
|
|
time4 = setInterval(() => {
|
|
|
option.dataZoom[0].end += step
|
|
|
option.dataZoom[0].start += step
|
|
|
if (option.dataZoom[0].start >= 100) {
|
|
|
option.dataZoom[0].start = 0
|
|
|
option.dataZoom[0].end = step
|
|
|
}
|
|
|
if (option.dataZoom[0].end >= 100) {
|
|
|
option.dataZoom[0].end = 100
|
|
|
option.dataZoom[0].start = option.dataZoom[0].end - step
|
|
|
}
|
|
|
charts.setOption(option);
|
|
|
}, 6000)
|
|
|
// time()
|
|
|
}
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
|
|
|
// 单个垂直柱状图
|
|
|
const singleVerticalBarChart = function (data, id, rotate = 0, bottom = '15%') {
|
|
|
clearInterval(time3)
|
|
|
let charts = echarts.init(id);
|
|
|
if (!data) {
|
|
|
data = {
|
|
|
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
|
|
yData: [12, 20, 11, 30, 14, 80, 50],
|
|
|
}
|
|
|
}
|
|
|
let left = () => {
|
|
|
if (vw < 10) return '18%'
|
|
|
return '10%'
|
|
|
}
|
|
|
let option = {
|
|
|
grid: {
|
|
|
top: "10%",
|
|
|
left: left(),
|
|
|
right: "5%",
|
|
|
bottom: bottom,
|
|
|
// containLabel: true
|
|
|
},
|
|
|
dataZoom: [],
|
|
|
xAxis: {
|
|
|
data: data.xName,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "#0177d4",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: "#fff",
|
|
|
fontSize: 0.5 * vw,
|
|
|
interval: 0,
|
|
|
rotate: rotate,
|
|
|
},
|
|
|
},
|
|
|
yAxis: {
|
|
|
nameTextStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 16,
|
|
|
},
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "#0177d4",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: "#fff",
|
|
|
fontSize: 16,
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: "#0177d4",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
type: "bar",
|
|
|
barWidth: 1 * vw,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
0,
|
|
|
0,
|
|
|
1,
|
|
|
[
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "#00b0ff",
|
|
|
},
|
|
|
{
|
|
|
offset: 0.8,
|
|
|
color: "#7052f4",
|
|
|
},
|
|
|
],
|
|
|
false
|
|
|
),
|
|
|
},
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
},
|
|
|
data: data.yData,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
if (data.yData.length > 8) {
|
|
|
option.dataZoom.push({
|
|
|
show: false,
|
|
|
type: 'slider',
|
|
|
bottom: '0%',
|
|
|
xAxisIndex: 0,
|
|
|
height: 12,
|
|
|
start: 0,
|
|
|
end: 1 / (data.yData.length / 9) * 100,
|
|
|
textStyle: {
|
|
|
fontSize: 0,
|
|
|
color: 'rgba(0,0,0,0)'
|
|
|
}
|
|
|
})
|
|
|
|
|
|
let step = 1 / (data.yData.length / 9) * 100
|
|
|
time3 = setInterval(() => {
|
|
|
option.dataZoom[0].end += step
|
|
|
option.dataZoom[0].start += step
|
|
|
if (option.dataZoom[0].start >= 100) {
|
|
|
option.dataZoom[0].start = 0
|
|
|
option.dataZoom[0].end = step
|
|
|
}
|
|
|
if (option.dataZoom[0].end >= 100) {
|
|
|
option.dataZoom[0].end = 100
|
|
|
option.dataZoom[0].start = option.dataZoom[0].end - step
|
|
|
}
|
|
|
charts.setOption(option);
|
|
|
}, 6000)
|
|
|
// time()
|
|
|
}
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
const singleVerticalBarChartTwo = function (data, id) {
|
|
|
clearInterval(time2)
|
|
|
let time = () => {
|
|
|
}
|
|
|
let charts = echarts.init(id);
|
|
|
if (!data) {
|
|
|
data = {
|
|
|
xName: ['0时', '2时', '4时', '6时', '8时', '10时', '12时', '14时'],
|
|
|
yData: [38, 60, 40, 55, 42, 39, 45, 40],
|
|
|
yImg: ['', '', '', '', '', '', '', ''],
|
|
|
}
|
|
|
}
|
|
|
let bottom = data.yData.map(val => 1)
|
|
|
let option = {
|
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
|
|
color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'],
|
|
|
grid: {
|
|
|
top: "20%",
|
|
|
bottom: "15%",
|
|
|
right: "5%"
|
|
|
},
|
|
|
dataZoom: [],
|
|
|
xAxis: {
|
|
|
margin: 10,
|
|
|
nameTextStyle: {
|
|
|
color: '#c0c3cd',
|
|
|
padding: [0, 0, -10, 0],
|
|
|
fontSize: 14,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: '#c0c3cd', //X轴文字
|
|
|
fontSize: 14,
|
|
|
interval: 0,
|
|
|
margin: 20,
|
|
|
rotate: -20,
|
|
|
},
|
|
|
axisTick: {
|
|
|
lineStyle: {
|
|
|
color: '#0B1535',
|
|
|
width: 1,
|
|
|
},
|
|
|
show: false,
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#384267',
|
|
|
width: 1,
|
|
|
type: 'dashed',
|
|
|
},
|
|
|
show: true,
|
|
|
},
|
|
|
data: data.xName,
|
|
|
type: 'category',
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
nameTextStyle: {
|
|
|
color: '#c0c3cd',
|
|
|
padding: [0, 0, -10, 0],
|
|
|
fontSize: 14,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: '#c0c3cd', //Y轴文字
|
|
|
fontSize: 14,
|
|
|
},
|
|
|
axisTick: {
|
|
|
lineStyle: {
|
|
|
color: '#384267',
|
|
|
width: 1,
|
|
|
},
|
|
|
show: true,
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: '#384267',
|
|
|
type: 'line',
|
|
|
},
|
|
|
},
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#fff',
|
|
|
width: 1,
|
|
|
type: 'line',
|
|
|
},
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
data: data.yData,
|
|
|
type: 'bar',
|
|
|
barMaxWidth: 'auto',
|
|
|
barWidth: 1.5 * vw,
|
|
|
itemStyle: {
|
|
|
color: function (val) {
|
|
|
if (data.yData.length - val.dataIndex === 1) {
|
|
|
return 'red'
|
|
|
} else if (data.yData.length - val.dataIndex === 2) {
|
|
|
return 'yellow'
|
|
|
|
|
|
} else {
|
|
|
return '#35AAFE'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
data: data.yData,
|
|
|
type: 'pictorialBar',
|
|
|
barMaxWidth: vw,
|
|
|
symbolPosition: 'end',
|
|
|
symbol: 'diamond',
|
|
|
itemStyle: {
|
|
|
color: function (val) {
|
|
|
if (data.yData.length - val.dataIndex === 1) {
|
|
|
return 'red'
|
|
|
} else if (data.yData.length - val.dataIndex === 2) {
|
|
|
return 'yellow'
|
|
|
|
|
|
} else {
|
|
|
return '#66c8ff'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
symbolOffset: ['25%', '-50%'],
|
|
|
symbolSize: [1.5 * vw, 10],
|
|
|
zlevel: 4,
|
|
|
},
|
|
|
{
|
|
|
data: bottom,
|
|
|
type: 'pictorialBar',
|
|
|
barMaxWidth: vw,
|
|
|
symbolPosition: 'end',
|
|
|
symbol: 'diamond',
|
|
|
itemStyle: {
|
|
|
color: function (val) {
|
|
|
if (data.yData.length - val.dataIndex === 1) {
|
|
|
return 'red'
|
|
|
} else if (data.yData.length - val.dataIndex === 2) {
|
|
|
return 'yellow'
|
|
|
|
|
|
} else {
|
|
|
return '#66c8ff'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
symbolOffset: ['25%', '-20%'],
|
|
|
symbolSize: [1.5 * vw, 10],
|
|
|
zlevel: 4,
|
|
|
},
|
|
|
{
|
|
|
type: 'pictorialBar',
|
|
|
name: 'pictorial element',
|
|
|
symbol: function (val, index) {
|
|
|
return 'image://' + 'http://10.100.70.5:9090/' + data.yImg[index.dataIndex]
|
|
|
},
|
|
|
symbolSize: [40, 40],
|
|
|
z: 10,
|
|
|
data: data.yData.map(val => {
|
|
|
return {
|
|
|
value: val,
|
|
|
symbolPosition: 'end',
|
|
|
symbolOffset: [0, '-190%']
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
if (data.xName.length > 10) {
|
|
|
option.dataZoom.push({
|
|
|
show: false,
|
|
|
type: 'slider',
|
|
|
bottom: '0%',
|
|
|
xAxisIndex: 0,
|
|
|
height: 12,
|
|
|
start: 0,
|
|
|
end: 1 / (data.xName.length / 11) * 100,
|
|
|
textStyle: {
|
|
|
fontSize: 0,
|
|
|
color: 'rgba(0,0,0,0)'
|
|
|
}
|
|
|
})
|
|
|
|
|
|
let step = 1 / (data.xName.length / 11) * 100
|
|
|
time2 = setInterval(() => {
|
|
|
option.dataZoom[0].end += step
|
|
|
option.dataZoom[0].start += step
|
|
|
if (option.dataZoom[0].start >= 100) {
|
|
|
option.dataZoom[0].start = 0
|
|
|
option.dataZoom[0].end = step
|
|
|
}
|
|
|
if (option.dataZoom[0].end >= 100) {
|
|
|
option.dataZoom[0].end = 100
|
|
|
option.dataZoom[0].start = option.dataZoom[0].end - step
|
|
|
}
|
|
|
charts.setOption(option);
|
|
|
}, 3000)
|
|
|
}
|
|
|
|
|
|
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
|
|
|
// 多个折线面积图(直线)
|
|
|
const multipleBrokenLineAreaDiagram = (data, ids) => {
|
|
|
let charts = echarts.init(ids);
|
|
|
|
|
|
function Fun() {
|
|
|
this.randomNum = function () {
|
|
|
let arr = []
|
|
|
for (let i = 0; i < 12; i++) {
|
|
|
arr.push(parseInt(Math.random() * 100))
|
|
|
}
|
|
|
return arr
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (!data) {
|
|
|
data = {
|
|
|
xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|
|
yDataOne: new Fun().randomNum(),
|
|
|
yDataTwo: new Fun().randomNum(),
|
|
|
yDataOneName: '制氢量',
|
|
|
yDataTwoName: '发电量',
|
|
|
}
|
|
|
}
|
|
|
let max = Math.round(Math.max(...data.yDataOne, ...data.yDataTwo))
|
|
|
let min = Math.round(Math.min(...data.yDataOne, ...data.yDataTwo))
|
|
|
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
lineStyle: {
|
|
|
color: "#57617B",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
legend: {
|
|
|
icon: "rect",
|
|
|
itemWidth: 0.75 * vw,
|
|
|
itemHeight: 0.25 * vw,
|
|
|
itemGap: 0.75 * vw,
|
|
|
data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName],
|
|
|
right: "4%",
|
|
|
textStyle: {
|
|
|
fontSize: 0.75 * vw,
|
|
|
color: "#F1F1F3",
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
top: "20%",
|
|
|
left: "3%",
|
|
|
right: "4%",
|
|
|
bottom: "3%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
dataZoom: [],
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
boundaryGap: false,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "#57617B",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
color: '#fff',
|
|
|
interval: 0,
|
|
|
},
|
|
|
data: data.xData,
|
|
|
},
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
max: max + 0.5,
|
|
|
min: min - 1,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "#57617B",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
color: '#fff',
|
|
|
interval: 0.5,
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: "#57617B",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: data.yDataOneName,
|
|
|
type: "line",
|
|
|
smooth: false,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
width: 1,
|
|
|
},
|
|
|
},
|
|
|
areaStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
0,
|
|
|
0,
|
|
|
1,
|
|
|
[
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "rgba(137, 189, 27, 0.6)",
|
|
|
},
|
|
|
{
|
|
|
offset: 0.8,
|
|
|
color: "rgba(137, 189, 27, 0.2)",
|
|
|
},
|
|
|
],
|
|
|
false
|
|
|
),
|
|
|
shadowColor: "rgba(0, 0, 0, 0.1)",
|
|
|
shadowBlur: 10,
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "rgb(137,189,27)",
|
|
|
},
|
|
|
},
|
|
|
label: {
|
|
|
//图形上的文本标签
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
data: data.yDataOne,
|
|
|
},
|
|
|
{
|
|
|
name: data.yDataTwoName,
|
|
|
type: "line",
|
|
|
smooth: false,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
width: 1,
|
|
|
},
|
|
|
},
|
|
|
areaStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
0,
|
|
|
0,
|
|
|
1,
|
|
|
[
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "rgba(0, 136, 212, 0.6)",
|
|
|
},
|
|
|
{
|
|
|
offset: 0.8,
|
|
|
color: "rgba(0, 136, 212, 0.2)",
|
|
|
},
|
|
|
],
|
|
|
false
|
|
|
),
|
|
|
shadowColor: "rgba(0, 0, 0, 0.1)",
|
|
|
shadowBlur: 10,
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "rgb(0,136,212)",
|
|
|
},
|
|
|
},
|
|
|
label: {
|
|
|
//图形上的文本标签
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: "bottom",
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
data: data.yDataTwo,
|
|
|
},
|
|
|
{
|
|
|
name: data.yDataThreeName,
|
|
|
type: "line",
|
|
|
smooth: false,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
width: 1,
|
|
|
},
|
|
|
},
|
|
|
areaStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
0,
|
|
|
0,
|
|
|
1,
|
|
|
[
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "rgba(219, 50, 51, 0.6)",
|
|
|
},
|
|
|
{
|
|
|
offset: 0.8,
|
|
|
color: "rgba(219, 50, 51, 0.2)",
|
|
|
},
|
|
|
],
|
|
|
false
|
|
|
),
|
|
|
shadowColor: "rgba(0, 0, 0, 0.1)",
|
|
|
shadowBlur: 10,
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "rgb(219,50,51)",
|
|
|
},
|
|
|
},
|
|
|
data: data.yDataThree,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
if (data?.xData?.length >= 4) {
|
|
|
option.dataZoom.push({
|
|
|
show: true,
|
|
|
type: 'slider',
|
|
|
bottom: '0%',
|
|
|
xAxisIndex: 0,
|
|
|
height: 12,
|
|
|
start: 0,
|
|
|
end: 1 / (data.xData.length / 4) * 100,
|
|
|
textStyle: {
|
|
|
fontSize: 0,
|
|
|
color: 'rgba(0,0,0,0)'
|
|
|
}
|
|
|
})
|
|
|
option.grid.bottom = '7%'
|
|
|
}
|
|
|
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
|
|
|
let charts = echarts.init(ids);
|
|
|
|
|
|
function Fun() {
|
|
|
this.randomNum = function () {
|
|
|
let arr = []
|
|
|
for (let i = 0; i < 12; i++) {
|
|
|
arr.push(parseInt(Math.random() * 100))
|
|
|
}
|
|
|
return arr
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (!data) {
|
|
|
data = {
|
|
|
xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|
|
yDataOne: new Fun().randomNum(),
|
|
|
yDataTwo: new Fun().randomNum(),
|
|
|
yDataOneName: '制氢量',
|
|
|
yDataTwoName: '发电量',
|
|
|
}
|
|
|
}
|
|
|
let max = Math.round(Math.max(...data.yDataOne, ...data.yDataTwo, ...data.yDataThree, ...data.yDataFour, ...data.yDataFive))
|
|
|
let min = Math.round(Math.min(...data.yDataOne, ...data.yDataTwo, ...data.yDataThree, ...data.yDataFour, ...data.yDataFive))
|
|
|
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
// formatter:'{a} {c}%',
|
|
|
axisPointer: {
|
|
|
lineStyle: {
|
|
|
color: "#57617B",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
legend: {
|
|
|
icon: "rect",
|
|
|
itemWidth: 0.75 * vw,
|
|
|
itemHeight: 0.25 * vw,
|
|
|
itemGap: 0.75 * vw,
|
|
|
data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName, data.yDataFourName, data.yDataFiveName],
|
|
|
right: "4%",
|
|
|
textStyle: {
|
|
|
fontSize: 0.75 * vw,
|
|
|
color: "#F1F1F3",
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
top: "20%",
|
|
|
left: "3%",
|
|
|
right: "4%",
|
|
|
bottom: "3%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
dataZoom: [],
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
boundaryGap: false,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "#57617B",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
color: '#fff',
|
|
|
interval: 0,
|
|
|
},
|
|
|
data: data.xData,
|
|
|
},
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
max: max + 1,
|
|
|
min: 90,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "#57617B",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
formatter: '{value}%',
|
|
|
show: true,
|
|
|
color: '#fff',
|
|
|
interval: 0.5,
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: "#57617B",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: data.yDataOneName,
|
|
|
type: "line",
|
|
|
smooth: false,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
width: 1,
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "rgb(137,189,27)",
|
|
|
},
|
|
|
},
|
|
|
label: {
|
|
|
//图形上的文本标签
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
formatter: '{c}%',
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
data: data.yDataOne,
|
|
|
},
|
|
|
{
|
|
|
name: data.yDataTwoName,
|
|
|
type: "line",
|
|
|
smooth: false,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
width: 1,
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "rgb(0,136,212)",
|
|
|
},
|
|
|
},
|
|
|
label: {
|
|
|
//图形上的文本标签
|
|
|
normal: {
|
|
|
formatter: '{c}%',
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
data: data.yDataTwo,
|
|
|
},
|
|
|
{
|
|
|
name: data.yDataThreeName,
|
|
|
type: "line",
|
|
|
smooth: false,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
width: 1,
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "rgb(219,50,51)",
|
|
|
},
|
|
|
},
|
|
|
label: {
|
|
|
//图形上的文本标签
|
|
|
normal: {
|
|
|
formatter: '{c}%',
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
data: data.yDataThree,
|
|
|
},
|
|
|
{
|
|
|
name: data.yDataFourName,
|
|
|
type: "line",
|
|
|
smooth: false,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
width: 1,
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "rgb(0,136,212)",
|
|
|
},
|
|
|
},
|
|
|
label: {
|
|
|
//图形上的文本标签
|
|
|
normal: {
|
|
|
formatter: '{c}%',
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
data: data.yDataFour,
|
|
|
},
|
|
|
{
|
|
|
name: data.yDataFiveName,
|
|
|
type: "line",
|
|
|
smooth: false,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
width: 1,
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "rgb(219,50,51)",
|
|
|
},
|
|
|
},
|
|
|
label: {
|
|
|
//图形上的文本标签
|
|
|
normal: {
|
|
|
formatter: '{c}%',
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
data: data.yDataFive,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
|
|
|
|
|
|
// 空心饼图
|
|
|
const hollowPieChart = function (data, id) {
|
|
|
let charts = echarts.init(id);
|
|
|
if (!data) {
|
|
|
data = [
|
|
|
{
|
|
|
value: 10,
|
|
|
name: "IQC1",
|
|
|
},
|
|
|
{
|
|
|
value: 5,
|
|
|
name: "IQC2",
|
|
|
},
|
|
|
{
|
|
|
value: 15,
|
|
|
name: "IQC3",
|
|
|
},
|
|
|
{
|
|
|
value: 25,
|
|
|
name: "IQC4",
|
|
|
},
|
|
|
{
|
|
|
value: 20,
|
|
|
name: "IQC5",
|
|
|
},
|
|
|
{
|
|
|
value: 35,
|
|
|
name: "IQC6",
|
|
|
},
|
|
|
]
|
|
|
}
|
|
|
let option = {
|
|
|
color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
|
|
|
grid: {
|
|
|
left: '-10%',
|
|
|
top: '10%',
|
|
|
bottom: '10%',
|
|
|
right: '10%',
|
|
|
containLabel: true,
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{b} : {c} ({d}%)",
|
|
|
},
|
|
|
polar: {},
|
|
|
angleAxis: {
|
|
|
interval: 1,
|
|
|
type: "category",
|
|
|
data: [],
|
|
|
z: 10,
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: false,
|
|
|
}
|
|
|
},
|
|
|
radiusAxis: {
|
|
|
min: 40,
|
|
|
max: 120,
|
|
|
interval: 20,
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
// calculable: true,
|
|
|
series: [
|
|
|
{
|
|
|
stack: "a",
|
|
|
type: "pie",
|
|
|
radius: ["20%", "80%"],
|
|
|
zlevel: 10,
|
|
|
label: {
|
|
|
show: false
|
|
|
},
|
|
|
// roseType: "area",
|
|
|
data: data,
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
|
|
|
// 多个环形图
|
|
|
const percentageRingDiagram = function (data, id) {
|
|
|
let charts = echarts.init(id);
|
|
|
console.log(data)
|
|
|
data ??= [
|
|
|
{
|
|
|
name: "内胆检漏",
|
|
|
value: 54,
|
|
|
},
|
|
|
{
|
|
|
name: "安全检测",
|
|
|
value: 44,
|
|
|
},
|
|
|
{
|
|
|
name: "成品检漏",
|
|
|
value: 35,
|
|
|
},
|
|
|
{
|
|
|
name: "测温性能",
|
|
|
value: 30,
|
|
|
},
|
|
|
{
|
|
|
name: "成品外观",
|
|
|
value: 44,
|
|
|
},
|
|
|
];
|
|
|
|
|
|
let titleArr = [],
|
|
|
seriesArr = [];
|
|
|
let colors = [
|
|
|
["#389af4", "#dfeaff"],
|
|
|
["#ff8c37", "#ffdcc3"],
|
|
|
["#ffc257", "#ffedcc"],
|
|
|
["#fd6f97", "#fed4e0"],
|
|
|
["#a181fc", "#e3d9fe"],
|
|
|
["#389af4", "#dfeaff"],
|
|
|
["#ff8c37", "#ffdcc3"],
|
|
|
["#ffc257", "#ffedcc"],
|
|
|
["#fd6f97", "#fed4e0"],
|
|
|
];
|
|
|
data.forEach(function (item, index) {
|
|
|
titleArr.push({
|
|
|
text: item.name,
|
|
|
x: index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%",
|
|
|
y: index > 2 ? "93%" : "43%",
|
|
|
// top: '65%',
|
|
|
textAlign: "center",
|
|
|
textStyle: {
|
|
|
fontWeight: "normal",
|
|
|
fontSize: 0.8 * vw,
|
|
|
color: colors[index][0],
|
|
|
textAlign: "center",
|
|
|
},
|
|
|
});
|
|
|
seriesArr.push({
|
|
|
// name: item.name,
|
|
|
type: "pie",
|
|
|
clockWise: false,
|
|
|
radius: [2 * vw, 2.5 * vw],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: colors[index][0],
|
|
|
shadowColor: colors[index][0],
|
|
|
shadowBlur: 0,
|
|
|
label: {
|
|
|
show: false,
|
|
|
},
|
|
|
labelLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
hoverAnimation: false,
|
|
|
center: [
|
|
|
index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%",
|
|
|
index > 2 ? "75%" : "25%",
|
|
|
],
|
|
|
data: [
|
|
|
{
|
|
|
value: item.value,
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: function (params) {
|
|
|
return params.value + "%";
|
|
|
},
|
|
|
position: "center",
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
fontSize: vw,
|
|
|
fontWeight: "bold",
|
|
|
color: colors[index][0],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
value: 100 - item.value,
|
|
|
name: "invisible",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: colors[index][1],
|
|
|
},
|
|
|
emphasis: {
|
|
|
color: colors[index][1],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
});
|
|
|
});
|
|
|
|
|
|
let option = {
|
|
|
title: titleArr,
|
|
|
series: seriesArr,
|
|
|
};
|
|
|
|
|
|
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
}
|
|
|
const percentageRingDiagramTwo = function (data, id) {
|
|
|
let charts = echarts.init(id);
|
|
|
if (!data) {
|
|
|
data = [
|
|
|
{
|
|
|
name: "内胆检测",
|
|
|
value: 99,
|
|
|
},
|
|
|
{
|
|
|
name: "安全检测",
|
|
|
value: 98.5,
|
|
|
},
|
|
|
{
|
|
|
name: "压力检测",
|
|
|
value: 99.8,
|
|
|
},
|
|
|
{
|
|
|
name: "温度检测",
|
|
|
value: 98.8,
|
|
|
},
|
|
|
{
|
|
|
name: "外观检测",
|
|
|
value: 99,
|
|
|
},
|
|
|
];
|
|
|
}
|
|
|
|
|
|
let titleArr = [],
|
|
|
seriesArr = [];
|
|
|
let colors = [
|
|
|
["#389af4", "#dfeaff"],
|
|
|
["#ff8c37", "#ffdcc3"],
|
|
|
["#ffc257", "#ffedcc"],
|
|
|
["#fd6f97", "#fed4e0"],
|
|
|
["#a181fc", "#e3d9fe"],
|
|
|
["#389af4", "#dfeaff"],
|
|
|
["#ff8c37", "#ffdcc3"],
|
|
|
["#ffc257", "#ffedcc"],
|
|
|
["#fd6f97", "#fed4e0"],
|
|
|
];
|
|
|
data.forEach(function (item, index) {
|
|
|
titleArr.push({
|
|
|
text: item.name,
|
|
|
x: index > 4 ? (index - 5) * 20 + 10 + "%" : index * 20 + 10 + "%",
|
|
|
y: '85%',
|
|
|
// top: '65%',
|
|
|
textAlign: "center",
|
|
|
textStyle: {
|
|
|
fontWeight: "normal",
|
|
|
fontSize: 0.8 * vw,
|
|
|
color: colors[index][0],
|
|
|
textAlign: "center",
|
|
|
},
|
|
|
});
|
|
|
seriesArr.push({
|
|
|
// name: item.name,
|
|
|
type: "pie",
|
|
|
clockWise: false,
|
|
|
radius: [2 * vw, 2.5 * vw],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: colors[index][0],
|
|
|
shadowColor: colors[index][0],
|
|
|
shadowBlur: 0,
|
|
|
label: {
|
|
|
show: false,
|
|
|
},
|
|
|
labelLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
hoverAnimation: false,
|
|
|
center: [
|
|
|
index > 4 ? (index - 5) * 20 + 10 + "%" : index * 20 + 10 + "%",
|
|
|
'50%',
|
|
|
],
|
|
|
data: [
|
|
|
{
|
|
|
value: item.value,
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: function (params) {
|
|
|
return params.value + "%";
|
|
|
},
|
|
|
position: "center",
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
fontSize: vw,
|
|
|
fontWeight: "bold",
|
|
|
color: colors[index][0],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
value: 100 - item.value,
|
|
|
name: "invisible",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: colors[index][1],
|
|
|
},
|
|
|
emphasis: {
|
|
|
color: colors[index][1],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
});
|
|
|
});
|
|
|
|
|
|
let option = {
|
|
|
title: titleArr,
|
|
|
series: seriesArr,
|
|
|
};
|
|
|
|
|
|
|
|
|
charts.setOption(option);
|
|
|
$(window).resize(charts.resize);
|
|
|
} |