From f9537176ce96bfc13a7d6e26bb6f2ec17def9bfb Mon Sep 17 00:00:00 2001
From: 小小儁爺 <1694218219@qq.com>
Date: 星期一, 01 七月 2024 17:42:35 +0800
Subject: [PATCH] 1.金华智研院看板 30%
---
src/utils/myEcharts.js | 3206 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 3,122 insertions(+), 84 deletions(-)
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index 68f6185..d9ab55a 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -1,6 +1,6 @@
import * as echarts from 'echarts'
-/**
+/** 255
* 缁熶竴鏍峰紡锛屽姞杞�
* @param {*} id
* @param {*} option
@@ -117,7 +117,7 @@
}
export function bar1(data1, data2) {
- const titleText = '杞﹂棿浜哄憳鍑哄嫟鐜�'
+ const titleText = '宸ュ巶浜哄憳鍑哄嫟鐜�'
const path = 'path://M214,1079l8-6h16l8,6-8,6H222Z'
// const data1 = ['80', '90', '70', '30', '50']
// const data2 = ['70', '60', '50', '40', '30']
@@ -145,7 +145,7 @@
textStyle: {
// color: '#fff',
color: '#00ffff',
- fontSize: '18',
+ fontSize: '20',
fontWeight: 'bolder'
},
subtextStyle: {
@@ -178,7 +178,7 @@
xAxis: {
type: 'category',
// data: ['杞﹂棿涓�', '杞﹂棿浜�', '杞﹂棿涓�', '杞﹂棿鍥�', '杞﹂棿浜�'],
- data: ['鎬昏杞﹂棿', '娉ㄥ杞﹂棿', '鐢垫満杞﹂棿', '閾濅欢杞﹂棿'],
+ data: ['娴欐睙鐨囧啝', '姘稿悍鐨囧啝', '鍖楄景鐢垫満', '鎭掓嘲鐨囧啝鍥灄', '杩堟嫇濉戜笟'],
axisLine: {
lineStyle: {
show: true,
@@ -194,7 +194,7 @@
fontFamily: 'Microsoft YaHei',
color: colorX, // x杞撮鑹�
fontWeight: 'normal',
- fontSize: '14',
+ fontSize: '12',
lineHeight: 22
}
}
@@ -371,7 +371,7 @@
return option
}
-export function line1(dataY) {
+export function line1(dataY, dataY2, dataY3, dataY4, dataY5) {
const option = {
backgroundColor: 'transparent',
grid: {
@@ -382,14 +382,15 @@
containLabel: true
},
title: {
- text: '閿�鍞姒傝',
+ // text: '閿�鍞姒傝',
+ text: '鍚勫伐鍘傝兘鑰�',
left: '50%',
top: '0%',
textAlign: 'center',
textStyle: {
// color: '#fff',
color: '#00ffff',
- fontSize: '18',
+ fontSize: '20',
fontWeight: 'bolder'
}
},
@@ -411,14 +412,13 @@
show: false,
right: 20,
orient: 'vertical',
- // data: ['浠婃棩','鏄ㄦ棩']
- data: ['浠婃棩']
+ data: ['娴欐睙鐨囧啝', '姘稿悍鐨囧啝', '鍖楄景鐢垫満', '鎭掓嘲鐨囧啝鍥灄', '杩堟嫇濉戜笟']
},
xAxis: {
// data: ['00:00','2:00','4:00','6:00','8:00','10:00','12:00','14:00','16:00','18:00','20:00',"22:00"],
// data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
- data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�'],
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
// type: 'category',
// boundaryGap: true,
// axisLabel: {
@@ -480,14 +480,14 @@
},
yAxis:
{
- name: '涓囧厓',
+ name: '',
nameTextStyle: {
color: colorY,
fontSize: 14,
lineHeight: 20
},
boundaryGap: false,
- splitNumber: 4,
+ splitNumber: 5,
type: 'value',
// offset: -30,
axisLabel: {
@@ -513,69 +513,167 @@
show: true
}
},
- series: [{
- name: '浠婃棩',
- type: 'line',
- smooth: true,
- showSymbol: false,
- symbol: 'circle',
- symbolSize: 6,
- // data: ['200', '400', '500', '300', '400', '500', '600', '800', '900', '1000', '1100', '1322'],
- data: dataY,
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgba(199, 237, 250,0.5)'
- }, {
- offset: 1,
- color: 'rgba(199, 237, 250,0.2)'
- }], false)
+ series: [
+ {
+ name: '娴欐睙鐨囧啝',
+ type: 'line',
+ smooth: true,
+ showSymbol: false,
+ symbol: 'circle',
+ symbolSize: 6,
+ // data: ['200', '400', '500', '300', '400', '500', '600', '800', '900', '1000', '1100', '1322'],
+ data: dataY,
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(0,215,236,0.5)'
+ }, {
+ offset: 1,
+ color: 'rgba(0,215,236,0.2)'
+ }], false)
+ }
+ },
+ itemStyle: {
+ normal: {
+ // color: '#f7b851'
+ // color: `rgb(73, 226, 196)`
+ color: `rgb(0, 215, 236)`
+ }
+ },
+ lineStyle: {
+ normal: {
+ width: 3
+ }
}
},
- itemStyle: {
- normal: {
- // color: '#f7b851'
- color: `rgb(73, 226, 196)`
+ {
+ name: '姘稿悍鐨囧啝',
+ type: 'line',
+ smooth: true,
+ showSymbol: false,
+ symbol: 'circle',
+ symbolSize: 6,
+ // data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
+ data: dataY2,
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(60,244,184,0.5)'
+ }, {
+ offset: 1,
+ color: 'rgba(60,244,184,0.2)'
+ }], false)
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: `rgb(60, 244, 184)`
+ }
+ },
+ lineStyle: {
+ normal: {
+ width: 3
+ }
}
},
- lineStyle: {
- normal: {
- width: 3
+ {
+ name: '鍖楄景鐢垫満',
+ type: 'line',
+ smooth: true,
+ showSymbol: false,
+ symbol: 'circle',
+ symbolSize: 6,
+ // data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
+ data: dataY3,
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(55,183,255,0.5)'
+ }, {
+ offset: 1,
+ color: 'rgba(55,183,255,0.2)'
+ }], false)
+ }
+ },
+ itemStyle: {
+ normal: {
+ // color: '#58c8da'
+ color: `rgb(55, 183, 255)`
+ }
+ },
+ lineStyle: {
+ normal: {
+ width: 3
+ }
+ }
+ },
+ {
+ name: '鎭掓嘲鐨囧啝鍥灄',
+ type: 'line',
+ smooth: true,
+ showSymbol: false,
+ symbol: 'circle',
+ symbolSize: 6,
+ // data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
+ data: dataY4,
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(26,202,200,0.5)'
+ }, {
+ offset: 1,
+ color: 'rgba(26,202,200,0.2)'
+ }], false)
+ }
+ },
+ itemStyle: {
+ normal: {
+ // color: '#58c8da'
+ color: `rgb(26, 202, 200)`
+ }
+ },
+ lineStyle: {
+ normal: {
+ width: 3
+ }
+ }
+ },
+ {
+ name: '杩堟嫇濉戜笟',
+ type: 'line',
+ smooth: true,
+ showSymbol: false,
+ symbol: 'circle',
+ symbolSize: 6,
+ // data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
+ data: dataY5,
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(243,94,94,0.5)'
+ }, {
+ offset: 1,
+ color: 'rgba(243,94,94,0.2)'
+ }], false)
+ }
+ },
+ itemStyle: {
+ normal: {
+ // color: '#58c8da'
+ color: `rgb(243, 94, 94)`
+ }
+ },
+ lineStyle: {
+ normal: {
+ width: 3
+ }
}
}
- }
- // {
- // name: '鏄ㄦ棩',
- // type: 'line',
- // smooth: true,
- // showSymbol: false,
- // symbol: 'circle',
- // symbolSize: 6,
- // data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
- // areaStyle: {
- // normal: {
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- // offset: 0,
- // color: 'rgba(216, 244, 247,1)'
- // }, {
- // offset: 1,
- // color: 'rgba(216, 244, 247,1)'
- // }], false)
- // }
- // },
- // itemStyle: {
- // normal: {
- // color: '#58c8da'
- // }
- // },
- // lineStyle: {
- // normal: {
- // width: 3
- // }
- // }
- // }
-
]
}
@@ -677,7 +775,7 @@
textAlign: 'center',
textStyle: {
color: '#00ffff',
- fontSize: '18',
+ fontSize: '20',
fontWeight: 'bolder'
}
},
@@ -703,14 +801,14 @@
const option = {
backgroundColor: 'transparent',
title: {
- text: '瀹㈡埛鍒嗘瀽鍥�',
+ text: '骞冲彴閾炬帴瀹㈡埛',
left: '50%',
top: '5%',
textAlign: 'center',
textStyle: {
// color: '#fff',
color: '#00ffff',
- fontSize: '18',
+ fontSize: '20',
fontWeight: 'bolder'
}
},
@@ -879,7 +977,7 @@
]
const color = ['26,171,234', '73,226,196', '255,221,97']
// const xList = ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�']
- const xList = ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�']
+ const xList = ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�']
const seriesData = []
list.forEach((r, i) => {
@@ -977,7 +1075,7 @@
textStyle: {
// color: '#fff',
color: '#00ffff',
- fontSize: '18',
+ fontSize: '20',
fontWeight: 'bolder'
}
},
@@ -1100,19 +1198,23 @@
export function bar4() {
const data = [{
- name: '鎬昏杞﹂棿',
+ name: '娴欐睙鐨囧啝',
value: Math.floor(Math.random() * 10 + 90)
},
{
- name: '娉ㄥ杞﹂棿',
+ name: '姘稿悍鐨囧啝',
value: Math.floor(Math.random() * 10 + 90)
},
{
- name: '鐢垫満杞﹂棿',
+ name: '鍖楄景鐢垫満',
value: Math.floor(Math.random() * 10 + 90)
},
{
- name: '閾濅欢杞﹂棿',
+ name: '鎭掓嘲鐨囧啝鍥灄',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '杩堟嫇濉戜笟',
value: Math.floor(Math.random() * 10 + 90)
}
// {
@@ -1151,13 +1253,13 @@
containLabel: true
},
title: {
- text: '杞﹂棿杈炬垚鐜�',
+ text: '宸ュ巶杈炬垚鐜�',
x: '46%',
y: '5%',
textStyle: {
// color: '#fff',
color: '#00ffff',
- fontSize: '18',
+ fontSize: '20',
fontWeight: 'bolder'
},
subtextStyle: {
@@ -1290,7 +1392,7 @@
textStyle: {
// color: '#fff',
color: '#00ffff',
- fontSize: '18',
+ fontSize: '20',
fontWeight: 'bolder'
}
},
@@ -1336,7 +1438,7 @@
axisTick: {
show: false
},
- data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�']
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�']
}],
yAxis: [
{
@@ -1421,7 +1523,7 @@
}
},
// 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)]
+ 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)]
}
// {
// name: '鏈�鏂版敞鍐岄噺',
@@ -1463,3 +1565,2939 @@
]
}
}
+
+// 缁煎悎鐪嬫澘
+export function zhkb01() {
+ // const zhkb01name = ['璁″垝瀹屾垚杩涘害(鑷骇)', '璁″垝瀹屾垚杩涘害(澶栬喘)'] // 鍚嶇О
+ const zhkb01name = ['', ''] // 鍚嶇О
+ const zhkb01Value = [Math.ceil(Math.random() * 10 + 90), Math.ceil(Math.random() * 10 + 90)] // 鍊�
+ const zhkb01Max = []
+
+ const max = Math.ceil(Math.max(...zhkb01Value.map(r => r)) * 1.1)
+ for (let i = 0; i < zhkb01Value.length; i++) {
+ zhkb01Max.push(max * 4)
+ // zhkb01Max.push(100)
+ }
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '4%',
+ right: '4%',
+ bottom: '4%',
+ top: '5%',
+ containLabel: true
+ },
+ // tooltip: {
+ // formatter: (params) => {
+ // if (params.name !== '') {
+ // return params.name + ' : ' + zhkb01Value[params.dataIndex]
+ // }
+ // },
+ // textStyle: {
+ // align: 'left'
+ // }
+ // },
+ xAxis: [
+ {
+ type: 'value',
+ axisLabel: {
+ show: false,
+ color: '#fff',
+ formatter: function(val) {
+ return val + ''
+ },
+ textStyle: {
+ fontSize: '13'
+ }
+ },
+ min: 0,
+ max: max, // 璁＄畻鏈�澶у��
+ interval: max / 5, // 骞冲潎鍒嗕负5浠�
+ splitNumber: 5,
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#fff',
+ width: 1,
+ opacity: 0.3
+ }
+ },
+ axisTick: {
+ show: false
+ }
+ },
+ {
+ type: 'value',
+ axisLabel: {
+ show: false
+ },
+ min: 0,
+ max: max, // 璁＄畻鏈�澶у��
+ interval: max / 10, // 骞冲潎鍒嗕负5浠�
+ splitNumber: 10,
+ splitLine: {
+ show: false,
+ lineStyle: {
+ type: 'dashed',
+ color: '#D8D8D8'
+ }
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ axisTick: {
+ show: false
+ }
+ }
+ ],
+ yAxis: [
+ {
+ // show: true,//鏆傛椂涓嶆樉绀�
+ show: false,
+ inverse: false,
+ data: zhkb01name,
+ axisLabel: {
+ padding: [30, 0, 0, -135],
+ // inside: true
+ textStyle: {
+ fontSize: 16,
+ fontFamily: 'PingFang SC',
+ // fontWeight: 400,
+ color: '#3dffef',
+ align: 'left'
+ }
+ // formatter: '{value}\n{a|鍗犱綅}',
+ // rich: {
+ // a: {
+ // // color: 'transparent',
+ // color: 'red',
+ // lineHeight: 30,
+ // fontFamily: 'digital',
+ // fontSize: 20,
+ // // shadowColor: 'rgba(0, 0, 0, 1)',
+ // shadowColor: 'red',
+ // shadowBlur: 10
+ // }
+ // }
+ },
+ // scale: true, // 鑷�傚簲
+ // offset: 50,
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ }
+ },
+ {
+ // 宸︿晶鏌辩姸鍥剧殑Y杞�
+ gridIndex: 0, // y杞存墍鍦ㄧ殑 grid 鐨勭储寮�
+ splitLine: 'none',
+ axisTick: 'none',
+ axisLine: 'none',
+ data: zhkb01Value,
+ // inverse: true,//鏄惁鏄弽鍚戝潗鏍囪酱銆�
+ axisLabel: {
+ show: true,
+ verticalAlign: 'center',
+ align: 'left',
+ padding: [0, 0, 0, 0],
+ textStyle: {
+ color: '#fff',
+ fontSize: '20'
+ },
+ formatter: function(value) {
+ return '{x| ' + value + '} {y|' + '%}'
+ },
+ rich: {
+ y: {
+ color: '#3dffef',
+ fontFamily: 'Orbitron',
+ fontSize: 16
+ },
+ x: {
+ color: '#3dffef',
+ fontFamily: 'Orbitron',
+ fontSize: 16
+ }
+ }
+ }
+ }
+ ],
+ series: [
+ {
+ name: '鍊�',
+ type: 'bar',
+ barGap: '-130%',
+ // zlevel: 1,
+ xAxisIndex: 0,
+ label: {
+ show: false,
+ position: 'right',
+ textStyle: {
+ color: '#fff',
+ fontSize: 20
+ }
+ },
+ itemStyle: {
+ normal: {
+ barBorderRadius: 4,
+ color: {
+ colorStops: [
+ {
+ offset: 0,
+ color: '#46B7ED' // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: '#48EDD3' // 100% 澶勭殑棰滆壊
+ }
+ ]
+ }
+ }
+ },
+ barWidth: 12,
+ data: zhkb01Value,
+ z: 0
+ },
+ {
+ // 鍒嗛殧
+ type: 'pictorialBar',
+ symbolRotate: '-20',
+ itemStyle: {
+ normal: {
+ color: 'rgba(1, 12, 38, 0.4)'
+ }
+ },
+ symbolRepeat: 'fixed',
+ symbolMargin: 10,
+ symbol: 'rect',
+ symbolClip: true,
+ symbolSize: [5, 28],
+ symbolPosition: 'start',
+ symbolOffset: [0, -1],
+ data: zhkb01Value,
+ z: 66,
+ animationEasing: 'elasticOut'
+ },
+ {
+ name: '鑳屾櫙',
+ type: 'bar',
+ barWidth: 14,
+ barGap: '-110%',
+ data: zhkb01Max,
+ itemStyle: {
+ normal: {
+ color: 'rgba(5,59,113,.7)',
+ barBorderRadius: 6,
+ borderColor: 'rgba(0, 255, 236, 1)'
+ }
+ },
+ z: -1
+ }
+ ]
+ }
+ return option
+}
+
+export function zhkb02() {
+
+}
+
+export function zhkb03(title) {
+ const labelData = []
+ const labelData1 = []
+ for (let i = 0; i < 80; ++i) {
+ labelData.push({
+ value: 1,
+ name: i,
+ itemStyle: {
+ normal: {
+ color: 'rgba(0,209,228,0)'
+ }
+ }
+ })
+ }
+ for (let i = 0; i < labelData.length; ++i) {
+ if (labelData[i].name < 15) {
+ labelData[i].itemStyle = {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0, 1, 0, 0,
+ [{
+ offset: 0,
+ color: '#6dfbff'
+ },
+ {
+ offset: 1,
+ color: '#02aeff'
+ }
+ ]
+ )
+ }
+
+ }
+ }
+ }
+ for (let i = 0; i < 80; ++i) {
+ labelData1.push({
+ value: 1,
+ name: i,
+ itemStyle: {
+ normal: {
+ color: 'rgba(0,209,228,0)'
+ }
+ }
+ })
+ }
+ for (let i = 0; i < labelData1.length; ++i) {
+ if (labelData1[i].name < 80) {
+ labelData1[i].itemStyle = {
+ normal: {
+ color: '#464451'
+ }
+
+ }
+ }
+ }
+
+ function Pie() {
+ const dataArr = []
+ for (var i = 0; i < 100; i++) {
+ if (i % 10 === 0) {
+ dataArr.push({
+ name: (i + 1).toString(),
+ value: 30,
+ itemStyle: {
+ normal: {
+ color: 'rgba(0,255,255,1)',
+ borderWidth: 0,
+ borderColor: 'rgba(0,0,0,0)'
+ }
+ }
+ })
+ } else {
+ dataArr.push({
+ name: (i + 1).toString(),
+ value: 100,
+ itemStyle: {
+ normal: {
+ color: 'rgba(0,0,0,0)',
+ borderWidth: 0,
+ borderColor: 'rgba(0,0,0,0)'
+ }
+ }
+ })
+ }
+ }
+ return dataArr
+ }
+
+ function Pie1() {
+ const dataArr = []
+ for (var i = 0; i < 100; i++) {
+ if (i % 5 === 0) {
+ dataArr.push({
+ name: (i + 1).toString(),
+ value: 20,
+ itemStyle: {
+ normal: {
+ color: 'rgba(0,255,255,1)',
+ borderWidth: 0,
+ borderColor: 'rgba(0,0,0,0)'
+ }
+ }
+ })
+ } else {
+ dataArr.push({
+ name: (i + 1).toString(),
+ value: 100,
+ itemStyle: {
+ normal: {
+ color: 'rgba(0,0,0,0)',
+ borderWidth: 0,
+ borderColor: 'rgba(0,0,0,0)'
+ }
+ }
+ })
+ }
+ }
+ return dataArr
+ }
+
+ function Pie2() {
+ const dataArr = []
+ for (var i = 0; i < 100; i++) {
+ if (i % 5 === 0) {
+ dataArr.push({
+ name: (i + 1).toString(),
+ value: 20,
+ itemStyle: {
+ normal: {
+ color: 'rgba(0,255,255,.3)',
+ borderWidth: 0,
+ borderColor: 'rgba(0,0,0,0)'
+ }
+ }
+ })
+ } else {
+ dataArr.push({
+ name: (i + 1).toString(),
+ value: 100,
+ itemStyle: {
+ normal: {
+ color: 'rgba(0,0,0,0)',
+ borderWidth: 0,
+ borderColor: 'rgba(0,0,0,0)'
+ }
+ }
+ })
+ }
+ }
+ return dataArr
+ }
+
+ const option = {
+ grid: {
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
+ top: '0%',
+ containLabel: true
+ },
+ backgroundColor: 'transparent',
+ title: [
+ {
+ text: title,
+ x: '46%',
+ y: '38%',
+ textAlign: 'center',
+ textStyle: {
+ fontSize: 12,
+ fontWeight: 'normal',
+ color: '#09d8f2'
+ }
+ },
+ {
+ text: '99%',
+ x: '49%',
+ y: '53%',
+ textAlign: 'center',
+ textStyle: {
+ fontSize: 18,
+ fontWeight: 800,
+ color: '#09d8f2'
+ }
+ }],
+ polar: {
+ radius: ['90%', '85%'],
+ center: ['50%', '50%']
+ },
+ angleAxis: {
+ max: 100,
+ show: false,
+ startAngle: 0
+ },
+ radiusAxis: {
+ type: 'category',
+ show: true,
+ axisLabel: {
+ show: false
+ },
+ axisLine: {
+ show: false
+
+ },
+ axisTick: {
+ show: false
+ }
+ },
+ series: [
+ // 鏈�閲屽湀
+ {
+ type: 'pie',
+ radius: ['91%', '89%'],
+ center: ['50%', '50%'],
+ data: [{
+ hoverOffset: 1,
+ value: 100,
+ name: '',
+ itemStyle: {
+ color: '#2f748b'
+ },
+ label: {
+ show: false
+ },
+ labelLine: {
+ normal: {
+ smooth: true,
+ lineStyle: {
+ width: 0
+ }
+ }
+ },
+ hoverAnimation: false
+ }]
+ },
+ // 閲岀浜屽湀
+ {
+ name: '',
+ type: 'bar',
+ roundCap: true, // 鍦嗚
+ barWidth: 60,
+ showBackground: true,
+ backgroundStyle: {
+ color: '#3d4767'
+ },
+ data: [75],
+ coordinateSystem: 'polar',
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+ offset: 0,
+ color: '#0ff'
+ }, {
+ offset: 1,
+ color: '#02aeff'
+ }])
+ }
+ }
+ },
+ // 榻胯疆
+ {
+ name: '澶х幆',
+ type: 'gauge',
+ splitNumber: 100,
+ radius: '124%',
+ center: ['50%', '50%'],
+ startAngle: 90,
+ endAngle: -269.9999,
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: [[0.3, '#26a7d4'], [1, '#23395a']]
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ length: 8,
+ lineStyle: {
+ color: 'auto',
+ width: 2.5
+ }
+ },
+ axisLabel: {
+ show: false
+ },
+ detail: {
+ show: false
+ }
+ },
+ // 澶栧湀瑁呴グ
+ {
+ type: 'pie',
+ zlevel: 0,
+ silent: true,
+ radius: ['110%', '108.5%'],
+ center: ['50%', '50%'],
+ z: 1,
+ label: {
+ normal: {
+ show: false
+ }
+ },
+ labelLine: {
+ normal: {
+ show: false
+ }
+ },
+ data: Pie()
+ },
+ // {
+ // type: 'pie',
+ // zlevel: 0,
+ // silent: true,
+ // startAngle: -150,
+ // radius: ['58.5%', '57%'],
+ // center: ['50%', '50%'],
+ // z: 1,
+ // label: {
+ // normal: {
+ // show: false
+ // }
+ // },
+ // labelLine: {
+ // normal: {
+ // show: false
+ // }
+ // },
+ // data: Pie3()
+ // },
+ {
+ type: 'pie',
+ zlevel: 0,
+ silent: true,
+ startAngle: -140,
+ radius: ['100%', '98.5%'],
+ center: ['50%', '50%'],
+ z: 1,
+ label: {
+ normal: {
+ show: false
+ }
+ },
+ labelLine: {
+ normal: {
+ show: false
+ }
+ },
+ data: Pie()
+ },
+ {
+ type: 'pie',
+ zlevel: 0,
+ silent: true,
+ radius: ['98%', '96.5%'],
+ center: ['50%', '50%'],
+ z: 1,
+ label: {
+ normal: {
+ show: false
+ }
+ },
+ labelLine: {
+ normal: {
+ show: false
+ }
+ },
+ data: Pie1()
+ },
+ {
+ type: 'pie',
+ zlevel: 0,
+ silent: true,
+ startAngle: -140,
+ radius: ['98%', '96.5%'],
+ center: ['50%', '50%'],
+ z: 1,
+ label: {
+ normal: {
+ show: false
+ }
+ },
+ labelLine: {
+ normal: {
+ show: false
+ }
+ },
+ data: Pie2()
+ },
+ {
+ type: 'pie',
+ zlevel: 0,
+ silent: true,
+ startAngle: -147.5,
+ radius: ['98%', '96.5%'],
+ center: ['50%', '50%'],
+ z: 1,
+ label: {
+ normal: {
+ show: false
+ }
+ },
+ labelLine: {
+ normal: {
+ show: false
+ }
+ },
+ data: Pie2()
+ }
+ ]
+ }
+
+ return option
+}
+
+export function zhkb04() {
+ const myColor = ['#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3']
+ // const data = [330, 404, 780, 509, 150]
+ const data = [Math.ceil(Math.random() * 100 + 500), Math.ceil(Math.random() * 100 + 600), Math.ceil(Math.random() * 100 + 700), Math.ceil(Math.random() * 400 + 500), Math.ceil(Math.random() * 100 + 200)]
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '10%',
+ right: '4%',
+ bottom: '0%',
+ top: '5%',
+ containLabel: true
+ },
+ xAxis: [{
+ show: false
+ }],
+ yAxis: [
+ {
+ axisTick: 'none',
+ axisLine: 'none',
+ offset: '27',
+ axisLabel: {
+ textStyle: {
+ color: function(value, index) {
+ let temp = ''
+ myColor.forEach((it, ind) => {
+ if (index === ind) {
+ temp = it
+ }
+ })
+ return temp
+ },
+ fontSize: 16
+ }
+ },
+ data: ['绗洓瀛ｅ害璁㈠崟鏁�', '绗笁瀛ｅ害璁㈠崟鏁�', '绗簩瀛ｅ害璁㈠崟鏁�', '绗竴瀛ｅ害璁㈠崟鏁�', '鍦ㄥ埗璁㈠崟鏁伴噺']
+ },
+ {
+ axisTick: 'none',
+ axisLine: 'none',
+ axisLabel: {
+ textStyle: {
+ color: function(value, index) {
+ let temp = ''
+ myColor.forEach((it, ind) => {
+ if (index === ind) {
+ temp = it
+ }
+ })
+ return temp
+ },
+ fontSize: 16
+ }
+ },
+
+ data: data
+ },
+ {
+ show: false,
+ name: '鍗曚綅锛氫欢',
+ nameGap: '50',
+ nameTextStyle: {
+ color: '#ffffff',
+ fontSize: '16'
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(0,0,0,0)'
+ }
+ },
+ data: []
+ }
+ ],
+ series: [
+ {
+ name: '鏉�',
+ type: 'bar',
+ yAxisIndex: 0,
+ data: data.map(r => r / 10),
+ label: {
+ normal: {
+ show: false,
+ position: 'right',
+ formatter: function(param) {
+ return param.value + '%'
+ },
+ textStyle: {
+ color: '#ffffff',
+ fontSize: '16'
+ }
+ }
+ },
+ barWidth: 12,
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ var num = myColor.length
+ return myColor[params.dataIndex % num]
+ }
+ }
+ },
+ z: 2
+ },
+ {
+ name: '鐧芥',
+ type: 'bar',
+ yAxisIndex: 1,
+ barGap: '-100%',
+ data: [99.5, 99.5, 99.5, 99.5, 99.5],
+ barWidth: 20,
+ itemStyle: {
+ normal: {
+ color: '#0e2147',
+ barBorderRadius: 5
+ }
+ },
+ z: 1
+ },
+ {
+ name: '澶栨',
+ type: 'bar',
+ yAxisIndex: 2,
+ barGap: '-100%',
+ data: [100, 100, 100, 100, 100],
+ barWidth: 24,
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ var num = myColor.length
+ return myColor[params.dataIndex % num]
+ },
+ barBorderRadius: 5
+ }
+ },
+ z: 0
+ },
+ {
+ name: '澶栧渾',
+ type: 'scatter',
+ hoverAnimation: false,
+ data: [0, 0, 0, 0, 0],
+ yAxisIndex: 2,
+ symbolSize: 30,
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ var num = myColor.length
+ return myColor[params.dataIndex % num]
+ },
+ opacity: 1
+ }
+ },
+ z: 2
+ }
+ ]
+ }
+
+ return option
+}
+
+export function zhkb05() {
+// 鏁版嵁
+// var XName = ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩']
+ var XName = ['01鏈�', '02鏈�', '03鏈�', '04鏈�', '05鏈�', '06鏈�', '07鏈�', '08鏈�', '09鏈�', '10鏈�', '11鏈�', '12鏈�']
+ var data1 = [
+ // [123, 121, 123, 321, 222, 111, 234, 121, 123, 321, 222, 321]
+ [Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 300), Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 300), Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 300)]
+ // [123, 154, 234, 321, 120, 390, 634],
+ // [63, 194, 234, 321, 278, 110, 534],
+ // [53, 254, 234, 321, 118, 240, 434],
+ // [23, 354, 334, 221, 178, 190, 234]
+ ]
+ var Line = ['浜戠瘑灞辨按璺嚎', '鏄曞崥鏈楀鏍¤矾绾�', '鏂板崕灏忓璺嚎', '浜戦敠浜旇矾璺嚎']
+ var img = [
+ 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABRCAYAAABFTSEIAAAACXBIWXMAAAsSAAALEgHS3X78AAAEp0lEQVR42u3cz4sjRRTA8W9Vd3Vn8mMmjj9WQWSRZQ+CsH+B7MnDIgiCd0E8CYJ/gOAIelo8ehUP/gF6WLw5/gMueFP2sIcF0dHd2Z1kknR11fOQZJJJMtlZd03H7HtQpNOTnpn+8Lrm1etmjIig8e/DKoECKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIqoAJudKTr+osZMNPvBUQBHwHsPF9fB9R0DeHMOQ6T6WOrhEzXBM4swDOL0M6CrArRVoq3t2dGUIb9fTvatg8ZZup1PDBgzPmy98mey6qfzjLz2WaWjEUZKEvGyi9nWyneMOvGIyFQo2Sbg4MUSChpU9IeTTUpJdsEajPZOJeJG5uBZj7rLLduWS5dGm6XNLEELOFUFj54ACJCaychkpDSASK3bwsXL0YgVpWJKwM0iy9Zy8HdGru7jvt3Pbu7w0wES7drTwAbjTHMGCsQcIAnYTC1/wRx0wEnl27JNgZI8HQ6Kc1mQq83RNzaMjPzXqDbjTQaJRFLxIyyMSxAXEkWrhrQzAAmo5HOjCQf7jflILxOkohL+aUPgV4vEGNJo+E5PAy02+UIMEwBxo0CPDP7Dg5SnEtpt1PA0e87XO25FOoh8IYIH2Y5b45RzGAQBiIltZoHxqMcjbksXAVgdc2EQMYzzzdotyeZWKuleULXJtwT4SODfC2QCWR+IF9KnjuX1Xbo99Op7LVE8iXlz0YBTk5SyLEEjo5OLuccEoFUvHfO+reuUPx4zftXAIcx1hdcF+/TvFab4A0Bs0VwqyhpVnkJT89/Q4DDQ0e77YCMwIUsFMeFZD856699URRvX4nxE4A/jbnxXp7v4Zw3ReGNSDHI8wFQjIafuoyn58L/fB6sth/Ybg9fez2TRC6QZcZYvgHsazF+MP7YCyLXcM7gvSXLDGBqYDg+NhwdmSpPoTrAkub0W+f4FSB1fDucIunMHSLpO8WAH0rSy8u+19MBCHB4OHzd2pI+CEUhpigEiN+l6WcdY252jLn5s7Wf472ImPcN8pUl/tEHoV4XWq1Ke4KrLmPsTA3oODpytFoOyJKSyzHyMSIxteWngMW5cSEdDJQUhTdZVgxOz3/+jFJm4+bA2e5JpNU6WZ4Fw99JwnWMKccwpeddP+B7GZTNUPKqybJy0O+Hs1YfMz9swwvpB8fbGDG0GuGkkK7V0hxSmZQpABI8l2z0v3sJf50qpAMJCd2qCulql3LD1lRGQjm7lEsDz0rkxTQOfiPPxUBcuJTbbhss/Y1eyi3NwsmKInmkZsKk5gtPUzNhvp11507CSy/X6XYStpvFudpZw1ZWIOF4Cq6SdtbKbioJyAhRTu3u9yMJXerN+ugvaQQsjcZ8Q3VnZwxlSDhe1lB9GjrSw5b+1avT8+Jw+979nNaOI6U3KpTrWAosxVQmygK4ld8X0ZtK/7eViExD7O1NQPb3T7fsl4/4sBpwYzPwjFbTo95Yl9l9Vd1YN1X/147HebSjary1AHyc5qc+XLQEQx9ve8Kg6xr6hKoCKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIq4JrHP8fEWV8FMTmOAAAAAElFTkSuQmCC',
+ 'image://data:image/png;base64,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',
+ 'image://data:image/png;base64,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',
+ 'image://data:image/png;base64,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'
+ ]
+ // var color = ['#00f8ff', '#00f15a', '#0696f9', '#dcf776']
+ var color = ['#00f8ff']
+
+ // 鏁版嵁澶勭悊
+ var datas = []
+ Line.map((item, index) => {
+ datas.push(
+ {
+ symbolSize: 150,
+ symbol: img[index],
+ name: item,
+ type: 'line',
+ yAxisIndex: 1,
+ data: data1[index],
+ itemStyle: {
+ normal: {
+ borderWidth: 5,
+ color: color[index]
+ }
+ }
+ }
+ )
+ })
+
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '5%',
+ top: '20%',
+ bottom: '0%',
+ right: '5%',
+ containLabel: true
+ },
+ title: {
+ text: '浠婂勾姣忔湀璁㈠崟鏁伴噺',
+ x: '50%',
+ y: '0%',
+ textAlign: 'center',
+ textStyle: {
+ fontSize: 16,
+ fontWeight: 'normal',
+ color: '#00FFFF'
+ }
+ },
+ legend: {
+ show: false,
+ type: 'scroll',
+ data: Line,
+ itemWidth: 18,
+ itemHeight: 12,
+ textStyle: {
+ color: '#00ffff',
+ fontSize: 14
+ }
+ },
+ yAxis: [
+ {
+ type: 'value',
+ position: 'right',
+ splitLine: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ }
+ },
+ {
+ // show: false,
+ type: 'value',
+ position: 'left',
+ // name: '浠婂勾姣忔湀璁㈠崟鏁伴噺',
+ nameTextStyle: {
+ color: '#00FFFF',
+ fontSize: 16
+ },
+ splitNumber: 3,
+ // nameLocation: 'center',
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: 'rgba(135,140,147,0.8)'
+ }
+ },
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ formatter: '{value}',
+ color: '#00FFFF',
+ fontSize: 14
+ }
+ }
+ ],
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#6A989E'
+ }
+ },
+ axisLabel: {
+ inside: false,
+ textStyle: {
+ color: colorX, // x杞撮鑹�
+ fontWeight: 'normal',
+ fontSize: 16,
+ lineHeight: 22
+ }
+
+ },
+ data: XName
+ },
+ {
+ type: 'category',
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ },
+ splitArea: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ // -----
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�']
+ }
+ ],
+ series: datas
+ }
+ // 褰撶偣鍑籰egend閫夐」鏃舵姌绾夸笂鐨勫皬鍥剧墖浼氭秷澶憋紝涓洪伩鍏嶈繖绉嶆儏鍐碉紝鍙互閲囧彇浠ヤ笅鍒濆鍖栨柟娉� 浣跨敤svg
+ // var myCharts = echarts.init(document.getElementById('AnalysisChartLine'), null, {renderer: 'svg'});
+ // myCharts.clear();
+ // myCharts.setOption(option)
+
+ return option
+}
+
+export function zhkb06(title) {
+ const option = {
+ backgroundColor: 'transparent',
+ title: [
+ {
+ text: title,
+ x: 'center',
+ top: '55%',
+ textStyle: {
+ color: '#FFFFFF',
+ fontSize: 14,
+ fontWeight: 100
+ }
+ },
+ {
+ text: '95%',
+ x: 'center',
+ top: '38%',
+ textStyle: {
+ fontSize: 14,
+ color: '#FFFFFF',
+ fontFamily: 'DINAlternate-Bold, DINAlternate',
+ foontWeight: 100
+ }
+ }
+ ],
+ grid: {
+ left: '0%',
+ top: '0%',
+ bottom: '0%',
+ right: '0%',
+ containLabel: true
+ },
+ angleAxis: {
+ max: 100,
+ clockwise: false, // 閫嗘椂閽�
+ // 闅愯棌鍒诲害绾�
+ show: false,
+ boundaryGap: ['40%', '40%'],
+ startAngle: 90
+ },
+ radiusAxis: {
+ type: 'category',
+ show: true,
+ axisLabel: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ }
+ },
+ polar: [
+ {
+ center: ['50%', '50%'], // 涓績鐐逛綅缃�
+ radius: '165%' // 鍥惧舰澶у皬
+ }
+ ],
+ series: [
+ {
+ name: '榻胯疆',
+ type: 'gauge',
+ splitNumber: 60,
+ radius: '132%',
+ center: ['50%', '50%'],
+ startAngle: 90,
+ endAngle: -269.9999,
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: [[0.3, '#26a7d4'], [1, '#23395a']]
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ length: 8,
+ lineStyle: {
+ color: 'auto',
+ width: 2.5
+ }
+ },
+ axisLabel: {
+ show: false
+ },
+ detail: {
+ show: false
+ }
+ },
+ {
+ type: 'bar',
+ z: 10,
+ data: [75],
+ showBackground: false,
+ backgroundStyle: {
+ color: 'blue',
+ borderWidth: 4,
+ width: 4
+ },
+ coordinateSystem: 'polar',
+ roundCap: true,
+ barWidth: 6, // 澶х殑鍗犳瘮鐜�
+ itemStyle: {
+ normal: {
+ opacity: 1,
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+ {
+ offset: 0,
+ color: '#00FFFF'
+ },
+ {
+ offset: 1,
+ color: '#09d8f2'
+ }
+ ])
+ }
+ }
+ },
+ {
+ type: 'pie',
+ name: '鍐呭眰缁嗗渾鐜�',
+ radius: ['82%', '83%'],
+ startAngle: 110,
+ hoverAnimation: false,
+ clockWise: true,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+ {
+ offset: 0,
+ color: 'rgba(151,179,166,0.74)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(151,179,166,0.74)'
+ }
+ ]),
+ shadowBlur: 20,
+ shadowColor: '#66666a'
+ }
+ },
+ tooltip: {
+ show: false
+ },
+ label: {
+ show: false
+ },
+ data: [100]
+ }
+ ]
+ }
+ return option
+}
+
+export function zhkb07(title, value) {
+ const dataArr = [
+ {
+ value: value,
+ name: title
+ }
+ ]
+ const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ {
+ offset: 0,
+ color: '#1f79b6' // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: '#0dd2db' // 100% 澶勭殑棰滆壊
+ }
+ ])
+ const colorSet = [
+ [value / 100, color],
+ [1, '#15337C']
+ ]
+ const rich = {
+ white: {
+ fontSize: 14,
+ color: '#fff',
+ fontWeight: '500'
+ },
+ bule: {
+ fontSize: 14,
+ fontFamily: 'DINBold',
+ color: '#fff',
+ fontWeight: 100
+ },
+ radius: {
+ width: 350,
+ height: 80,
+ // lineHeight:80,
+ borderWidth: 1,
+ borderColor: '#0092F2',
+ fontSize: 14,
+ color: '#fff',
+ backgroundColor: '#1B215B',
+ borderRadius: 20,
+ textAlign: 'center'
+ },
+ size: {
+ height: 400,
+ padding: [100, 0, 0, 0]
+ }
+ }
+ const option = {
+ backgroundColor: 'transparent',
+ tooltip: {
+ formatter: '{a} <br/>{b} : {c}%'
+ },
+ series: [
+ {
+ type: 'gauge',
+ radius: '90%',
+ startAngle: '225',
+ endAngle: '-45',
+ pointer: {
+ show: false
+ },
+ detail: {
+ formatter: function(value) {
+ var num = Math.round(value)
+ return '{bule|' + num + '}{white|%}'
+ },
+ rich: rich,
+ offsetCenter: ['0%', '0%']
+ },
+ data: dataArr,
+ title: {
+ show: true,
+ color: '#fff',
+ offsetCenter: ['0', '75%'],
+ fontSize: 14
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: colorSet,
+ width: 12,
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ opacity: 1
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: false,
+ length: 10,
+ lineStyle: {
+ color: '#00377a',
+ width: 2,
+ type: 'solid'
+ }
+ },
+ axisLabel: {
+ show: false
+ }
+ }
+ ]
+ }
+
+ return option
+}
+
+export function zhkb08() {
+ const data = [
+ {
+ name: '閽㈡潗鏀瑰埗杞﹂棿',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '鍐峰ⅸ杞﹂棿',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '鐑ⅸ杞﹂棿',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '鐑鐞嗚溅闂�',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '杈惧厠缃楄溅闂�',
+ value: Math.floor(Math.random() * 10 + 90)
+ },
+ {
+ name: '闀�閿岃溅闂�',
+ value: Math.floor(Math.random() * 10 + 90)
+ }
+ ]
+
+ const myColor = ['#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#ff00ff']
+
+ const getArrByKey = (data, k) => {
+ const key = k || 'value'
+ const res = []
+ if (data) {
+ data.forEach(function(t) {
+ res.push(t[key])
+ })
+ }
+ return res
+ }
+ const getSymbolData = (data) => {
+ const arr = []
+ for (var i = 0; i < data.length; i++) {
+ arr.push({
+ value: data[i].value,
+ symbolPosition: 'end'
+ })
+ }
+ return arr
+ }
+ // console.log(getSymbolData(data));
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
+ top: '15%',
+ containLabel: true
+ },
+ title: {
+ text: '涔濇湀鑳借�楃敤閲�',
+ x: '44%',
+ y: '0%',
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 16
+ }
+ // subtextStyle: {
+ // color: '#90979c',
+ // fontSize: '16'
+ // }
+ },
+ xAxis: {
+ show: false
+ },
+ yAxis: [
+ {
+ triggerEvent: true,
+ show: true,
+ inverse: true,
+ data: getArrByKey(data, 'name'),
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ // color: colorY,
+ align: 'left',
+ margin: 30,
+ textStyle: {
+ color: function(value, index) {
+ let temp = ''
+ myColor.forEach((it, ind) => {
+ if (index === ind) {
+ temp = it
+ }
+ })
+ return temp
+ },
+ fontSize: 16,
+ align: 'right'
+ // width: 36
+ }
+ // formatter: function(value, index) {
+ // return '{title|' + value + '}'
+ // },
+ // rich: {
+ // title: {
+ // width: 36,
+ // align: 'right',
+ // fontSize: 16
+ // }
+ // }
+ }
+ },
+ {
+ triggerEvent: true,
+ show: true,
+ inverse: true,
+ data: getArrByKey(data, 'name'),
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ interval: 0,
+ shadowOffsetX: '-20px',
+ // color: colorX,
+ color: function(value, index) {
+ let temp = ''
+ myColor.forEach((it, ind) => {
+ if (index === ind) {
+ temp = it
+ }
+ })
+ return temp
+ },
+ align: 'left',
+ verticalAlign: 'center',
+ lineHeight: 40,
+ fontSize: 16,
+ margin: 20,
+ formatter: function(value, index) {
+ // return data[index].value + '%'
+ return data[index].value + '鍚�'
+ }
+
+ }
+ }],
+ series: [
+ {
+ name: 'XXX',
+ type: 'pictorialBar',
+ symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
+ symbolSize: [50, 50],
+ symbolOffset: [20, 0],
+ z: 12,
+ itemStyle: {
+ normal: {
+ color: '#fff'
+ }
+ },
+ data: getSymbolData(data)
+ },
+ {
+ name: '鏉�',
+ type: 'bar',
+ showBackground: true,
+ yAxisIndex: 0,
+ data: data,
+ barWidth: 10,
+ // align: left,
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ return myColor[params.dataIndex]
+ },
+ barBorderRadius: 10
+ }
+ }
+ // label: {
+ // normal: {
+ // color: '#fff',
+ // show: true,
+ // position: ["-80px", 0],
+ // textStyle: {
+ // fontSize: 16
+ // },
+ // formatter: function(a, b) {
+ // return a.name
+ // }
+ // }
+ // }
+ }]
+ }
+
+ return option
+}
+
+// 鏆傛椂寮冪敤
+export function zhkb092222() {
+ const data = [220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
+ const sideData = data.map(item => item + 4.5)
+
+ const option = {
+
+ backgroundColor: 'transparent',
+ // tooltip: {
+ // trigger: 'axis',
+ // formatter: '{b} : {c}',
+ // axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+ // type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ // }
+ // },
+ grid: {
+ left: '2%',
+ right: '2%',
+ bottom: '2%',
+ top: '15%',
+ containLabel: true
+ },
+ title: {
+ text: '杩戜竴骞存瘡鏈堣兘鑰椾娇鐢�',
+ x: '40%',
+ y: '0%',
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 16
+ }
+ // subtextStyle: {
+ // color: '#90979c',
+ // fontSize: '16'
+ // }
+ },
+ xAxis: {
+ data: ['01鏈�', '02鏈�', '03鏈�', '04鏈�', '05鏈�', '06鏈�', '07鏈�', '08鏈�', '09鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ // 鍧愭爣杞�
+ axisLine: {
+ lineStyle: {
+ color: '#3eb2e8'
+ }
+ },
+ // 鍧愭爣鍊兼爣娉�
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: colorX,
+ fontSize: 14
+ }
+ }
+ },
+ yAxis: {
+ // 鍧愭爣杞�
+ axisLine: {
+ show: false
+ },
+ // 鍧愭爣鍊兼爣娉�
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 14
+ }
+ },
+ // 鍒嗘牸绾�
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: 'rgba(135,140,147,0.8)'
+ }
+ },
+ splitNumber: 3
+ },
+ series: [
+ {
+ name: 'a',
+ tooltip: {
+ show: false
+ },
+ type: 'bar',
+ barWidth: 18,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: '#0B4EC3' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 0.6,
+ color: '#138CEB' // 60% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#17AAFE' // 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ data: data,
+ barGap: 0
+ },
+ {
+ type: 'bar',
+ barWidth: 8,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: '#09337C' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 0.6,
+ color: '#0761C0' // 60% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#0575DE' // 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ barGap: 0,
+ data: sideData
+ },
+ {
+ name: 'b',
+ tooltip: {
+ show: false
+ },
+ type: 'pictorialBar',
+ itemStyle: {
+ borderWidth: 1,
+ borderColor: '#0571D5',
+ color: '#1779E0'
+ },
+ symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
+ symbolSize: ['30', '6'],
+ symbolOffset: ['0', '-4'],
+ // symbolRotate: -5,
+ symbolPosition: 'end',
+ data: data,
+ z: 3
+ }
+ ]
+ }
+ return option
+}
+
+export function zhkb09() {
+ // const dataY = [60, 70, 80, 90, 60, 70, 80, 90, 80, 90, 60, 70, 80, 90]
+ const dataY = [(80 + Math.random() * 10), (90 - Math.random() * 30), (60 + Math.random() * 30), (70 + Math.random() * 20), (80 + Math.random() * 10), (90 - Math.random() * 30), (80 - Math.random() * 30), (90 - Math.random() * 30), (60 + Math.random() * 30), (70 + Math.random() * 20), (80 - Math.random() * 10), (90 - Math.random() * 30)]
+
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '2%',
+ right: '2%',
+ bottom: '2%',
+ top: '15%',
+ containLabel: true
+ },
+ title: {
+ text: '杩戜竴骞存瘡鏈堣兘鑰椾娇鐢�',
+ x: '40%',
+ y: '0%',
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 16
+ }
+ },
+ color: ['#3cefff'],
+ tooltip: {},
+ xAxis: [
+ {
+ type: 'category',
+ data: ['01鏈�', '02鏈�', '03鏈�', '04鏈�', '05鏈�', '06鏈�', '07鏈�', '08鏈�', '09鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ axisTick: {
+ alignWithLabel: true
+ },
+ nameTextStyle: {
+ color: '#82b0ec'
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#82b0ec'
+ }
+ },
+ axisLabel: {
+ margin: 20,
+ textStyle: {
+ // color: '#82b0ec'
+ color: colorX,
+ fontSize: 14
+ }
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ axisLabel: {
+ textStyle: {
+ color: '#09d8f2',
+ fontSize: 14
+ }
+ // formatter: '{value}%'
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: 'rgba(135,140,147,0.8)'
+ }
+ },
+ axisLine: {
+ show: false
+ }
+ }
+ ],
+ series: [
+ {
+ name: '',
+ type: 'pictorialBar',
+ symbolSize: [20, 10],
+ symbolOffset: [0, -5],
+ symbolPosition: 'end',
+ z: 12,
+ label: {
+ normal: {
+ show: false,
+ position: 'top',
+ formatter: '{c}%'
+ }
+ },
+ data: dataY
+ },
+ {
+ name: '',
+ type: 'pictorialBar',
+ symbolSize: [20, 10],
+ symbolOffset: [0, 5],
+ z: 12,
+ data: dataY
+ },
+ {
+ type: 'bar',
+ itemStyle: {
+ normal: {
+ opacity: 0.7
+ }
+ },
+ barWidth: '20',
+ data: dataY
+ // markLine: {
+ // silent: true,
+ // label: {
+ // position: 'middle',
+ // formatter: '{b}',
+ // color: 'red'
+ // },
+ // data: [
+ // {
+ // name: '鐩爣鍊�',
+ // yAxis: 80,
+ // lineStyle: {
+ // color: 'red'
+ // },
+ // itemStyle: {
+ // color: 'red'
+ // },
+ // label: {
+ // position: 'end',
+ // formatter: '{b}\n {c}%'
+ // }
+ // }
+ // ]
+ // }
+ },
+ {
+ type: 'effectScatter',
+ silent: true,
+ tooltip: {
+ show: false
+ },
+ zlevel: 3,
+ symbolSize: 10,
+ showEffectOn: 'render',
+ rippleEffect: {
+ brushType: 'stroke',
+ color: '#3cefff',
+ scale: 5
+ },
+ itemStyle: {
+ color: '#3cefff'
+ },
+ hoverAnimation: true,
+ data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+ }
+ ]
+ }
+
+ return option
+}
+
+export function zhkb10() {
+ const _legendColor = '#8FD8FF'
+ const _fontSize = 16
+ const _fontColor = '#8FD8FF'
+ // const data1 = [70, 90, 100, 70, 90, 100]
+ // const data2 = [80, 60, 80, 50, 90, 60]
+ const data1 = [70 + Math.random() * 20, 90 - Math.random() * 20, 100 - Math.random() * 20, 70 + Math.random() * 20, 90 - Math.random() * 20, 80 - Math.random() * 20]
+ const data2 = [80 + Math.random() * 20, 60 + Math.random() * 20, 80 - Math.random() * 20, 50 + Math.random() * 20, 90 - Math.random() * 20, 60 + Math.random() * 20]
+ const option = {
+ backgroundColor: 'transparent',
+ legend: {
+ x: 'right',
+ y: '2%',
+ itemWidth: 10,
+ itemHeight: 10,
+ textStyle: {
+ fontSize: 16,
+ color: 'rgba(255,255,255,.7)'
+ }
+ },
+ grid: {
+ left: '2%',
+ top: '7%',
+ right: '2%',
+ bottom: '0%',
+ containLabel: true
+ },
+ yAxis: {
+ // max: Math.ceil(Math.max(...data1) * 1.2),
+ max: 100,
+ type: 'value',
+ position: 'left',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#4E84AC'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ formatter: '{value}',
+ color: '#00FFFF',
+ fontSize: 14
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ xAxis: {
+ type: 'category',
+ nameTextStyle: {
+ fontSize: 16,
+ color: '#7dd6ea'
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ // margin: 20,
+ textStyle: {
+ color: colorX,
+ fontSize: 16
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#4E84AC'
+ // width: 3
+ }
+ },
+ data: ['閽㈡潗鏀瑰埗', '鍐峰ⅸ', '鐑ⅸ', '鐑鐞�', '杈惧厠缃�', '闀�閿�']
+ },
+ series: [
+ {
+ name: '浜哄憳鍒嗘瀽1',
+ type: 'bar',
+ barWidth: 15,
+ barGap: '30%',
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(0,234,255, 1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(0,234,255, .1)'
+ }
+ ])
+ }
+ },
+ // label: {
+ // show: true,
+ // position: 'top',
+ // textStyle: {
+ // fontSize: 36,
+ // color: '#00EAFF'
+ // },
+ // formatter: function(params) {
+ // return params.value + '%'
+ // }
+ // },
+ data: data1,
+ z: 10,
+ zlevel: 0
+ },
+ {
+ // 鍒嗛殧
+ type: 'pictorialBar',
+ itemStyle: {
+ normal: {
+ color: '#0F375F'
+ }
+ },
+ symbolRepeat: 'fixed',
+ symbolMargin: 15,
+ symbol: 'rect',
+ symbolClip: true,
+ symbolSize: [15, 2],
+ symbolPosition: 'start',
+ symbolOffset: [-10, 0],
+ data: data1,
+ width: 2,
+ z: 0,
+ zlevel: 1
+ },
+ {
+ name: '浜哄憳鍒嗘瀽2',
+ type: 'bar',
+ barWidth: 15,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(252,160,0, 1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(252,160,0, .1)'
+ }
+ ])
+ }
+ },
+ // label: {
+ // show: true,
+ // position: 'top',
+ // textStyle: {
+ // fontSize: 16,
+ // color: '#FFA200'
+ // },
+ // formatter: function(params) {
+ // return params.value + '%'
+ // }
+ // },
+ data: data2,
+ z: 10,
+ zlevel: 0
+ },
+ {
+ // 鍒嗛殧
+ type: 'pictorialBar',
+ itemStyle: {
+ normal: {
+ color: '#0F375F'
+ }
+ },
+ symbolRepeat: 'fixed',
+ symbolMargin: 15,
+ symbol: 'rect',
+ symbolClip: true,
+ symbolSize: [15, 2],
+ symbolPosition: 'start',
+ symbolOffset: [10, 0],
+ data: data2,
+ width: 2,
+ z: 0,
+ zlevel: 1
+ }
+ ]
+ }
+ return option
+}
+
+export function zhkb11() {
+ const option = {
+ backgroundColor: 'transparent',
+ // title: {
+ // text: '鏃舵-杩涘嚭娓祦閲�',
+ // left: '5%',
+ // top: '5%',
+ // textStyle: {
+ // color: '#fff',
+ // fontSize: '18px'
+ // }
+ // },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: [
+ {
+ icon: 'react',
+ right: '0%',
+ top: '0%',
+ textStyle: {
+ color: '#fff',
+ fontSize: 14
+ },
+ itemGap: 30,
+ itemWidth: 30,
+ itemHeight: 4,
+ data: ['璁惧鍒╃敤鐜�', '璁惧寮�鏈虹巼']
+ }
+ ],
+ grid: {
+ top: '10%',
+ right: '5%',
+ left: '1%',
+ bottom: '0%',
+ containLabel: true
+ },
+ yAxis: [
+ {
+ type: 'category',
+ data: ['鍐烽暒杞﹂棿', '鐑ⅸ杞﹂棿', '杈惧厠缃楄溅闂�', '纾峰寲杞﹂棿', '娉ㄥ杞﹂棿'],
+ axisLine: {
+ lineStyle: {
+ color: '#4E84AC'
+ // width: 2
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ // margin: 10,
+ color: '#09d8f2',
+ textStyle: {
+ fontSize: 16
+ }
+ }
+ }
+ ],
+ xAxis: [
+ {
+ axisLabel: {
+ formatter: '{value}',
+ color: '#6895CA',
+ textStyle: {
+ fontSize: 16,
+ color: colorX
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ width: 2,
+ color: '#4E84AC'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ // 浣跨敤娣辨祬鐨勯棿闅旇壊
+ color: '#184D9A'
+ }
+ }
+ }
+ ],
+ series: [
+ {
+ name: '璁惧鍒╃敤鐜�',
+ type: 'bar',
+ barGap: '70%',
+ data: [Math.ceil(30 + Math.random() * 20), Math.ceil(75 - Math.random() * 20), Math.ceil(77 - Math.random() * 20), Math.ceil(39 + Math.random() * 20), Math.ceil(85 - Math.random() * 20)],
+ barWidth: 12,
+ itemStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [
+ {
+ offset: 0,
+ color: '#00FFFF' // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: '#00FF00' // 100% 澶勭殑棰滆壊
+ }
+ ],
+ global: false // 缂虹渷涓� false
+ },
+ barBorderRadius: [30, 30, 30, 30],
+ shadowColor: 'rgba(0,160,221,1)',
+ shadowBlur: 4
+ }
+ },
+ label: {
+ normal: {
+ show: true,
+ // lineHeight: 20,
+ // width: 80,
+ // height: 20,
+ verticalAlign: 'center',
+ borderRadius: 200,
+ position: 'right',
+ color: '#00FF00',
+ fontSize: 16
+ }
+ }
+ },
+ {
+ name: '璁惧寮�鏈虹巼',
+ type: 'bar',
+ data: [Math.ceil(90 - Math.random() * 20), 45 + Math.ceil(Math.random() * 20), Math.ceil(27 + Math.random() * 20), Math.ceil(20 + Math.random() * 60), Math.ceil(85 - Math.random() * 20)],
+ barWidth: 12,
+ itemStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [
+ {
+ offset: 0,
+ color: '#00FFFF' // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: '#FFFF00' // 100% 澶勭殑棰滆壊
+ }
+ ],
+ global: false // 缂虹渷涓� false
+ },
+ barBorderRadius: [30, 30, 30, 30],
+ shadowColor: 'rgba(0,160,221,1)',
+ shadowBlur: 4
+ }
+ },
+ label: {
+ normal: {
+ show: true,
+ // lineHeight: 20,
+ // width: 80,
+ // height: 20,
+ borderRadius: 200,
+ verticalAlign: 'center',
+ // position: ['-0', '-20'],
+ position: 'right',
+ color: '#FFFF00',
+ fontSize: 16
+ }
+ }
+ }
+ ]
+ }
+ return option
+}
+
+export function zhkb12() {
+
+}
+
+export function echart01() {
+ return {
+ // title: {
+ // text: '2019骞撮攢鍞按閲忓拰涓昏惀涓氬姟鏀跺叆瀵规瘮',
+ // textStyle: {
+ // align: 'center',
+ // color: '#fff',
+ // fontSize: 20
+ // },
+ // top: '3%',
+ // left: '10%'
+ // },
+ backgroundColor: 'transparent',
+ grid: {
+ left: '5%',
+ right: '5%',
+ bottom: '5%',
+ top: '30%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ label: {
+ show: true
+ }
+ }
+ },
+ legend: {
+ data: ['鎴愭湰', '鏁堢泭'],
+ top: '15%',
+ textStyle: {
+ color: '#ffffff'
+ }
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: ['01鏈�', '02鏈�', '03鏈�', '04鏈�', '05鏈�', '06鏈�', '07鏈�', '08鏈�', '09鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ axisTick: {
+ alignWithLabel: true
+ },
+ nameTextStyle: {
+ color: '#82b0ec'
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#82b0ec'
+ }
+ },
+ axisLabel: {
+ // margin: 5,
+ textStyle: {
+ // color: '#82b0ec'
+ color: colorX,
+ fontSize: 10
+ }
+ }
+ }
+ ],
+ yAxis: [
+ // {
+ // type: 'value',
+ // name: '浜垮厓',
+ // nameTextStyle: {
+ // color: '#ebf8ac'
+ // },
+ // splitLine: {
+ // show: false
+ // },
+ // axisTick: {
+ // show: true
+ // },
+ // axisLine: {
+ // show: true,
+ // lineStyle: {
+ // color: '#FFFFFF'
+ // }
+ // },
+ // axisLabel: {
+ // show: true,
+ // textStyle: {
+ // color: '#ebf8ac'
+ // }
+ // }
+ //
+ // },
+
+ {
+ type: 'value',
+ gridIndex: 0,
+ min: 0,
+ max: 100,
+ splitNumber: 8,
+ splitLine: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ },
+ splitArea: {
+ show: true,
+ areaStyle: {
+ color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
+ }
+ }
+ },
+ {
+ type: 'value',
+ name: '',
+ nameTextStyle: {
+ color: '#ebf8ac'
+ },
+ position: 'left',
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ axisLabel: {
+ show: true,
+ formatter: '{value} %', // 鍙充晶Y杞存枃瀛楁樉绀�
+ textStyle: {
+ color: colorX
+ }
+ }
+ }
+ ],
+ series: [
+ {
+ name: '鎴愭湰',
+ type: 'line',
+ yAxisIndex: 1, // 浣跨敤鐨� y 杞寸殑 index锛屽湪鍗曚釜鍥捐〃瀹炰緥涓瓨鍦ㄥ涓� y杞寸殑鏃跺�欐湁鐢�
+ smooth: true, // 骞虫粦鏇茬嚎鏄剧ず
+ showAllSymbol: true, // 鏄剧ず鎵�鏈夊浘褰€��
+ // symbol: 'circle', // 鏍囪鐨勫浘褰负瀹炲績鍦�
+ symbolSize: 5, // 鏍囪鐨勫ぇ灏�
+ itemStyle: {
+ // 鎶樼嚎鎷愮偣鏍囧織鐨勬牱寮�
+ color: '#058cff'
+ },
+ lineStyle: {
+ color: '#058cff'
+ },
+ areaStyle: {
+ color: 'rgba(5,140,255, 0.2)'
+ },
+ // data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5, 2.9, 2.8, 3, 5]
+
+ data: [100, 98, 99, 100, 100, 99, 98, 96, 97, 100, 100, 99]
+ },
+ {
+ name: '鏁堢泭',
+ type: 'bar',
+ barWidth: 15,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#00FFE3'
+ },
+ {
+ offset: 1,
+ color: '#4693EC'
+ }
+ ])
+ }
+ },
+ data: [28, 60, 30, 35, 27, 28, 33, 50, 29, 28, 36, 5]
+ // data: [100, 98, 99, 100, 100, 99, 98, 96, 97, 100, 100, 99]
+
+ }
+ ]
+ }
+}
+
+export function echart02() {
+ var img = 'data:image/png;base64,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'
+
+ var trafficWay = [
+ {
+ name: '鍘嬪嵃',
+ value: 20
+ }, {
+ name: '瀛斿皬',
+ value: 10
+ }, {
+ name: '鍙樺舰',
+ value: 30
+ }, {
+ name: '鍒掍激',
+ value: 20
+ }, {
+ name: '鎶攱',
+ value: 20
+ }]
+
+ var data = []
+ var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+ for (var i = 0; i < trafficWay.length; i++) {
+ data.push({
+ value: trafficWay[i].value,
+ name: trafficWay[i].name,
+ itemStyle: {
+ normal: {
+ borderWidth: 5,
+ shadowBlur: 20,
+ borderColor: color[i],
+ shadowColor: color[i]
+ }
+ }
+ }, {
+ value: 2,
+ name: '',
+ itemStyle: {
+ normal: {
+ label: {
+ show: false
+ },
+ labelLine: {
+ show: false
+ },
+ color: 'rgba(0, 0, 0, 0)',
+ borderColor: 'rgba(0, 0, 0, 0)',
+ borderWidth: 0
+ }
+ }
+ })
+ }
+ var seriesOption = [{
+ name: '',
+ type: 'pie',
+ clockWise: false,
+ radius: [60, 66],
+ hoverAnimation: false,
+ itemStyle: {
+ normal: {
+ label: {
+ show: true,
+ position: 'outside',
+ color: '#ddd',
+ formatter: function(params) {
+ var percent = 0
+ var total = 0
+ for (var i = 0; i < trafficWay.length; i++) {
+ total += trafficWay[i].value
+ }
+ percent = ((params.value / total) * 100).toFixed(0)
+ if (params.name !== '') {
+ // return '缂洪櫡鍚嶇О锛�' + params.name + '\n' + '\n' + '鍗犵櫨鍒嗘瘮锛�' + percent + '%'
+ return params.name + ' ' + percent + '%'
+ } else {
+ return ''
+ }
+ }
+ },
+ labelLine: {
+ length: 10,
+ length2: 30,
+ show: true,
+ color: '#00ffff'
+ }
+ }
+ },
+ data: data
+ }]
+ const option = {
+ backgroundColor: 'transparent',
+ color: color,
+ title: {
+ text: '',
+ top: '48%',
+ textAlign: 'center',
+ left: '49%',
+ textStyle: {
+ color: '#fff',
+ fontSize: 22,
+ fontWeight: '400'
+ }
+ },
+ graphic: {
+ elements: [{
+ type: 'image',
+ z: 3,
+ style: {
+ image: img,
+ width: 88,
+ height: 88
+ },
+ left: 'center',
+ top: 'center',
+ position: [100, 100]
+ }]
+ },
+ tooltip: {
+ show: false
+ },
+ // legend: {
+ // icon: 'circle',
+ // orient: 'horizontal',
+ // // x: 'left',
+ // data: ['鍘嬪嵃', '瀛斿皬', '鍙樺舰', '鎶攱'],
+ // right: 340,
+ // bottom: 150,
+ // align: 'right',
+ // textStyle: {
+ // color: '#fff'
+ // },
+ // itemGap: 20
+ // },
+ toolbox: {
+ show: false
+ },
+ series: seriesOption
+ }
+
+ return option
+}
+
+export function echart03() {
+ return {
+ // title: {
+ // text: '2019骞撮攢鍞按閲忓拰涓昏惀涓氬姟鏀跺叆瀵规瘮',
+ // textStyle: {
+ // align: 'center',
+ // color: '#fff',
+ // fontSize: 20
+ // },
+ // top: '3%',
+ // left: '10%'
+ // },
+ backgroundColor: 'transparent',
+ grid: {
+ left: '5%',
+ right: '5%',
+ bottom: '5%',
+ top: '20%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ label: {
+ show: true
+ }
+ }
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: ['鍘嬪嵃', '瀛斿皬', '鍙樺舰', '鍒掍激', '鎶攱'],
+ axisTick: {
+ alignWithLabel: true
+ },
+ nameTextStyle: {
+ color: '#82b0ec'
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#82b0ec'
+ }
+ },
+ axisLabel: {
+ // margin: 5,
+ textStyle: {
+ // color: '#82b0ec'
+ color: colorX,
+ fontSize: 16
+ }
+ }
+ }
+ ],
+ yAxis: [
+ {
+ boundaryGap: false,
+ splitNumber: 4,
+ type: 'value',
+ // name: '%',
+ nameTextStyle: {
+ color: colorY,
+ fontSize: 14,
+ lineHeight: 20
+ },
+ axisLabel: {
+ textStyle: {
+ fontSize: 14,
+ // color: '#7696c5'
+ color: colorX
+ // color: this.colorY
+ }
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: true
+ }
+ }
+ ],
+ series: [
+ {
+ name: '鏁伴噺',
+ type: 'bar',
+ barWidth: 25,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#00FFE3'
+ },
+ {
+ offset: 1,
+ color: '#4693EC'
+ }
+ ])
+ }
+ },
+ data: [228, 260, 230, 235, 227, 228, 233]
+ // data: [100, 98, 99, 100, 100, 99, 98, 96, 97, 100, 100, 99]
+
+ }
+ ]
+ }
+}
+
+export function echart04() {
+ const indicatorList = [{
+ name: '浜哄伐鏅鸿兘鍥惧儚璇嗗埆'
+ },
+ {
+ name: '寮�鍙戣�呭伐鍏�'
+ },
+ {
+ name: '鑷姩鍏夊妫�娴�'
+ },
+ {
+ name: '铏氭嫙閲忔祴VM'
+ },
+ {
+ name: '楂橀娴烽噺鏁版嵁鍒嗘瀽'
+ }]
+ const option = {
+ backgroundColor: 'transparent',
+ color: ['#0290ff', '#ffe533', '#ff4d4d', '#06f5bc'],
+ tooltip: {
+ show: false // 寮瑰眰鏁版嵁鍘绘帀
+ },
+ legend: {
+ data: [
+ {
+ name: '浣跨敤鐜�', icon: 'rect', itemStyle: {
+ color: '#06f5bc', borderWidth: 0
+ }
+ },
+ {
+ name: '瀹為檯浣跨敤鐜�', icon: 'rect', itemStyle: {
+ color: '#0290ff', borderWidth: 0
+ }
+ }
+ ],
+
+ top: 30,
+ show: true,
+ y: '1',
+ center: 0,
+ itemWidth: 12,
+ itemHeight: 12,
+ itemGap: 26,
+ z: 3,
+ // orient: 'horizontal',
+ textStyle: {
+ fontSize: 14,
+ color: '#edf8ff'
+ }
+ },
+ radar: {
+ center: ['50%', '65%'], // 澶栧渾鐨勪綅缃�
+ radius: '55%',
+ name: {
+ textStyle: {
+ color: '#fff',
+ fontSize: 14,
+ fontWeight: 400,
+ fontFamily: 'PingFangSC-Regular,PingFang SC',
+ fontStyle: 'normal'
+ }
+ },
+ // TODO:
+ indicator: indicatorList,
+ splitArea: {
+ // 鍧愭爣杞村湪 grid 鍖哄煙涓殑鍒嗛殧鍖哄煙锛岄粯璁や笉鏄剧ず銆�
+ show: true,
+ areaStyle: {
+ // 鍒嗛殧鍖哄煙鐨勬牱寮忚缃��
+ color: ['rgba(255,255,255,0)'] // 鍒嗛殧鍖哄煙棰滆壊銆傚垎闅斿尯鍩熶細鎸夋暟缁勪腑棰滆壊鐨勯『搴忎緷娆″惊鐜缃鑹层�傞粯璁ゆ槸涓�涓繁娴呯殑闂撮殧鑹层��
+ }
+ },
+ axisLine: {
+ // 鎸囧悜澶栧湀鏂囨湰鐨勫垎闅旂嚎鏍峰紡
+ lineStyle: {
+ color: 'rgba(255,255,255,0)'
+ }
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'solid',
+ color: '#0ac8ff', // 鍒嗛殧绾块鑹�
+ width: 2 // 鍒嗛殧绾跨嚎瀹�
+ }
+ }
+ },
+ series: [
+ {
+ type: 'radar',
+ data: [
+ {
+ value: [0, 0, 10, 30, 70],
+ name: '浣跨敤鐜�',
+ areaStyle: {
+ normal: {
+ color: {
+ type: 'radial',
+ x: 0.5,
+ y: 0.5,
+ r: 0.5,
+ colorStops: [{
+ offset: 0, color: '#00ffb4' // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 0.15, color: '#00ffb4' // 100% 澶勭殑棰滆壊
+ },
+ {
+ offset: 0.75, color: '#00ffb4' // 100% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1, color: '#00ffb4' // 100% 澶勭殑棰滆壊
+ }],
+ global: false // 缂虹渷涓� false
+ }
+ }
+ },
+ symbolSize: [6, 6],
+ lineStyle: { // 杈圭紭棰滆壊
+ // width: 0
+ color: 'rgba(13, 248, 172, 0.8)'
+ // shadowBlur:8,
+ // shadowColor:'#ff3838'
+ },
+ itemStyle: {
+ color: '#fff',
+ borderColor: '#00ffb4',
+ borderWidth: 1,
+ shadowBlur: 8,
+ shadowColor: '#00ffb4'
+ }
+ },
+ {
+ value: [80, 80, 80, 70, 60],
+ name: '瀹為檯浣跨敤鐜�',
+ areaStyle: {
+ normal: {
+ color: {
+ type: 'radial',
+ x: 0.5,
+ y: 0.5,
+ r: 0.5,
+ colorStops: [{
+ offset: 0, color: 'rgba(0,194,255, 0.8)' // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 0.15, color: 'rgba(0,194,255, 0.8)' // 100% 澶勭殑棰滆壊
+ },
+ {
+ offset: 0.75, color: 'rgba(0,194,255, 0.8)' // 100% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1, color: 'rgba(0,194,255, 0.8)' // 100% 澶勭殑棰滆壊
+ }],
+ global: false // 缂虹渷涓� false
+ }
+ }
+ },
+ symbolSize: [6, 6],
+ lineStyle: { // 杈圭紭棰滆壊
+ // width: 0
+ color: 'rgba(0, 194, 255, 0.8)'
+ // shadowBlur:8,
+ // shadowColor:'#ff3838'
+ },
+ itemStyle: {
+ color: '#fff',
+ borderColor: '#00c8ff',
+ borderWidth: 1,
+ shadowBlur: 8,
+ shadowColor: '#00c8ff'
+ }
+ }
+
+ ]
+ }
+ ]
+ }
+
+ return option
+}
+
+export function echart05() {
+ var img = 'data:image/png;base64,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'
+
+ var trafficWay = [
+ {
+ name: '渚涘簲瀹㈡埛',
+ value: 9
+ }, {
+ name: '鐜板満绠＄悊鑰�',
+ value: 30
+ }, {
+ name: '宸ュ巶绠＄悊鑰�',
+ value: 25
+ }, {
+ name: '浼佷笟鍐崇瓥鑰�',
+ value: 23
+ }, {
+ name: '骞冲彴寮�鍙戣��',
+ value: 14
+ }]
+
+ var data = []
+ var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+ for (var i = 0; i < trafficWay.length; i++) {
+ data.push({
+ value: trafficWay[i].value,
+ name: trafficWay[i].name,
+ itemStyle: {
+ normal: {
+ borderWidth: 5,
+ shadowBlur: 20,
+ borderColor: color[i],
+ shadowColor: color[i]
+ }
+ }
+ }, {
+ value: 2,
+ name: '',
+ itemStyle: {
+ normal: {
+ label: {
+ show: false
+ },
+ labelLine: {
+ show: false
+ },
+ color: 'rgba(0, 0, 0, 0)',
+ borderColor: 'rgba(0, 0, 0, 0)',
+ borderWidth: 0
+ }
+ }
+ })
+ }
+ var seriesOption = [{
+ name: '',
+ type: 'pie',
+ clockWise: false,
+ radius: [60, 66],
+ hoverAnimation: false,
+ itemStyle: {
+ normal: {
+ label: {
+ show: true,
+ position: 'outside',
+ color: '#ddd',
+ formatter: function(params) {
+ var percent = 0
+ var total = 0
+ for (var i = 0; i < trafficWay.length; i++) {
+ total += trafficWay[i].value
+ }
+ percent = ((params.value / total) * 100).toFixed(0)
+ if (params.name !== '') {
+ // return '缂洪櫡鍚嶇О锛�' + params.name + '\n' + '\n' + '鍗犵櫨鍒嗘瘮锛�' + percent + '%'
+ return params.name + ' ' + percent + '%'
+ } else {
+ return ''
+ }
+ }
+ },
+ labelLine: {
+ length: 10,
+ length2: 30,
+ show: true,
+ color: '#00ffff'
+ }
+ }
+ },
+ data: data
+ }]
+ const option = {
+ backgroundColor: 'transparent',
+ color: color,
+ title: {
+ text: '',
+ top: '48%',
+ textAlign: 'center',
+ left: '49%',
+ textStyle: {
+ color: '#fff',
+ fontSize: 22,
+ fontWeight: '400'
+ }
+ },
+ graphic: {
+ elements: [{
+ type: 'image',
+ z: 3,
+ style: {
+ image: img,
+ width: 88,
+ height: 88
+ },
+ left: 'center',
+ top: 'center',
+ position: [100, 100]
+ }]
+ },
+ tooltip: {
+ show: false
+ },
+ // legend: {
+ // icon: 'circle',
+ // orient: 'horizontal',
+ // // x: 'left',
+ // data: ['鍘嬪嵃', '瀛斿皬', '鍙樺舰', '鎶攱'],
+ // right: 340,
+ // bottom: 150,
+ // align: 'right',
+ // textStyle: {
+ // color: '#fff'
+ // },
+ // itemGap: 20
+ // },
+ toolbox: {
+ show: false
+ },
+ series: seriesOption
+ }
+
+ return option
+}
--
Gitblit v1.9.3