|
|
|
|
@ -1,7 +1,9 @@
|
|
|
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
|
|
|
let time1 = () => {
|
|
|
|
|
var time1 = () => {
|
|
|
|
|
}
|
|
|
|
|
let time2 = () => {
|
|
|
|
|
var time2 = () => {
|
|
|
|
|
}
|
|
|
|
|
var time3 = () => {
|
|
|
|
|
}
|
|
|
|
|
// 随机数
|
|
|
|
|
const random = (val = 1) => {
|
|
|
|
|
@ -941,6 +943,7 @@ const barChartAndLineChartFour = function (data, id) {
|
|
|
|
|
// 饼图
|
|
|
|
|
const pieChart = function (data, id) {
|
|
|
|
|
let charts = echarts.init(id);
|
|
|
|
|
console.log(data)
|
|
|
|
|
if (!data) {
|
|
|
|
|
data = [
|
|
|
|
|
{
|
|
|
|
|
@ -982,9 +985,10 @@ const pieChart = function (data, id) {
|
|
|
|
|
type: "pie",
|
|
|
|
|
radius: "70%",
|
|
|
|
|
center: ["50%", "50%"],
|
|
|
|
|
color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050'
|
|
|
|
|
colorBy: 'data',
|
|
|
|
|
// color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050'
|
|
|
|
|
data: data,
|
|
|
|
|
// roseType: "radius",
|
|
|
|
|
roseType: "radius",
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
formatter: "{b|{b}} \n {c|{c}次}",
|
|
|
|
|
@ -1386,7 +1390,7 @@ const multipleVerticalBarChart = function (data, id) {
|
|
|
|
|
charts.setOption(option);
|
|
|
|
|
$(window).resize(charts.resize);
|
|
|
|
|
}
|
|
|
|
|
const multipleVerticalBarChartTwo = function (data, id,rotate = 0) {
|
|
|
|
|
const multipleVerticalBarChartTwo = function (data, id, rotate = 0) {
|
|
|
|
|
let charts = echarts.init(id);
|
|
|
|
|
if (!data) {
|
|
|
|
|
data = {
|
|
|
|
|
@ -1423,8 +1427,8 @@ const multipleVerticalBarChartTwo = function (data, id,rotate = 0) {
|
|
|
|
|
type: 'category',
|
|
|
|
|
axisTick: {show: false},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
rotate:rotate,
|
|
|
|
|
margin:20,
|
|
|
|
|
rotate: rotate,
|
|
|
|
|
margin: 20,
|
|
|
|
|
textStyle: {
|
|
|
|
|
fontSize: 0.75 * vw,
|
|
|
|
|
color: "#F1F1F3",
|
|
|
|
|
@ -1517,6 +1521,7 @@ const multipleVerticalBarChartTwo = function (data, id,rotate = 0) {
|
|
|
|
|
|
|
|
|
|
// 单个垂直柱状图
|
|
|
|
|
const singleVerticalBarChart = function (data, id, rotate = 0, bottom = '15%') {
|
|
|
|
|
clearInterval(time3)
|
|
|
|
|
let charts = echarts.init(id);
|
|
|
|
|
if (!data) {
|
|
|
|
|
data = {
|
|
|
|
|
@ -1609,8 +1614,37 @@ const singleVerticalBarChart = function (data, id, rotate = 0, bottom = '15%') {
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
@ -1744,7 +1778,6 @@ const singleVerticalBarChartTwo = function (data, id) {
|
|
|
|
|
symbol: 'diamond',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: function (val) {
|
|
|
|
|
console.log(val)
|
|
|
|
|
if (data.yData.length - val.dataIndex === 1) {
|
|
|
|
|
return 'red'
|
|
|
|
|
} else if (data.yData.length - val.dataIndex === 2) {
|
|
|
|
|
@ -1767,7 +1800,6 @@ const singleVerticalBarChartTwo = function (data, id) {
|
|
|
|
|
symbol: 'diamond',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: function (val) {
|
|
|
|
|
console.log(val)
|
|
|
|
|
if (data.yData.length - val.dataIndex === 1) {
|
|
|
|
|
return 'red'
|
|
|
|
|
} else if (data.yData.length - val.dataIndex === 2) {
|
|
|
|
|
@ -2101,6 +2133,371 @@ const multipleBrokenLineAreaDiagram = (data, ids) => {
|
|
|
|
|
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",
|
|
|
|
|
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: min,
|
|
|
|
|
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: "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,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
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)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
//图形上的文本标签
|
|
|
|
|
normal: {
|
|
|
|
|
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,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
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: "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,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
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)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
//图形上的文本标签
|
|
|
|
|
normal: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#a8aab0",
|
|
|
|
|
fontStyle: "normal",
|
|
|
|
|
fontFamily: "微软雅黑",
|
|
|
|
|
fontSize: 0.75 * vw,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: data.yDataFive,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
charts.setOption(option);
|
|
|
|
|
$(window).resize(charts.resize);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 空心饼图
|
|
|
|
|
|
夜笙歌
3 years ago
