From 2bf7aff3435c9abcb38b9ced5b6fa56957aeae89 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期三, 13 九月 2023 15:59:56 +0800
Subject: [PATCH] 1 车间质量、仓库管理、及五个车间看板 递交
---
src/utils/myEcharts.js | 868 ++++-----------------------------------------------------
1 files changed, 71 insertions(+), 797 deletions(-)
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index 19e7769..a74f8ef 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -1745,7 +1745,7 @@
textBorderColor: '#000',
textBorderWidth: 1,
textShadowBlur: 1,
- textShadowColor: colorY,
+ textShadowColor: colorX,
textShadowOffsetX: 0,
textShadowOffsetY: 0,
paddingTop: 10,
@@ -1797,7 +1797,7 @@
splitLine: { // 鍒嗛殧绾�
length: 10, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
- color: colorY
+ color: colorX
}
},
axisLabel: {
@@ -1829,7 +1829,7 @@
textBorderColor: '#000',
textBorderWidth: 1,
textShadowBlur: 1,
- textShadowColor: colorY,
+ textShadowColor: colorX,
textShadowOffsetX: 0,
textShadowOffsetY: 0,
paddingTop: 10,
@@ -1856,52 +1856,16 @@
// 杞﹂棿璐ㄩ噺
export function cjzl01(scaleData) {
- console.log(scaleData, 3)
- // var scaleData = [
- // {
- // 'name': '姣涘埡',
- // 'value': 30
- // },
- // {
- // 'name': '鑹插樊',
- // 'value': 20
- // },
- // {
- // 'name': '鎶涘厜',
- // 'value': 10
- // },
- // {
- // 'name': '鎵撶（',
- // 'value': 5
- // },
- // {
- // 'name': '鎶樺集銆佸帇閾搞�佹墦瀛�',
- // 'value': 10
- // }
- // ]
var rich = {
white: {
color: colorX,
align: 'center',
- padding: [3, 0]
- // fontSize: 16
- }
- }
- var placeHolderStyle = {
- normal: {
- label: {
- show: false
- },
- labelLine: {
- show: false
- },
- color: 'rgba(0, 0, 0, 0)',
- borderColor: 'rgba(0, 0, 0, 0)',
- borderWidth: 0
+ padding: [3, 0],
+ fontSize: 20
}
}
var data = []
- var color = ['#00ffff', '#ff3000', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+ var color = ['#00ffff', '#ff5b00', '#006ced', '#ffe000', '#ffa800', '#ff3000']
for (var i = 0; i < scaleData.length; i++) {
data.push({
value: scaleData[i].value,
@@ -1915,11 +1879,6 @@
}
}
}
- // {
- // value: 2,
- // name: '',
- // itemStyle: placeHolderStyle
- // }
)
}
var seriesObj = [{
@@ -1935,6 +1894,7 @@
show: true,
position: 'outside',
color: colorX,
+ fontSize: 20,
formatter: function(params) {
if (params.name !== '') {
return params.name + '\n{white|' + params.value + '}'
@@ -1995,25 +1955,13 @@
white: {
color: '#ddd',
align: 'center',
- padding: [5, 0]
+ padding: [5, 0],
+ fontSize: 20
}
}
- var placeHolderStyle = {
- normal: {
- label: {
- show: false
- },
- labelLine: {
- show: false
- },
- color: 'rgba(0, 0, 0, 0)',
- borderColor: 'rgba(0, 0, 0, 0)',
- borderWidth: 0
- }
- }
var data = []
- var color = ['#00ffff', '#ff3000', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+ var color = ['#00ffff', '#ff3000', '#ffe000', '#ffa800', '#ff5b00']
for (var i = 0; i < scaleData.length; i++) {
data.push({
value: scaleData[i].value,
@@ -2027,11 +1975,6 @@
}
}
}
- // {
- // value: 4,
- // name: '',
- // itemStyle: placeHolderStyle
- // }
)
}
var seriesObj = [{
@@ -2044,9 +1987,9 @@
itemStyle: {
normal: {
label: {
+ fontSize: 20,
show: true,
position: 'outside',
- // color: '#ddd',
color: colorX,
formatter: function(params) {
// var percent = 0
@@ -2065,7 +2008,7 @@
},
labelLine: {
length: 10,
- length2: 10,
+ length2: 20,
show: true,
color: '#00ffff'
}
@@ -2085,6 +2028,7 @@
top: '45%',
textAlign: 'center',
textStyle: {
+ // color: colorX,
color: '#00ffff',
fontSize: '20',
fontWeight: 'bolder'
@@ -2110,332 +2054,10 @@
return option
}
-// export function cjzl03() {
-// // mock鏁版嵁
-// const dataArr = {
-// xdata: ['9鏈�4鍙�', '9鏈�5鍙�', '9鏈�6鍙�', '9鏈�7鍙�', '9鏈�8鍙�', '9鏈�9鍙�', '9鏈�10鍙�'],
-// vaccination: [1000, 1300, 1200, 800, 600, 700, 900],
-// unvaccinated: [700, 800, 900, 500, 300, 400, 500],
-// unvaccinatedTwo: [400, 300, 500, 200, 100, 100, 300],
-// rateDataOne: [98, 96, 97, 92, 94, 95, 100],
-// rateDataTwo: [3, 4, 5, 1, 3, 2, 3]
-// }
-//
-// // tooltip
-// const tooltip = {
-// trigger: 'axis',
-// textStyle: { fontSize: '100%' },
-// formatter: params => {
-// const rander = params.map(item => item.seriesType !== 'pictorialBar' ? `<div>${item.seriesName}: ${item.seriesType !== 'line' ? item.value : item.value + '%'}</div>` : '').join('')
-// return `
-// <div>${params[0].axisValue}</div>
-// ${rander}
-// `
-// }
-// }
-// const legend = {
-// data: ['浠诲姟鏁�', '鍚堟牸鏁�', '涓嶈壇鏁�', '鍚堟牸鐜�', '涓嶈壇鐜�'],
-// textStyle: { fontSize: 14, color: '#fff' },
-// itemWidth: 25,
-// itemHeight: 15,
-// itemGap: 15,
-// bottom: '5%',
-// selectedMode: false
-// }
-// const grid = {
-// left: '2%',
-// right: '2%',
-// bottom: '20%',
-// top: '10%',
-// containLabel: true
-// }
-// // xAxis
-// const xAxis = {
-// // axisTick: { show: true },
-// // axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' }},
-// // axisLabel: { textStyle: { fontSize: 12, color: '#fff' }},
-//
-// type: 'category',
-// boundaryGap: true,
-// axisLabel: {
-// interval: 0,
-// formatter: '{value}',
-// fontSize: 14,
-// // margin: 20,
-// textStyle: {
-// color: colorX
-// }
-// },
-// axisLine: {
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// splitLine: {
-// show: false,
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// axisTick: {
-// show: false
-// },
-//
-// data: dataArr.xdata
-// }
-//
-// // yAxis
-// const yAxis = [{
-// // max: 800,
-// boundaryGap: false,
-// splitNumber: 4,
-// type: 'value',
-// axisLabel: {
-// textStyle: {
-// fontSize: 14,
-// color: colorY
-// }
-// },
-// // name: '鍗�',
-// // nameTextStyle: {
-// // color: colorY,
-// // fontSize: 14,
-// // lineHeight: 20
-// // },
-// splitLine: {
-// show: true,
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// axisLine: {
-// show: true,
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// axisTick: {
-// show: true
-// }
-// // axisTick: { show: false },
-// // axisLine: { show: false },
-// // splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' }},
-// // axisLabel: { textStyle: { fontSize: 16, color: '#fff' }}
-// }, {
-// show: true,
-// max: 100,
-// splitLine: { show: false },
-// axisLine: { show: false },
-// axisTick: { show: false },
-// axisLabel: {
-// textStyle: {
-// fontSize: 14,
-// color: colorY
-// },
-// formatter: params => {
-// return `${params}%`
-// }
-// }
-// }]
-//
-// // series
-// const series = [{
-// z: 1,
-// name: '涓婇儴1',
-// type: 'pictorialBar',
-// symbolPosition: 'end',
-// data: dataArr.vaccination,
-// symbol: 'diamond',
-// symbolOffset: ['-50%', '-50%'],
-// symbolSize: [29, 19],
-// itemStyle: {
-// borderColor: '#2fffa4',
-// color: '#2fffa4'
-// }
-// },
-// {
-// z: 1,
-// type: 'bar',
-// name: '浠诲姟鏁�',
-// barWidth: 30,
-// barGap: '-50%',
-// data: dataArr.vaccination,
-// itemStyle: {
-// color: {
-// type: 'linear',
-// x: 0, x2: 1, y: 0, y2: 0,
-// colorStops: [
-// { offset: 0, color: 'rgba(29, 245, 160, .7)' },
-// { offset: 0.5, color: 'rgba(29, 245, 160, .7)' },
-// { offset: 0.5, color: 'rgba(29, 245, 160, .3)' },
-// { offset: 1, color: 'rgba(29, 245, 160, .3)' }
-// ]
-// }
-// }
-// }, {
-// z: 2,
-// name: '涓婇儴1',
-// type: 'pictorialBar',
-// symbolPosition: 'end',
-// data: dataArr.unvaccinated,
-// symbol: 'diamond',
-// symbolOffset: [0, '-50%'],
-// symbolSize: [29, 19],
-// itemStyle: {
-// borderColor: '#32ffee',
-// color: '#32ffee'
-// }
-// },
-// {
-// z: 2,
-// type: 'bar',
-// name: '鍚堟牸鏁�',
-// barWidth: 30,
-// data: dataArr.unvaccinated,
-// itemStyle: {
-// color: {
-// type: 'linear',
-// x: 0, x2: 1, y: 0, y2: 0,
-// colorStops: [
-// { offset: 0, color: 'rgba(50, 255, 238, .7)' },
-// { offset: 0.5, color: 'rgba(50, 255, 238, .7)' },
-// { offset: 0.5, color: 'rgba(50, 255, 238, .3)' },
-// { offset: 1, color: 'rgba(50, 255, 238, .3)' }
-// ]
-// }
-// }
-// }, {
-// z: 3,
-// name: '涓婇儴1',
-// type: 'pictorialBar',
-// symbolPosition: 'end',
-// data: dataArr.unvaccinatedTwo,
-// symbol: 'diamond',
-// symbolOffset: ['50%', '-50%'],
-// symbolSize: [29, 19],
-// itemStyle: {
-// borderColor: '#ffd11a',
-// color: '#ffd11a'
-// }
-// }, {
-// z: 3,
-// type: 'bar',
-// name: '涓嶈壇鏁�',
-// barWidth: 30,
-// data: dataArr.unvaccinatedTwo,
-// itemStyle: {
-// color: {
-// type: 'linear',
-// x: 0, x2: 1, y: 0, y2: 0,
-// colorStops: [
-// { offset: 0, color: 'rgba(255, 209, 26, .7)' },
-// { offset: 0.5, color: 'rgba(255, 209, 26, .7)' },
-// { offset: 0.5, color: 'rgba(255, 209, 26, .3)' },
-// { offset: 1, color: 'rgba(255, 209, 26, .3)' }
-// ]
-// }
-// }
-// }, {
-// z: 9,
-// yAxisIndex: 1,
-// name: '鍚堟牸鐜�', type: 'line',
-// // symbol: 'emptyCircle',
-// symbol: `path://M9.312,4.594 C12.074,4.594 14.313,6.832 14.313,9.594 C14.313,12.355 12.074,14.594 9.312,14.594 C6.551,14.594 4.312,12.355 4.312,9.594 C4.312,6.832 6.551,4.594 9.312,4.594 Z`,
-// symbolSize: [10, 10],
-// color: {
-// type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
-// // 0% 澶勭殑棰滆壊 // 100% 澶勭殑棰滆壊
-// colorStops: [{ offset: 0, color: '#32ffee' }, { offset: 1, color: '#8afff5' }],
-// global: false // 缂虹渷涓� false
-// },
-// lineStyle: {
-// color: {
-// type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
-// // 0% 澶勭殑棰滆壊 // 100% 澶勭殑棰滆壊
-// colorStops: [{ offset: 0, color: '#32ffee' }, { offset: 1, color: '#8afff5' }],
-// global: false // 缂虹渷涓� false
-// }
-// },
-// // 淇敼鐨勬槸绾夸笅鍖哄煙鐨勯鑹�
-// areaStyle: {
-// color: new echarts.graphic.LinearGradient(
-// // 鍙�/涓�/宸�/涓�
-// 0, 0, 0, 1, [
-// { offset: 0, color: 'rgba(50, 255, 238, .1)' },
-// { offset: 1, color: 'transparent' }
-// ])
-// },
-// label: {
-// show: true,
-// position: 'insideBottomLeft',
-// formatter: params => {
-// return `${params.value}%`
-// },
-// textStyle: { fontSize: 14, color: '#32ffee' }
-// },
-// data: dataArr.rateDataOne
-// }, {
-// z: 9,
-// yAxisIndex: 1,
-// name: '涓嶈壇鐜�', type: 'line',
-// symbol: `path://M9.312,4.594 C12.074,4.594 14.313,6.832 14.313,9.594 C14.313,12.355 12.074,14.594 9.312,14.594 C6.551,14.594 4.312,12.355 4.312,9.594 C4.312,6.832 6.551,4.594 9.312,4.594 Z`,
-// // symbol: 'emptyCircle',
-// symbolSize: [10, 10],
-// color: {
-// type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
-// // 0% 澶勭殑棰滆壊 // 100% 澶勭殑棰滆壊
-// colorStops: [{ offset: 0, color: colorX }, { offset: 1, color: '#fff5cc' }],
-// global: false // 缂虹渷涓� false
-// },
-// lineStyle: {
-// color: {
-// type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
-// // 0% 澶勭殑棰滆壊 // 100% 澶勭殑棰滆壊
-// colorStops: [{ offset: 0, color: colorX }, { offset: 1, color: '#fff5cc' }],
-// global: false // 缂虹渷涓� false
-// }
-// },
-// // 淇敼鐨勬槸绾夸笅鍖哄煙鐨勯鑹�
-// areaStyle: {
-// color: new echarts.graphic.LinearGradient(
-// // 鍙�/涓�/宸�/涓�
-// 0, 0, 0, 1, [
-// { offset: 0, color: 'rgba(255, 209, 26, .2)' },
-// { offset: 1, color: 'transparent' }
-// ])
-// },
-// label: {
-// show: true,
-// position: 'insideBottomRight',
-// formatter: params => {
-// return `${params.value}%`
-// },
-// // textStyle: { fontSize: 14, color: '#ffd11a' }
-// textStyle: { fontSize: 14, color: colorX }
-// },
-// data: dataArr.rateDataTwo
-// }]
-// // const option = { tooltip, xAxis, yAxis, series, grid, legend, backgroundColor: 'rgba(0, 0, 0, .7)' }
-// const option = { xAxis, yAxis, series, grid, legend, backgroundColor: 'transparent' }
-// return option
-// }
-
-export function cjzl04() {
+export function cjzl03(xData, legendData, yData) { // 宸︿晶
return {
backgroundColor: 'transparent',
tooltip: {},
- // title: {
- // text: '璁㈠崟瀹屾垚鎬绘暟',
- // left: '50%',
- // top: '5%',
- // textAlign: 'center',
- // textStyle: {
- // // color: '#fff',
- // color: '#00ffff',
- // fontSize: '20',
- // fontWeight: 'bolder'
- // }
- // },
grid: {
left: '2%',
right: '2%',
@@ -2444,15 +2066,8 @@
containLabel: true
},
legend: {
- // show: true,
- // itemGap: 20,
- // data: ['娉ㄥ唽鎬婚噺', '鏈�鏂版敞鍐岄噺'],
- // textStyle: {
- // color: '#f9f9f9',
- // borderColor: '#fff'
- // }
- data: ['绮惧伐杞﹂棿', '瑁呴厤杞﹂棿', '鏈哄姞宸ヨ溅闂�', '鎶涘厜杞﹂棿', '鎵撶（杞﹂棿'],
- textStyle: { fontSize: 14, color: '#fff' },
+ data: legendData,
+ textStyle: { fontSize: 16, color: '#fff' },
itemWidth: 25,
itemHeight: 10,
itemGap: 15,
@@ -2465,7 +2080,7 @@
axisLabel: {
interval: 0,
formatter: '{value}',
- fontSize: 14,
+ fontSize: 16,
margin: 20,
textStyle: {
color: colorX
@@ -2485,7 +2100,7 @@
axisTick: {
show: false
},
- data: ['9鏈�4鍙�', '9鏈�5鍙�', '9鏈�6鍙�', '9鏈�7鍙�', '9鏈�8鍙�', '9鏈�9鍙�', '9鏈�10鍙�']
+ data: xData
}],
yAxis: [
{
@@ -2495,8 +2110,8 @@
type: 'value',
axisLabel: {
textStyle: {
- fontSize: 14,
- color: colorY
+ fontSize: 16,
+ color: colorX
}
},
// name: '鍗�',
@@ -2524,7 +2139,7 @@
],
series: [
{
- name: '绮惧伐杞﹂棿',
+ name: legendData[0],
type: 'line',
// smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
// symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
@@ -2533,9 +2148,9 @@
symbolSize: 6,
lineStyle: {
normal: {
- color: `rgb(71, 226, 194)` // 绾挎潯棰滆壊
+ color: '#00ffff' // 绾挎潯棰滆壊
},
- borderColor: `rgb(71, 226, 194)`
+ borderColor: '#00ffff'
},
// label: {
// show: true,
@@ -2546,7 +2161,7 @@
// },
itemStyle: {
normal: {
- color: `rgb(71, 226, 194)`
+ color: '#00ffff'
}
},
tooltip: {
@@ -2568,11 +2183,10 @@
// shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
// }
// },
- data: [393, 438, 485, 631, 689, 824, 987]
- // data: [600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100)]
+ data: yData[0]
},
{
- name: '瑁呴厤杞﹂棿',
+ name: legendData[1],
type: 'line',
// smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
// symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
@@ -2581,9 +2195,9 @@
symbolSize: 6,
lineStyle: {
normal: {
- color: '#32ffee' // 绾挎潯棰滆壊
+ color: '#ff3000' // 绾挎潯棰滆壊
},
- borderColor: '#32ffee'
+ borderColor: '#ff3000'
},
// label: {
// show: true,
@@ -2594,7 +2208,7 @@
// },
itemStyle: {
normal: {
- color: '#32ffee'
+ color: '#ff3000'
}
},
tooltip: {
@@ -2616,11 +2230,10 @@
// shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
// }
// },
- // data: [393, 438, 485, 631, 689, 824, 987]
- data: [10, 102, 30, 203, 40, 20, 405]
+ data: yData[1]
},
{
- name: '鏈哄姞宸ヨ溅闂�',
+ name: legendData[2],
type: 'line',
// smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
// symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
@@ -2629,9 +2242,9 @@
symbolSize: 6,
lineStyle: {
normal: {
- color: '#ffd11a' // 绾挎潯棰滆壊
+ color: '#ffe000' // 绾挎潯棰滆壊
},
- borderColor: '#ffd11a'
+ borderColor: '#ffe000'
},
// label: {
// show: true,
@@ -2642,7 +2255,7 @@
// },
itemStyle: {
normal: {
- color: '#ffd11a'
+ color: '#ffe000'
}
},
tooltip: {
@@ -2664,11 +2277,10 @@
// shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
// }
// },
- data: [93, 48, 45, 61, 89, 84, 97]
- // data: [600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100)]
+ data: yData[2]
},
{
- name: '鎶涘厜杞﹂棿',
+ name: legendData[3],
type: 'line',
// smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
// symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
@@ -2677,9 +2289,9 @@
symbolSize: 6,
lineStyle: {
normal: {
- color: `rgb(254, 94, 94)` // 绾挎潯棰滆壊
+ color: '#ffa800' // 绾挎潯棰滆壊
},
- borderColor: `rgb(254, 94, 94)`
+ borderColor: '#ffa800'
},
// label: {
// show: true,
@@ -2690,7 +2302,7 @@
// },
itemStyle: {
normal: {
- color: `rgb(254, 94, 94)`
+ color: '#ffa800'
}
},
tooltip: {
@@ -2712,11 +2324,10 @@
// shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
// }
// },
- data: [33, 438, 48, 63, 69, 82, 487]
- // data: [600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100)]
+ data: yData[3]
},
{
- name: '鎵撶（杞﹂棿',
+ name: legendData[4],
type: 'line',
// smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
// symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
@@ -2725,9 +2336,9 @@
symbolSize: 6,
lineStyle: {
normal: {
- color: `rgb(255, 221, 97)` // 绾挎潯棰滆壊
+ color: '#ff5b00' // 绾挎潯棰滆壊
},
- borderColor: `rgb(255, 221, 97)`
+ borderColor: '#ff5b00'
},
// label: {
// show: true,
@@ -2738,7 +2349,7 @@
// },
itemStyle: {
normal: {
- color: `rgb(255, 221, 97)`
+ color: '#ff5b00'
}
},
tooltip: {
@@ -2760,325 +2371,18 @@
// shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
// }
// },
- data: [93, 38, 85, 666, 555, 444, 333]
- // data: [600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100)]
+ data: yData[4]
}
-
]
}
}
-// export function cjzl03() {
-// const option = {
-// backgroundColor: 'transparent',
-// grid: {
-// left: '2%',
-// top: '10%',
-// right: '2%',
-// bottom: '20%',
-// containLabel: true
-// },
-// legend: {
-// // show: true,
-// // itemGap: 20,
-// // data: ['娉ㄥ唽鎬婚噺', '鏈�鏂版敞鍐岄噺'],
-// // textStyle: {
-// // color: '#f9f9f9',
-// // borderColor: '#fff'
-// // }
-// data: ['瀹屾垚鏁�', '瀹屾垚鐜�'],
-// textStyle: { fontSize: 14, color: '#fff' },
-// itemWidth: 25,
-// itemHeight: 10,
-// itemGap: 15,
-// bottom: '5%',
-// selectedMode: false
-// },
-// // tooltip: {
-// // show: true,
-// // trigger: 'axis', // axis , item
-// // backgroundColor: 'RGBA(0, 0, 0, 0.3)',
-// // borderColor: 'rgba(0, 151, 251, 0.6)',
-// // borderWidth: 1,
-// // borderRadius: 0,
-// // textStyle: {
-// // color: '#BCE9FC',
-// // fontSize: 14,
-// // align: 'left'
-// // },
-// // // formatter:'{b0}<br />{a0}:{c0}<br />{a1}:{c4}%'
-// //
-// // // formatter: '{b0}<br/>' +
-// // // '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgb(255,224,144)"></span>鎻愬嚭鍐嶅妫�瀵熷缓璁暟:{c0}<br/>' +
-// // // '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgb(72,226,198)"></span>閲囩撼鐜�:{c4}%<br/>'
-// //
-// // formatter: function(params) {
-// // var res = '' + params[0].name
-// // var valueMap = new Map()
-// // for (var i = 0, l = params.length; i < l; i++) {
-// // if (params[i].value !== '-') {
-// // valueMap.set(params[i].seriesName, params[i])
-// // }
-// // }
-// // valueMap.forEach((value, key) => {
-// // if (value.seriesName === '鎻愬嚭鍐嶅妫�瀵熷缓璁暟') {
-// // res += '<br/>' + value.marker + value.seriesName + ' : ' + value.value
-// // } else if (value.seriesName === '閲囩撼鐜�' && value.value !== '-') {
-// // res += '<br/>' + value.marker + value.seriesName + ' : ' + value.value
-// // }
-// // })
-// // return res
-// // }
-// //
-// // },
-// xAxis: {
-// type: 'category',
-// boundaryGap: true,
-// axisLabel: {
-// interval: 0,
-// formatter: '{value}',
-// fontSize: 14,
-// margin: 20,
-// textStyle: {
-// color: colorX
-// }
-// },
-// axisLine: {
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// splitLine: {
-// show: false,
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// axisTick: {
-// show: false
-// },
-// data: ['绮惧伐杞﹂棿', '鏈哄姞宸ヨ溅闂�', '杞﹁埞杞﹂棿', '绮楄溅杞﹂棿', '杞﹁埞杞﹂棿']
-// },
-// yAxis: [
-// {
-// boundaryGap: false,
-// // splitNumber: 4,
-// type: 'value',
-// // max: 100,
-// axisLabel: {
-// textStyle: {
-// fontSize: 14,
-// color: colorY
-// }
-// },
-// nameTextStyle: {
-// color: '#fff',
-// fontSize: 14,
-// lineHeight: 40
-// },
-// splitLine: {
-// show: true,
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// axisLine: {
-// show: true,
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// axisTick: {
-// show: false
-// }
-// },
-// {
-// boundaryGap: false,
-// splitNumber: 4,
-// type: 'value',
-// axisLabel: {
-// textStyle: {
-// fontSize: 14,
-// color: colorY
-// }
-// },
-// nameTextStyle: {
-// color: '#fff',
-// fontSize: 14,
-// lineHeight: 40
-// },
-// splitLine: {
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// axisLine: {
-// show: false,
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// axisTick: {
-// show: false
-// }
-// }
-// ],
-// series: [
-// {
-// name: '瀹屾垚鏁�',
-// type: 'bar',
-// yAxisIndex: 0,
-// showSymbol: true,
-// showAllSymbol: true,
-// symbolSize: 4,
-// barWidth: 14,
-// zlevel: 1,
-// itemStyle: {
-// color: {
-// type: 'linear',
-// x: 0,
-// y: 0,
-// x2: 0,
-// y2: 1,
-// colorStops: [{
-// offset: 0,
-// color: `rgba(255,224,144,1)` // 0% 澶勭殑棰滆壊
-// }, {
-// offset: 1,
-// color: `rgba(72,226,198,1)` // 100% 澶勭殑棰滆壊
-// }]
-// }
-// },
-// label: {
-// show: false,
-// position: 'top',
-// distance: 10,
-// fontSize: 16,
-// fontFamily: 'DIN',
-// color: '#ffffff',
-// zlevel: 4,
-// z: 10,
-// formatter: '{c}%'
-// },
-// data: [560, 760, 850, 490, 380]
-// },
-// {
-// // 鍊煎垎闅�
-// type: 'pictorialBar',
-// itemStyle: {
-// normal: {
-// color: '#0F375F'
-// }
-// },
-// symbolRepeat: 'fixed',
-// symbolMargin: 3,
-// symbol: 'rect',
-// symbolClip: true,
-// symbolSize: [14, 3],
-// symbolPosition: 'start',
-// symbolOffset: [0, -1],
-// // symbolBoundingData: this.total,
-// // data: [100, 100, 100, 100, 100],
-// data: [1000, 1000, 1000, 1000, 1000],
-// width: 25,
-// z: 0,
-// zlevel: 2
-// },
-// {
-// // 杈呭姪鑳屾櫙鍥惧舰
-// name: '浠诲姟鏁�',
-// type: 'bar', // pictorialBar
-// barWidth: '14',
-// barGap: '-100%',
-// itemStyle: {
-// normal: {
-// borderWidth: 0,
-// // color: 'rgba(146,158,48,0)'
-// color: 'rgba(146,158,48,0)'
-// },
-// barBorderRadius: 10
-// },
-// data: [800, 900, 1000, 600, 700],
-// z: 0,
-// zlevel: 0
-// },
-// {
-// name: '瀹屾垚鐜�',
-// type: 'line',
-// yAxisIndex: 1,
-// showSymbol: true,
-// showAllSymbol: true,
-// symbolSize: 6,
-// barWidth: 14,
-// zlevel: 3,
-// lineStyle: {
-// normal: {
-// width: 2,
-// color: `rgba(72,226,198)`
-// }
-// },
-// areaStyle: {
-// normal: {
-// color: {
-// type: 'linear',
-// x: 0,
-// y: 0,
-// x2: 0,
-// y2: 1,
-// colorStops: [
-// {
-// offset: 0,
-// color: `rgba(72,226,198, 0.3)`// 0% 澶勭殑棰滆壊
-// },
-// {
-// offset: 1,
-// color: `rgba(72,226,198, 0.2)` // 100% 澶勭殑棰滆壊
-// }
-// ],
-// globalCoord: false // 缂虹渷涓� false
-// } // 娓愬彉棰滆壊
-// }
-// },
-// itemStyle: {
-// normal: {
-// color: {
-// type: 'linear',
-// x: 0,
-// y: 0,
-// x2: 0,
-// y2: 1,
-// colorStops: [
-// {
-// offset: 0,
-// color: `rgba(72,226,198, 1)`// 0% 澶勭殑棰滆壊
-// },
-// {
-// offset: 1,
-// color: `rgba(72,226,198, 0.2)` // 100% 澶勭殑棰滆壊
-// }
-// ],
-// globalCoord: false // 缂虹渷涓� false
-// } // 娓愬彉棰滆壊
-// }
-// },
-// data: [70, 80, 90, 20, 30]
-// }
-// ]
-// }
-// return option
-// }
-
-export function cjzl03() {
- const data1 = [300, 100, 200, 200, 100]
- const data2 = [300, 200, 300, 300, 400]
-
- // let percent=[]
-
+export function cjzl04(xData, data1, data2, data3) { // 鍙充晶
const option = {
backgroundColor: 'transparent',
grid: {
left: '2%',
- top: '10%',
+ top: '12%',
right: '2%',
bottom: '20%',
containLabel: true
@@ -3092,7 +2396,7 @@
// borderColor: '#fff'
// }
data: ['瀹屾垚鏁�', '浠诲姟鏁�', '瀹屾垚鐜�'],
- textStyle: { fontSize: 14, color: '#fff' },
+ textStyle: { fontSize: 16, color: '#fff' },
itemWidth: 25,
itemHeight: 10,
itemGap: 15,
@@ -3105,7 +2409,7 @@
axisLabel: {
interval: 0,
formatter: '{value}',
- fontSize: 14,
+ fontSize: 16,
margin: 20,
textStyle: {
color: colorX
@@ -3125,7 +2429,7 @@
axisTick: {
show: false
},
- data: ['绮惧伐杞﹂棿', '鏈哄姞宸ヨ溅闂�', '瑁呴厤杞﹂棿', '绮楄溅杞﹂棿', '鍖呰杞﹂棿']
+ data: xData
},
yAxis: [
{
@@ -3135,8 +2439,8 @@
// max: 100,
axisLabel: {
textStyle: {
- fontSize: 14,
- color: colorY
+ fontSize: 16,
+ color: colorX
}
},
nameTextStyle: {
@@ -3167,13 +2471,13 @@
type: 'value',
axisLabel: {
textStyle: {
- fontSize: 14,
- color: colorY
+ fontSize: 16,
+ color: colorX
}
},
nameTextStyle: {
color: '#fff',
- fontSize: 14,
+ fontSize: 16,
lineHeight: 40
},
splitLine: {
@@ -3195,69 +2499,42 @@
],
series: [
{ // 涓変釜鏈�搴曚笅鐨勫渾鐗�
- 'name': '',
+ 'name': '瀹屾垚鏁�',
'type': 'pictorialBar',
'symbolSize': [45, 25],
'symbolOffset': [0, 10],
'z': 12,
+ color: `rgb(37,196,238)`,
itemStyle: {
opacity: 1,
color: function(params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
- color: '#00EC28' // 0% 澶勭殑棰滆壊
+ color: `rgb(37,196,238)` // 0% 澶勭殑棰滆壊
}, {
offset: 1,
- color: '#5DF076'// 100% 澶勭殑棰滆壊
+ color: `rgb(37,196,238)`// 100% 澶勭殑棰滆壊
}], false)
}
- // color: function(params) {
- // var a = params.name.slice(0, 2)
- // if (a === '绮惧伐') {
- // return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- // offset: 0,
- // color: '#FF9A22' // 0% 澶勭殑棰滆壊
- // }, {
- // offset: 1,
- // color: '#FFD56E'// 100% 澶勭殑棰滆壊
- // }], false)
- // } else if (a === '鏈哄姞' || a === '绮楄溅') {
- // return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- // offset: 0,
- // color: '#00EC28' // 0% 澶勭殑棰滆壊
- // }, {
- // offset: 1,
- // color: '#5DF076'// 100% 澶勭殑棰滆壊
- // }], false)
- // } else if (a === '瑁呴厤' || a === '鍖呰') {
- // return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- // offset: 0,
- // color: '#12B9DB' // 0% 澶勭殑棰滆壊
- // }, {
- // offset: 1,
- // color: '#6F8EF2'// 100% 澶勭殑棰滆壊
- // }], false)
- // }
- // }
},
'data': [1, 1, 1, 1, 1]
},
// 涓嬪崐鎴煴鐘跺浘
{
- name: '瀹屾垚鏁�',
+ name: '',
type: 'bar',
barWidth: 45,
barGap: '-100%',
itemStyle: { // lenged鏂囨湰
- opacity: 0.7,
+ opacity: 1,
color: function(params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
- color: '#00EC28' // 0% 澶勭殑棰滆壊
+ color: `rgb(35,131,180)` // 0% 澶勭殑棰滆壊
}, {
offset: 1,
- color: '#5DF076'// 100% 澶勭殑棰滆壊
+ color: `rgb(35,131,180)`// 100% 澶勭殑棰滆壊
}], false)
}
},
@@ -3276,10 +2553,8 @@
normal: {
show: true,
position: 'left',
-
- fontSize: 14,
+ fontSize: 16,
color: colorX,
- // offset: [-50, 15],
zIndex: 10
}
},
@@ -3311,10 +2586,10 @@
color: function(params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
- color: '#00EC28' // 0% 澶勭殑棰滆壊
+ color: `rgb(37,196,238)` // 0% 澶勭殑棰滆壊
}, {
offset: 1,
- color: '#5DF076'// 100% 澶勭殑棰滆壊
+ color: `rgb(37,196,238)`// 100% 澶勭殑棰滆壊
}], false)
}
},
@@ -3336,8 +2611,7 @@
normal: {
show: true,
position: 'top',
-
- fontSize: 14,
+ fontSize: 16,
color: colorX,
offset: [0, -5]
}
@@ -3357,7 +2631,7 @@
lineStyle: {
normal: {
width: 2,
- color: `rgba(72, 226, 198)`
+ color: `rgb(108,237,100)`
}
},
// areaStyle: {
@@ -3393,11 +2667,11 @@
colorStops: [
{
offset: 0,
- color: `rgba(72, 226, 198, 1)`// 0% 澶勭殑棰滆壊
+ color: `rgb(108,237,100)`// 0% 澶勭殑棰滆壊
},
{
offset: 1,
- color: `rgba(72, 226, 198, 0.2)` // 100% 澶勭殑棰滆壊
+ color: `rgb(108,237,100)` // 100% 澶勭殑棰滆壊
}
],
globalCoord: false // 缂虹渷涓� false
@@ -3416,7 +2690,7 @@
// offset: [0, -5]
}
},
- data: [100, 50, 66.7, 66.7, 25]
+ data: data3
}
]
}
--
Gitblit v1.9.3