From efca35e837a01df3f44755d8f9918b407e2cf0b7 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期五, 24 十一月 2023 11:08:19 +0800
Subject: [PATCH] 1.仓库、采购看板 基本已实现
---
src/utils/myEcharts.js | 5915 +++++++++++++++++++++++++++--------------------------------
1 files changed, 2,673 insertions(+), 3,242 deletions(-)
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index 2517c77..6964f24 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
@@ -29,124 +29,516 @@
const colorX = '#c7e7ff'
const colorY = '#7696c5'
-// 鑴夐摼鐪嬫澘
-export function mapArea() {
-
-}
-
-export function pie1(data) {
- const titleArr = []
- const seriesArr = []
- const colors = [['#389af4', '#dfeaff'], ['#ff8c37', '#ffdcc3'], ['#ffc257', '#ffedcc'], ['#fd6f97', '#fed4e0'], ['#a181fc', '#e3d9fe']]
- data.forEach(function(item, index) {
- titleArr.push(
- {
- text: item.name,
- left: index * 20 + 9.5 + '%',
- top: '55%',
- textAlign: 'center',
- textStyle: {
- fontWeight: 'normal',
- fontSize: '16',
- color: colors[index][0],
- textAlign: 'center'
- }
- }
- )
- seriesArr.push(
- {
- name: item.name,
- type: 'pie',
- clockWise: false,
- radius: [50, 60], // 璋冩暣楗煎浘澶у皬
- itemStyle: {
- normal: {
- color: colors[index][0],
- shadowColor: colors[index][0],
- shadowBlur: 0,
- label: {
- show: false
- },
- labelLine: {
- show: false
- }
- }
- },
- hoverAnimation: false,
- center: [index * 20 + 10 + '%', '50%'],
- data: [{
- value: item.value,
- label: {
- normal: {
- formatter: function(params) {
- return params.value + '%'
- },
- position: 'center',
- show: true,
- textStyle: {
- fontSize: '16',
- fontWeight: 'normal',
- // fontWeight: 'bold',
- color: colors[index][0]
- }
- }
- }
- }, {
- value: 100 - item.value,
- name: 'invisible',
- itemStyle: {
- normal: {
- color: colors[index][1]
- },
- emphasis: {
- color: colors[index][1]
- }
- }
- }]
- }
- )
- })
-
+// 绯荤粺棣栭〉鍥�
+export function barTop(data, colorArr) {
+ var salvProName = ['x']
+ var salvProValue = [data]
+ var Value = []// 鑳屾櫙鎸夋渶澶у��
+ for (let i = 0; i < salvProValue.length; i++) {
+ Value.push(salvProValue[0] + 20)
+ }
+ const color = colorArr
const option = {
backgroundColor: 'transparent',
- title: titleArr,
- series: seriesArr
+ grid: {
+ left: '0%',
+ right: '0%',
+ bottom: '2%',
+ top: '2%',
+ containLabel: true
+ },
+ // tooltip: {
+ // trigger: 'axis',
+ // axisPointer: {
+ // type: 'none'
+ // },
+ // formatter: function(params) {
+ // return params[0].name + ' : ' + params[0].value
+ // }
+ // },
+ xAxis: {
+ show: false,
+ type: 'value'
+ },
+ yAxis: [{
+ type: 'category',
+ inverse: true,
+ axisLabel: {
+ show: false,
+ textStyle: {
+ color: '#000'
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ data: salvProName
+ }],
+ series: [{
+ name: '鍊�',
+ type: 'bar',
+ zlevel: 1,
+ itemStyle: {
+ normal: {
+ // barBorderRadius: 30,
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+ offset: 0,
+ color: `rgba(${color[0]},1)`
+ }, {
+ offset: 1,
+ color: `rgba(${color[1]},1)`
+ }])
+ }
+ },
+
+ barWidth: 15,
+ data: salvProValue
+
+ },
+ {
+ name: '鑳屾櫙',
+ type: 'bar',
+ barWidth: 15,
+ barGap: '-100%',
+ data: Value,
+ itemStyle: {
+ normal: {
+ color: `rgba(${color[1]},0.8)`,
+ barBorderRadius: 30
+ }
+ }
+ }
+ ]
}
return option
}
-export function bar1(data1, data2) {
- 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']
+export function bar01(data) {
+ var dataX = data.map(r => r.key)
+ var dataY = data.map(r => r.value)
+ // var salvProMax = []// 鑳屾櫙鎸夋渶澶у��
+ // for (let i = 0; i < salvProValue.length; i++) {
+ // salvProMax.push(salvProValue[0])
+ // }
+
+ var option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '2%',
+ right: '5%',
+ bottom: '0%',
+ top: '2%',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'none'
+ },
+ formatter: function(params) {
+ return params[0].name + ' : ' + params[0].value
+ }
+ },
+ xAxis: {
+ show: true,
+ type: 'value',
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: true
+ },
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#000'
+ }
+ }
+ },
+ yAxis: [{
+ type: 'category',
+ inverse: true,
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#000'
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ data: dataX
+ }],
+ series: [{
+ name: '鍊�',
+ type: 'bar',
+ zlevel: 1,
+ // lineStyle:{
+ // normal:{
+ //
+ // }
+ // },
+ itemStyle: {
+ normal: {
+ barBorderRadius: 30,
+ // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+ // offset: 0,
+ // color: 'rgb(42,197,137,1)'
+ // }, {
+ // offset: 1,
+ // color: 'rgb(187,236,218,1)'
+ // }])
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [
+ {
+ offset: 0,
+ color: `rgba(42, 197, 137, 1)`// 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: `rgba(187, 236, 218, 1)` // 100% 澶勭殑棰滆壊
+ }
+ ],
+ globalCoord: false // 缂虹渷涓� false
+ } // 娓愬彉棰滆壊
+ }
+ },
+ label: {
+ type: 'category',
+ inverse: true,
+ axisTick: 'none',
+ axisLine: 'none',
+ show: true,
+ // axisLabel: {
+ // textStyle: {
+ // color: '#000',
+ // fontSize: '12'
+ // },
+ // },
+ position: 'right',
+ data: dataY
+ },
+ barWidth: 10,
+ data: dataY
+ }
+ // {
+ // name: '鑳屾櫙',
+ // type: 'bar',
+ // barWidth: 20,
+ // barGap: '-100%',
+ // data: salvProMax,
+ // itemStyle: {
+ // normal: {
+ // color: 'rgba(24,31,68,1)',
+ // barBorderRadius: 30,
+ // }
+ // },
+ // },
+ ]
+ }
+ return option
+}
+
+export function line01(data) {
+ const dataX = data.map(r => r.key)
+ const dataY = data.map(r => r.value)
+
const option = {
backgroundColor: 'transparent',
- // tooltip: {
- // show: false,
- // trigger: 'axis',
- // axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
- // type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
- // },
- // formatter: function(e) {
- // if (e.length > 1) {
- // var S = e[1].data - e[0].data
- // return e[0].axisValue + ':<br>宸=褰撳墠锛嶅勾鍒�<br>=' + S
- // } else if (e.length = 1) {
- // return e[0].axisValue + ':<br>' + e[0].seriesName + '=' + e[0].data
- // }
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ // type: 'shadow',
+ label: {
+ show: true,
+ backgroundColor: '#000'
+ }
+ }
+ },
+ grid: {
+ left: '2%',
+ right: '5%',
+ bottom: '0%',
+ top: '3%',
+ containLabel: true
+ },
+ // legend: {
+ // data: ['line', 'bar'],
+ // textStyle: {
+ // color: '#ccc'
// }
// },
+ xAxis: {
+ data: dataX,
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: true
+ },
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#000'
+ }
+ }
+ },
+ yAxis: {
+ max: 14,
+ min: 0,
+ interval: 2,
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#000'
+ }
+ }
+ },
+ series: [{
+ name: '鏃堕棿',
+ type: 'line',
+ smooth: false,
+ showAllSymbol: true,
+ symbol: 'emptyCircle',
+ symbolSize: 8,
+ itemStyle: {
+ normal: {
+ color: `rgba(42, 197, 137, 1)`
+ }
+ },
+ lineStyle: {
+ normal: {
+ width: 2,
+ color: `rgba(42, 197, 137, 1)`
+ }
+ },
+ data: dataY
+ }]
+ }
+
+ return option
+}
+
+// 缁煎悎鐪嬫澘鍥�
+export function bar02(dataArr, titlenameArr) {
+ // const data = [70, 60, 50, 40, 30]
+ // const titlename = ['澶栬鍒掍激', '琛ㄩ潰娌规薄', '灏哄', '棰滆壊', '澶у皬']
+ // const data = val.map(i => i.cont)
+ // const titlename = val.map(i => i.name)
+ const data = dataArr.filter((item, index) => index < 5)
+
+ const titlename = titlenameArr.filter((item, index) => index < 5)
+
+ const length = titlename.length
+ if (titlename.length < 5) {
+ for (let i = 0; i < 5 - length; i++) {
+ titlename.push('0')
+ }
+ }
+
+ const valdata = [683, 500, 400, 300, 200]
+ // const myColor = ['#FF0000', '#FF5511', '#FF8800', '#FFBB00', '#FFFF00']
+ // const myColor = ['#0000FF']
+ // const myColor = ['#7af5f5', '#00FFFF', '#00FFFF', '#00FFFF', '#00FFFF']
+ const myColor = ['rgba(122,245,245,1)', 'rgba(122,245,245,0.95)', 'rgba(122,245,245,0.9)', 'rgba(122,245,245,0.85)', 'rgba(122,245,245,0.8)']
+ const option = {
+ animation: false,
+ backgroundColor: 'transparent',
+ title: {
+ show: false,
+ text: '涓�鍛ㄥ唴Top5涓嶈壇锛�',
+ x: '2%',
+ y: '4%',
+ textStyle: {
+ color: '#d8d7d9',
+ fontSize: '18'
+ // fontWeight: 'lighter'
+ },
+ subtextStyle: {
+ color: '#90979c',
+ fontSize: '16'
+
+ }
+ },
+ grid: {
+ left: '5%',
+ right: '10%',
+ bottom: '0%',
+ top: '10%',
+ containLabel: true
+ },
+ // animation: false, // 鍙栨秷鍔ㄧ敾
+ xAxis: {
+ show: false
+ },
+ yAxis: [
+ {
+ show: true,
+ data: titlename,
+ inverse: true,
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ // color: '#fff',
+ color: function(value, index) {
+ return value === '0' ? 'transparent' : '#fff'
+ },
+ fontSize: 20,
+ // formatter: function(value, index) {
+ // return [
+ // '{lg|' + (index + 1) + '銆� }' + '{title|' + value + '} '
+ // ].join('\n')
+ // },
+ formatter: function(params) {
+ var val = ''
+ if (params.length > 8) {
+ val = params.substr(0, 8) + '...'
+ return val
+ } else {
+ return params
+ }
+ },
+ rich: {
+ lg: {
+ // backgroundColor: '#339911',
+ // color: '#d8d7d9',
+ color: '#fff',
+ borderRadius: 15,
+ // padding: 5,
+ align: 'center',
+ width: 15,
+ height: 15
+ }
+ }
+ }
+ },
+ {
+ show: false,
+ inverse: true,
+ data: valdata,
+ axisLabel: {
+ textStyle: {
+ fontSize: 12,
+ color: '#fff'
+ }
+ },
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ }
+
+ }
+ ],
+ series: [
+ {
+ name: '鏉�',
+ type: 'bar',
+ yAxisIndex: 0,
+ data: data,
+ barWidth: 22,
+ itemStyle: {
+ normal: {
+ barBorderRadius: 30,
+ color: function(params) {
+ // const num = myColor.length
+ // return myColor[params.dataIndex % num]
+ return myColor[params.dataIndex]
+ }
+ }
+ },
+ label: {
+ normal: {
+ show: true,
+ position: 'right',
+ formatter: '{c}',
+ fontSize: 20,
+ color: '#fff'
+ // formatter: '{c}%',
+ }
+ }
+ }
+ ]
+ }
+
+ return option
+}
+
+// 浠撳簱绠＄悊鐪嬫澘鍥� 锛堝純鐢級
+export function bar03(titleText) {
+ const path = 'path://M214,1079l8-6h16l8,6-8,6H222Z'
+ const zzx1 = ['800', '900', '700', '300', '500', '800', '700']
+ const wgx1 = ['700', '600', '500', '400', '300', '333', '222']
+ const option = {
+ backgroundColor: 'transparent',
+ tooltip: {
+ show: false,
+ trigger: 'axis',
+ axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+ type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ },
+ formatter: function(e) {
+ if (e.length > 1) {
+ var S = e[1].data - e[0].data
+ return e[0].axisValue + ':<br>宸=褰撳墠锛嶅勾鍒�<br>=' + S
+ } else if (e.length = 1) {
+ return e[0].axisValue + ':<br>' + e[0].seriesName + '=' + e[0].data
+ }
+ }
+ },
title: {
text: titleText,
- x: '40%',
- y: '0%',
+ x: '66%',
+ y: '2%',
textStyle: {
// color: '#fff',
color: '#00ffff',
- fontSize: '20',
- fontWeight: 'bolder'
+ fontSize: '18',
+ fontWeight: 'lighter'
},
subtextStyle: {
color: '#90979c',
@@ -161,9 +553,7 @@
containLabel: true
},
legend: {
- show: false,
- // data: ['title1', 'title2'],
- data: ['title1'],
+ data: ['title1', 'title2'],
left: 220,
top: 10,
textStyle: {
@@ -177,8 +567,7 @@
},
xAxis: {
type: 'category',
- // data: ['杞﹂棿涓�', '杞﹂棿浜�', '杞﹂棿涓�', '杞﹂棿鍥�', '杞﹂棿浜�'],
- data: ['娴欐睙鐨囧啝', '姘稿悍鐨囧啝', '鍖楄景鐢垫満', '鎭掓嘲鐨囧啝鍥灄', '杩堟嫇濉戜笟'],
+ data: ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�'],
axisLine: {
lineStyle: {
show: true,
@@ -192,9 +581,9 @@
// rotate: 40,
textStyle: {
fontFamily: 'Microsoft YaHei',
- color: colorX, // x杞撮鑹�
+ color: '#fff', // x杞撮鑹�
fontWeight: 'normal',
- fontSize: '12',
+ fontSize: '14',
lineHeight: 22
}
}
@@ -206,111 +595,73 @@
// }
// },
},
- yAxis:
- {
- name: '%',
- nameTextStyle: {
- color: colorY,
- fontSize: 14,
- lineHeight: 20
- },
- boundaryGap: false,
- splitNumber: 4,
- type: 'value',
- axisLabel: {
- textStyle: {
- fontSize: 14,
- color: '#7696c5'
- // color: this.colorY
- }
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#032c58'
- }
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#032c58'
- }
- },
- axisTick: {
- show: true
+ yAxis: {
+ type: 'value',
+ name: '鏁伴噺锛堝崟浣嶏細涓級',
+ nameTextStyle: {
+ color: '#ffffff'
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ type: 'dashed',
+ color: 'rgba(135,140,147,0.8)'
}
},
- // {
- // type: 'value',
- // // name: '鏁伴噺锛堝崟浣嶏細涓級',
- // name: '',
- // nameTextStyle: {
- // color: '#ffffff'
- // },
- // axisLine: {
- // show: false,
- // lineStyle: {
- // type: 'dashed',
- // color: 'rgba(135,140,147,0.8)'
- // }
- // },
- // splitLine: {
- // show: true,
- // lineStyle: {
- // color: 'rgba(135,140,147,1)' // 宸︿晶鏄剧ず绾�
- // }
- // },
- // axisLabel: {
- // formatter: '{value}',
- // color: colorY,
- // fontSize: 14
- // }
- // },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: 'rgba(135,140,147,1)' // 宸︿晶鏄剧ず绾�
+ }
+ },
+ axisLabel: {
+ formatter: '{value}',
+ color: '#fff',
+ fontSize: 14
+ }
+ },
series: [
{
type: 'pictorialBar',
symbol: path,
symbolSize: [30, 8],
- // symbolOffset: [-18, -4],
- symbolOffset: [0, -4],
+ symbolOffset: [-18, -4],
symbolPosition: 'end',
z: 12,
color: '#3440FF',
- data: data1
+ data: zzx1
},
- // {
- // type: 'pictorialBar',
- // symbol: path,
- // symbolSize: [30, 8],
- // symbolOffset: [18, -4],
- // // symbolOffset: [20, -5],
- // symbolPosition: 'end',
- // z: 12,
- // color: '#FF1155',
- // data: data2
- // },
{
type: 'pictorialBar',
symbol: path,
symbolSize: [30, 8],
- // symbolOffset: [-18, 4],
- symbolOffset: [0, 4],
+ symbolOffset: [18, -4],
+ // symbolOffset: [20, -5],
+ symbolPosition: 'end',
+ z: 12,
+ color: '#FF1155',
+ data: wgx1
+ },
+ {
+ type: 'pictorialBar',
+ symbol: path,
+ symbolSize: [30, 8],
+ symbolOffset: [-18, 4],
z: 12,
color: 'rgba(126,192,238,0.6)',
- data: data1
+ data: zzx1
},
- // {
- // name: '',
- // type: 'pictorialBar',
- // symbol: path,
- // symbolSize: [30, 8],
- // // symbolOffset: [20, 4],
- // symbolOffset: [18, 4],
- // color: '#FFC0CB',
- // z: 12,
- // data: data2
- // },
{
+ name: '',
+ type: 'pictorialBar',
+ symbol: path,
+ symbolSize: [30, 8],
+ // symbolOffset: [20, 4],
+ symbolOffset: [18, 4],
+ color: '#FFC0CB',
+ z: 12,
+ data: wgx1
+ }, {
name: 'title1',
type: 'bar',
barWidth: '30',
@@ -335,1072 +686,246 @@
color: '#00f8ff',
fontSize: 12
},
- data: data1
- }
- // {
- // name: 'title2',
- // type: 'bar',
- // barWidth: '30',
- // itemStyle: {
- // normal: {
- // opacity: 0.7,
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- // offset: 0,
- // color: '#FF2246'
- // }, {
- // offset: 1,
- // color: '#FFC0CB'
- //
- // }]),
- // barBorderRadius: 0
- // }
- //
- // },
- // label: {
- // show: true,
- // // position: ['18','-18'],
- // position: 'top',
- // color: '#00f8ff',
- // fontSize: 12
- // },
- // data: data2
- // }
- ]
- }
-
- return option
-}
-
-export function line1(dataY, dataY2, dataY3, dataY4, dataY5) {
- const option = {
- backgroundColor: 'transparent',
- grid: {
- left: '4%',
- right: '4%',
- bottom: '4%',
- top: '15%',
- containLabel: true
- },
- title: {
- // text: '閿�鍞姒傝',
- text: '鍚勫伐鍘傝兘鑰�',
- left: '50%',
- top: '0%',
- textAlign: 'center',
- textStyle: {
- // color: '#fff',
- color: '#00ffff',
- fontSize: '20',
- fontWeight: 'bolder'
- }
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- lineStyle: {
- color: '#ddd'
- }
+ data: zzx1
},
- backgroundColor: 'rgba(255,255,255,1)',
- padding: [5, 10],
- textStyle: {
- color: '#7588E4'
- },
- extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
- },
- legend: {
- show: false,
- right: 20,
- orient: 'vertical',
- 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鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
- // type: 'category',
- // boundaryGap: true,
- // axisLabel: {
- // interval: 0,
- // formatter: '{value}',
- // fontSize: 14,
- // margin: 20,
- // textStyle: {
- // // color: this.colorX
- // color: '#c7e7ff'
- // }
- // },
- // axisLine: {
- // lineStyle: {
- // color: '#032c58'
- // }
- // },
- // splitLine: {
- // show: false,
- // lineStyle: {
- // color: '#032c58'
- // }
- // },
- // axisTick: {
- // show: false
- // }
- // name: '鏈�',
- // nameTextStyle: {
- // color: colorX,
- // fontSize: 14,
- // lineHeight: 20
- // },
- boundaryGap: false,
- // splitLine: {
- // show: false,
- // interval: 'auto',
- // lineStyle: {
- // color: ['#D4DFF5']
- // }
- // },
- axisTick: {
- show: false
- },
- axisLine: {
- lineStyle: {
- show: true,
- lineStyle: {
- color: '#6A989E'
- }
- }
- },
- axisLabel: {
- margin: 10,
- textStyle: {
- color: colorX,
- fontSize: 14
- }
- }
- },
- yAxis:
{
- name: '',
- nameTextStyle: {
- color: colorY,
- fontSize: 14,
- lineHeight: 20
- },
- boundaryGap: false,
- splitNumber: 5,
- type: 'value',
- // offset: -30,
- axisLabel: {
- textStyle: {
- fontSize: 14,
- color: '#7696c5'
- // color: this.colorY
- }
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#032c58'
- }
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#032c58'
- }
- },
- axisTick: {
- 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(0,215,236,0.5)'
- }, {
- offset: 1,
- color: 'rgba(0,215,236,0.2)'
- }], false)
- }
- },
+ name: 'title2',
+ type: 'bar',
+ barWidth: '30',
itemStyle: {
normal: {
- // color: '#f7b851'
- // color: `rgb(73, 226, 196)`
- color: `rgb(0, 215, 236)`
- }
- },
- 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: dataY2,
- areaStyle: {
- normal: {
+ opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
- color: 'rgba(60,244,184,0.5)'
+ color: '#FF2246'
}, {
offset: 1,
- color: 'rgba(60,244,184,0.2)'
- }], false)
- }
- },
- itemStyle: {
- normal: {
- color: `rgb(60, 244, 184)`
- }
- },
- 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
- }
- }
- }
- ]
- }
+ color: '#FFC0CB'
- return option
-}
+ }]),
+ barBorderRadius: 0
+ }
-export function pie2(title, scaleData) {
- var rich = {
- white: {
- color: '#ddd',
- align: 'center',
- padding: [5, 0]
- }
- }
- 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 = []
- for (var i = 0; i < scaleData.length; i++) {
- data.push({
- value: scaleData[i].value,
- name: scaleData[i].name,
- itemStyle: {
- normal: {
- borderWidth: 5,
- shadowBlur: 30,
- borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
- offset: 0,
- color: '#7777eb'
- }, {
- offset: 1,
- color: '#70ffac'
- }]),
- shadowColor: 'rgba(142, 152, 241, 0.6)'
- }
- }
- }, {
- value: 4,
- name: '',
- itemStyle: placeHolderStyle
- })
- }
- var seriesObj = [{
- name: '',
- type: 'pie',
- clockWise: false,
- radius: [60, 65],
- top: '10%',
- hoverAnimation: false,
- itemStyle: {
- normal: {
+ },
label: {
show: true,
- position: 'outside',
- // color: '#ddd',
- color: colorX,
- formatter: function(params) {
- var percent = 0
- var total = 0
- for (var i = 0; i < scaleData.length; i++) {
- total += scaleData[i].value
- }
- percent = ((params.value / total) * 100).toFixed(0)
- if (params.name !== '') {
- return params.name + '\n{white|' + '' + percent + '%}'
- } else {
- return ''
- }
- },
- rich: rich
+ // position: ['18','-18'],
+ position: 'top',
+ color: '#00f8ff',
+ fontSize: 12
},
- labelLine: {
- show: false
- }
+ data: wgx1
}
- },
- data: data
- }]
- const option = {
- backgroundColor: 'transparent',
- tooltip: {
- show: false
- },
- top: 'middle',
- title: {
- text: title,
- left: '50%',
- top: '7%',
- textAlign: 'center',
- textStyle: {
- color: '#00ffff',
- fontSize: '20',
- fontWeight: 'bolder'
- }
- },
- legend: {
- show: false
- },
- toolbox: {
- show: false
- },
- series: seriesObj
- }
-
- return option
-}
-
-export function bar2(list) {
- // const list = [500, 400, 300, 200, 200]
- const yName = ['娴忚瀹㈡埛', '杩涘簵瀹㈡埛', '璁よ喘瀹㈡埛', '涓嬪崟瀹㈡埛', '鍐嶆璐拱']
- const xData = [500, 400, 300, 200, 100]
- // const color = ['#ff3259', '#ff6160', '#ffb065', '#fef568', '#1a6df1', '#15a0ff', '#11e2ff', '#58febe']
- const color = ['#ff3259', '#ff6160', '#ffb065', '#fef568', '#1a6df1']
- const barWidth = 15
- const option = {
- backgroundColor: 'transparent',
- title: {
- text: '骞冲彴閾炬帴瀹㈡埛',
- left: '50%',
- top: '5%',
- textAlign: 'center',
- textStyle: {
- // color: '#fff',
- color: '#00ffff',
- fontSize: '20',
- fontWeight: 'bolder'
- }
- },
- xAxis: {
- splitLine: {
- show: false
- },
- axisLabel: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLine: {
- show: false
- }
- },
- grid: {
- left: '4%',
- right: '4%',
- bottom: '4%',
- top: '15%',
- containLabel: true
- },
- yAxis: [{
- inverse: true,
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- margin: 10,
- textStyle: {
- fontSize: 14,
- color: colorX
- }
- },
- data: yName
- }],
- series: [{ // 鍐�
- type: 'bar',
- barWidth,
- legendHoverLink: false,
- symbolRepeat: true,
- silent: true,
- itemStyle: {
- normal: {
- // barBorderRadius: [4, 4, 4, 4],
- color: function(params) {
- var colorlist = color
- return colorlist[params.dataIndex]
- }
- }
- },
- data: list,
- z: 1,
- animationEasing: 'elasticOut'
- },
- { // 鑳屾櫙
- type: 'pictorialBar',
- animationDuration: 0,
- symbolRepeat: 'fixed',
- symbolMargin: '20%',
- symbol: 'roundRect',
- symbolSize: [6, barWidth],
- itemStyle: {
- normal: {
- color: 'rgba(255,255,255,0.3)'
- }
- },
-
- data: xData,
- z: 0,
- animationEasing: 'elasticOut'
- },
- { // 鍒嗛殧
- type: 'pictorialBar',
- itemStyle: {
- color: '#051e43'
- },
- symbolRepeat: 'fixed',
- symbolMargin: 4,
- symbol: 'roundRect',
- symbolClip: true,
- symbolSize: [2, barWidth],
- symbolPosition: 'start',
- symbolOffset: [0, 0],
- data: list,
- z: 2,
- animationEasing: 'elasticOut'
- }
]
}
return option
}
-export function custom1() {
-
-}
-
-export function bar3() {
- const a1 = 20 + Math.floor(Math.random() * 80)
- const a2 = 20 + Math.floor(Math.random() * 80)
- const a3 = 20 + Math.floor(Math.random() * 80)
- const a4 = 20 + Math.floor(Math.random() * 80)
- const a5 = 20 + Math.floor(Math.random() * 80)
- const a6 = 20 + Math.floor(Math.random() * 80)
- const a7 = 20 + Math.floor(Math.random() * 80)
- const a8 = 20 + Math.floor(Math.random() * 80)
- const a9 = 20 + Math.floor(Math.random() * 80)
- const a10 = 20 + Math.floor(Math.random() * 80)
- const a11 = 20 + Math.floor(Math.random() * 80)
- const a12 = 20 + Math.floor(Math.random() * 80)
- const list = [
- {
- key: '杩涜揣鏁伴噺',
- value: [
- { value: a1 },
- { value: a2 },
- { value: a3 },
- { value: a4 },
- { value: a5 },
- { value: a6 },
- { value: a8 },
- { value: a9 },
- { value: a10 },
- { value: a11 },
- { value: a12 }
- ]
- }, {
- key: '鍚堟牸鏁伴噺',
- value: [
- { value: a1 - 2 },
- { value: a2 - 3 },
- { value: a3 - 5 },
- { value: a4 - 1 },
- { value: a5 - 2 },
- { value: a6 - 4 },
- { value: a7 - 5 },
- { value: a8 - 2 },
- { value: a9 - 2 },
- { value: a10 - 6 },
- { value: a11 - 1 },
- { value: a12 - 3 }
- ]
- }, {
- key: '涓嶅悎鏍兼暟閲�',
- value: [
- { value: 2 },
- { value: 3 },
- { value: 5 },
- { value: 1 },
- { value: 2 },
- { value: 4 },
- { value: 5 },
- { value: 2 },
- { value: 2 },
- { value: 6 },
- { value: 1 },
- { value: 3 }
- ]
- }
- ]
- 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鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�']
- const seriesData = []
-
- list.forEach((r, i) => {
- var o = {
- name: r.key,
- type: 'bar',
- smooth: false,
- yAxisIndex: 0,
- showSymbol: true,
- showAllSymbol: true,
- barWidth: 8,
- zlevel: 3,
- lineStyle: {
- normal: {
- width: 2,
- color: `rgba(${color[i]})`
- }
- },
- areaStyle: {
- normal: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: `rgba(${color[i]}, 0.0)`// 0% 澶勭殑棰滆壊
- },
- {
- offset: 1,
- color: `rgba(${color[i]}, 0.0)` // 100% 澶勭殑棰滆壊
- }
- ],
- globalCoord: false // 缂虹渷涓� false
- } // 娓愬彉棰滆壊
- }
- },
- itemStyle: {
- normal: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: `rgba(${color[i]}, 1)`// 0% 澶勭殑棰滆壊
- },
- {
- offset: 1,
- color: `rgba(${color[i]}, 0.2)` // 100% 澶勭殑棰滆壊
- }
- ],
- globalCoord: false // 缂虹渷涓� false
- } // 娓愬彉棰滆壊
- }
- },
- data: r.value.map(r => r.value)
- }
- // if (i === 0) {
- // xList = r.value.map(r => r.key)
- // }
- // if (r.percent) {
- // this.$set(o, 'symbolSize', 6)
- // } else {
- // this.$set(o, 'symbol', 'path://M0,10 L10,10 L5,0 L0,10 z')
- // }
- seriesData.push(o)
- })
+// 閲囪喘璁㈠崟鍥�
+export function pie01() {
const option = {
backgroundColor: 'transparent',
- legend: {
- show: true,
- data: list.map(r => r.key),
- top: '2%',
- itemHeight: 20,
- itemWidth: 20,
- textStyle: {
- fontSize: 14,
- color: 'F1F1F3'
- // color: colorX
- },
- right: '1%'
- },
title: {
- text: '鍚堟牸鐜囧垎鏋�',
- left: '28%',
- top: '2%',
- textAlign: 'center',
+ text: '60.21%',
+ x: 'center',
+ y: 'center',
textStyle: {
- // color: '#fff',
- color: '#00ffff',
- fontSize: '20',
- fontWeight: 'bolder'
+ fontWeight: 'normal',
+ color: '#fff',
+ fontSize: 18
}
},
- grid: {
- left: '4%',
- right: '4%',
- bottom: '4%',
- top: '15%',
- containLabel: true
+ color: ['rgba(176, 212, 251, 1)'],
+ legend: {
+ show: false,
+ itemGap: 12,
+ data: ['01', '02']
},
- 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'
- }
- },
- xAxis: [{
- type: 'category',
- boundaryGap: true,
- axisLabel: {
- interval: 0,
- formatter: '{value}',
- fontSize: 14,
- margin: 20,
- textStyle: {
- // color: this.colorX
- color: '#c7e7ff'
- }
- },
- axisLine: {
- lineStyle: {
- color: '#032c58'
- }
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: '#032c58'
- }
- },
- axisTick: {
- show: false
- },
- data: xList
- }],
- yAxis: [
+
+ series: [
{
- boundaryGap: false,
- splitNumber: 4,
- type: 'value',
- name: '%',
- nameTextStyle: {
- color: colorY,
- fontSize: 14,
- lineHeight: 20
- },
- axisLabel: {
- textStyle: {
- fontSize: 14,
- color: '#7696c5'
- // color: this.colorY
+ name: 'Line 1',
+ type: 'pie',
+ clockWise: true,
+ radius: ['50%', '66%'],
+ itemStyle: {
+ normal: {
+ label: {
+ show: false
+ },
+ labelLine: {
+ show: false
+ }
}
},
- splitLine: {
- show: true,
- lineStyle: {
- color: '#032c58'
+ hoverAnimation: false,
+ data: [
+ {
+ value: 80,
+ name: '01',
+ itemStyle: {
+ normal: {
+ color: { // 瀹屾垚鐨勫渾鐜殑棰滆壊
+ colorStops: [{
+ offset: 0,
+ color: '#24d3ff' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#5580fe' // 100% 澶勭殑棰滆壊
+ }]
+ },
+ label: {
+ show: false
+ },
+ labelLine: {
+ show: false
+ }
+ }
+ }
+ },
+ {
+ name: '02',
+ value: 20
}
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#032c58'
- }
- },
- axisTick: {
- show: true
- }
- },
- {
- boundaryGap: false,
- splitNumber: 4,
- type: 'value',
- axisLabel: {
- textStyle: {
- fontSize: 14,
- // color: this.colorY
- color: '#7696c5'
- }
- },
- nameTextStyle: {
- color: '#fff',
- fontSize: 14,
- lineHeight: 40
- },
- splitLine: {
- lineStyle: {
- color: '#032c58'
- }
- },
- axisLine: {
- show: false
- },
- axisTick: {
- show: true
- }
- }
- ],
- series: seriesData
+ ]
+ }]
}
return option
}
-export function bar4() {
- 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 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));
+// 鐪嬫澘澶撮儴鑳屾櫙鏉�
+export function kbTop() {
+ var getXY = ['瀛﹀墠鏁欒偛绯�'] // 鏁版嵁鐐瑰悕绉�
+ var getRS = [255] // 瀛︾敓婊℃剰搴�
+
+ var max = Math.ceil(255 / 10) * 10
+
const option = {
+ animation: false,
backgroundColor: 'transparent',
grid: {
left: '0%',
- right: '4%',
- bottom: '4%',
- top: '15%',
- containLabel: true
+ right: '0%',
+ bottom: '0%',
+ top: '0%'
+ // containLabel: true
},
- title: {
- text: '宸ュ巶杈炬垚鐜�',
- x: '46%',
- y: '5%',
- textStyle: {
- // color: '#fff',
- color: '#00ffff',
- fontSize: '20',
- fontWeight: 'bolder'
- },
- 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: 60,
- formatter: function(value, index) {
- return '{title|' + value + '}'
- },
- rich: {
- title: {
- width: 50,
- align: 'right',
- fontSize: 18
+ xAxis: [
+ {
+ type: 'value',
+ show: false,
+ axisLabel: {
+ margin: 5,
+ color: '#666666',
+ textStyle: {
+ fontSize: '13'
}
+ },
+ min: 0,
+ max: max, // 璁＄畻鏈�澶у��
+ interval: max / 5, // 骞冲潎鍒嗕负5浠�
+ splitNumber: 5,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#D1D1D1'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#333333'
+ }
+ },
+ axisTick: {
+ show: false
}
}
- }, {
- 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: ['#fff'],
- color: colorX,
- align: 'left',
- verticalAlign: 'center',
- lineHeight: 40,
- fontSize: 18,
- formatter: function(value, index) {
- return data[index].value + '%'
- }
-
+ ],
+ yAxis: [
+ {
+ type: 'category',
+ inverse: true,
+ show: false,
+ axisLabel: {
+ textStyle: {
+ color: '#6F84BD',
+ fontSize: '13'
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#333333'
+ }
+ },
+ data: getXY
}
- }],
- 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,
- // barBorderRadius: 30,
- yAxisIndex: 0,
- data: data,
- barWidth: 10,
- // align: left,
- itemStyle: {
- normal: {
- color: 'rgba(41, 162, 245, 1)'
- // barBorderRadius: 10
- }
- // color: '#A71A2B',
- // barBorderRadius: 4,
+ ],
+ series: [
+ {
+ name: '鍊�',
+ type: 'bar',
+ zlevel: 1,
+ xAxisIndex: 0,
+ label: {
+ show: false,
+ position: 'right',
+ color: '#6F84BD',
+ fontSize: 14,
+ offset: [10, 0]
+ },
+ itemStyle: {
+ normal: {
+ barBorderRadius: [10, 10, 10, 10],
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+ offset: 0,
+ color: '#91ddec' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#09d8f2' // 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ barWidth: 15,
+ data: getRS
}
- // label: {
- // normal: {
- // color: '#fff',
- // show: true,
- // position: ["-80px", 0],
- // textStyle: {
- // fontSize: 16
- // },
- // formatter: function(a, b) {
- // return a.name
- // }
- // }
- // }
- }]
+ ]
}
return option
}
-export function barline1() {
+// 杞﹂棿璐ㄩ噺宸︿笅鍛ㄤ笉鑹�
+export function line02(dataX, dataY) {
return {
+ animation: false,
backgroundColor: 'transparent',
tooltip: {},
- title: {
- text: '璁㈠崟瀹屾垚鎬绘暟',
- left: '50%',
- top: '5%',
- textAlign: 'center',
- textStyle: {
- // color: '#fff',
- color: '#00ffff',
- fontSize: '20',
- fontWeight: 'bolder'
- }
- },
+ // title: {
+ // show: false,
+ // text: '璁㈠崟瀹屾垚鎬绘暟',
+ // left: '50%',
+ // top: '5%',
+ // textAlign: 'center',
+ // textStyle: {
+ // // color: '#fff',
+ // color: '#00ffff',
+ // fontSize: '20',
+ // fontWeight: 'bolder'
+ // }
+ // },
grid: {
- left: '4%',
- right: '4%',
- bottom: '4%',
- top: '15%',
+ left: '0%',
+ right: '2%',
+ bottom: '5%',
+ top: '8%',
containLabel: true
},
legend: {
@@ -1412,52 +937,53 @@
borderColor: '#fff'
}
},
- 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: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�']
- }],
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: true,
+ axisLabel: {
+ interval: 0,
+ formatter: '{value}',
+ fontSize: 18,
+ margin: 20,
+ textStyle: {
+ color: colorX
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ data: dataX
+ }],
yAxis: [
{
- max: 800,
+ // max: 800,
boundaryGap: false,
splitNumber: 4,
type: 'value',
axisLabel: {
textStyle: {
- fontSize: 14,
+ fontSize: 18,
color: colorY
}
},
- name: '鍗�',
- nameTextStyle: {
- color: colorY,
- fontSize: 14,
- lineHeight: 20
- },
+ // name: '鍗�',
+ // nameTextStyle: {
+ // color: colorY,
+ // fontSize: 14,
+ // lineHeight: 20
+ // },
splitLine: {
show: true,
lineStyle: {
@@ -1494,7 +1020,8 @@
show: true,
position: 'top',
textStyle: {
- color: '#fff'
+ color: '#fff',
+ fontSize: 16
}
},
itemStyle: {
@@ -1513,17 +1040,17 @@
offset: 0,
color: 'rgba(0,154,120,1)'
},
- {
- offset: 1,
- color: 'rgba(0,0,0, 0)'
- }
+ {
+ offset: 1,
+ color: 'rgba(0,0,0, 0)'
+ }
], false),
shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
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: dataY
+ // 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)]
}
// {
// name: '鏈�鏂版敞鍐岄噺',
@@ -1566,1318 +1093,28 @@
}
}
-// 缁煎悎鐪嬫澘
-export function zhkb01() {
- // const zhkb01name = ['璁″垝瀹屾垚杩涘害(鑷骇)', '璁″垝瀹屾垚杩涘害(澶栬喘)'] // 鍚嶇О
- const zhkb01name = ['', ''] // 鍚嶇О
- const zhkb01Value = [Math.ceil(Math.random() * 10 + 90), Math.ceil(Math.random() * 10 + 90)] // 鍊�
- const zhkb01Max = []
+// 杞﹂棿璐ㄩ噺鍙充笂 鏃ヤ笉鑹�
+export function bar04(resValueArr) {
+ // let data = resValueArr.map(({ eqp_name, cont }) => ({ name: eqp_name, value: cont }))//鏇挎崲鏁扮粍瀵硅薄涓殑閿悕
- 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: resValueArr.find(i => i.eqp_name === '瑁呴厤涓�绾�') ? resValueArr.find(i => i.eqp_name === '瑁呴厤涓�绾�').cont : 0
},
{
- name: '鍐峰ⅸ杞﹂棿',
- value: Math.floor(Math.random() * 10 + 90)
+ name: '瑁呴厤浜岀嚎',
+ value: resValueArr.find(i => i.eqp_name === '瑁呴厤浜岀嚎') ? resValueArr.find(i => i.eqp_name === '瑁呴厤浜岀嚎').cont : 0
},
{
- name: '鐑ⅸ杞﹂棿',
- value: Math.floor(Math.random() * 10 + 90)
+ name: '瑁呴厤涓夌嚎',
+ value: resValueArr.find(i => i.eqp_name === '瑁呴厤涓夌嚎') ? resValueArr.find(i => i.eqp_name === '瑁呴厤涓夌嚎').cont : 0
},
{
- 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: resValueArr.find(i => i.eqp_name === '瑁呴厤鍥涚嚎') ? resValueArr.find(i => i.eqp_name === '瑁呴厤鍥涚嚎').cont : 0
}
]
-
- 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++) {
@@ -2888,124 +1125,89 @@
}
return arr
}
- // console.log(getSymbolData(data));
+
const option = {
+ animation: false,
backgroundColor: 'transparent',
grid: {
- left: '0%',
- right: '0%',
- bottom: '0%',
- top: '15%',
+ top: '0%',
+ bottom: 0,
+ right: '4%',
+ left: -20,
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
- // }
- // }
- }
+ yAxis: [{
+ triggerEvent: true,
+ show: true,
+ inverse: true,
+ data: data.map(r => r.name),
+ axisLine: {
+ show: false
},
- {
- 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 + '鍚�'
- }
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ color: '#fff',
+ align: 'left',
+ margin: 60,
+ formatter: function(value, index) {
+ return '{title|' + value + '}'
+ },
+ rich: {
+ title: {
+ width: 50,
+ align: 'right',
+ fontSize: 20
+ }
}
- }],
+ }
+ }, {
+ triggerEvent: true,
+ show: true,
+ inverse: true,
+ data: data.map(r => r.name),
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ interval: 0,
+ shadowOffsetX: '-20px',
+ color: ['#fff'],
+ align: 'left',
+ verticalAlign: 'center',
+ lineHeight: 40,
+ fontSize: 20,
+ formatter: function(value, index) {
+ 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],
+ // symbolSize: [50, 50],
+ symbolSize: function(params) {
+ return params === 0 ? [0, 0] : [50, 50]
+ },
symbolOffset: [20, 0],
z: 12,
itemStyle: {
@@ -3019,17 +1221,18 @@
name: '鏉�',
type: 'bar',
showBackground: true,
+ // barBorderRadius: 30,
yAxisIndex: 0,
data: data,
barWidth: 10,
// align: left,
itemStyle: {
normal: {
- color: function(params) {
- return myColor[params.dataIndex]
- },
+ color: 'rgba(41, 162, 245, 1)',
barBorderRadius: 10
}
+ // color: '#A71A2B',
+ // barBorderRadius: 4,
}
// label: {
// normal: {
@@ -3050,684 +1253,1912 @@
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)
+// 杞﹂棿璐ㄩ噺鍙充笅 鍛ㄤ笉鑹�
+export function pie02(resValueArr) {
+ const bgColor = 'transparent'
+ const title = '鎬讳笉鑹暟'
+ const color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
+ const echartData = resValueArr.map(({ eqp_name, cont }) => ({ name: eqp_name, value: cont }))// 鏇挎崲鏁扮粍瀵硅薄涓殑閿悕
+ const formatNumber = function(num) {
+ const reg = /(?=(\B)(\d{3})+$)/g
+ return num.toString().replace(reg, ',')
+ }
+ const total = echartData.reduce((a, b) => {
+ return a + b.value * 1
+ }, 0)
const option = {
-
- backgroundColor: 'transparent',
+ animation: false,
+ backgroundColor: bgColor,
+ color: color,
// tooltip: {
- // trigger: 'axis',
- // formatter: '{b} : {c}',
- // axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
- // type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
- // }
+ // trigger: 'item'
// },
- grid: {
- left: '2%',
- right: '2%',
- bottom: '2%',
- top: '15%',
- containLabel: true
- },
- title: {
- text: '杩戜竴骞存瘡鏈堣兘鑰椾娇鐢�',
- x: '40%',
- y: '0%',
+ title: [{
+ text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
+ top: 'center',
+ left: 'center',
textStyle: {
- color: '#09d8f2',
- fontSize: 16
+ rich: {
+ name: {
+ fontSize: 22,
+ fontWeight: 'normal',
+ color: '#fff',
+ padding: [10, 0]
+ },
+ val: {
+ fontSize: 22,
+ fontWeight: 'bold',
+ color: '#fff'
+ }
+ }
}
- // subtextStyle: {
- // color: '#90979c',
- // fontSize: '16'
+ }
+ // {
+ // text: '鍗曚綅锛氫釜',
+ // top: 20,
+ // left: 20,
+ // textStyle: {
+ // fontSize: 14,
+ // color: '#666666',
+ // fontWeight: 400
+ // }
// }
+ ],
+ // legend: {
+ // orient: 'vertical',
+ // icon: 'rect',
+ // x: '80%',
+ // y: 'center',
+ // itemWidth: 12,
+ // itemHeight: 12,
+ // align: 'left',
+ // textStyle: {
+ // rich: {
+ // name: {
+ // fontSize: 12
+ // },
+ // value: {
+ // fontSize: 16,
+ // padding: [0, 5, 0, 15]
+ // },
+ // unit: {
+ // fontSize: 12
+ // }
+ // }
+ // },
+ // formatter: function(name) {
+ // let res = echartData.filter(v => v.name === name);
+ // res = res[0] || {};
+ // let unit = res.unit || '';
+ // return '{name|' + name + '} {value|' + res.value + '}{unit|' + unit + '}'
+ // }
+ // // data: legendName
+ // },
+ series: [
+ {
+ type: 'pie',
+ radius: ['35%', '50%'],
+ center: ['50%', '50%'],
+ data: echartData,
+ hoverAnimation: false,
+ itemStyle: {
+ normal: {
+ borderColor: bgColor,
+ borderWidth: 2
+ }
+ },
+ labelLine: {
+ normal: {
+ // showAbove: false,
+ length: 20,
+ length2: 35,
+ lineStyle: {
+ color: '#fff'
+ }
+ }
+ },
+ label: {
+ normal: {
+ formatter: params => {
+ return (
+ '{icon|鈼弣{name|' + params.name + '}{value|' +
+ formatNumber(params.value) + '}'
+ )
+ },
+ padding: [0, -50, 25, -50],
+ rich: {
+ icon: {
+ fontSize: 18,
+ color: 'red'
+ },
+ name: {
+ fontSize: 18,
+ padding: [0, 10, 0, 4],
+ color: '#fff'
+ },
+ value: {
+ fontSize: 18,
+ fontWeight: 'bold',
+ color: '#fff'
+ }
+ }
+ }
+ }
+ }]
+ }
+ return option
+}
+
+// 杞﹂棿鐢熶骇 鐢熶骇淇℃伅 鐢熶骇杩涘害 杩涘害鏉�
+export function progress(param1, param2) {
+// param1 鎶ュ伐鏁伴噺
+ // param2 浠诲姟鏁伴噺
+
+ // 鎷垮埌鏁版嵁涔嬪悗闇�瑕佽绠楀嚭鐩稿闀垮害 param2鐨勭浉瀵归暱搴︿负100
+ let relativeValue = ''// 鐩稿鍊� 缁胯壊鑳屾櫙
+
+ relativeValue = (param1 / param2) * 100
+ // 鐧惧垎姣旀暟鍊肩殑浣嶇疆
+ var position = 'right'
+ // if (param1 >= 50) {
+ // position = 'inside';
+ // } else if (param1 < 50) {
+ // position = 'right';
+ // }
+
+ var option = {
+ animation: false,
+ // animation: false, // 鍙栨秷鍔ㄧ敾
+ // animationDuration: 5000,
+ grid: {
+ top: 'center',
+ left: '0%',
+ right: '0%',
+ // height: '%',
+ // containLabel: false
+ containLabel: true
+
},
xAxis: {
- data: ['01鏈�', '02鏈�', '03鏈�', '04鏈�', '05鏈�', '06鏈�', '07鏈�', '08鏈�', '09鏈�', '10鏈�', '11鏈�', '12鏈�'],
- // 鍧愭爣杞�
- axisLine: {
- lineStyle: {
- color: '#3eb2e8'
- }
- },
- // 鍧愭爣鍊兼爣娉�
+ type: 'value',
axisLabel: {
- show: true,
- textStyle: {
- color: colorX,
- fontSize: 14
- }
- }
- },
- yAxis: {
- // 鍧愭爣杞�
+ show: false
+ },
+ max: 100,
+ axisTick: {
+ show: false
+ },
axisLine: {
show: false
},
- // 鍧愭爣鍊兼爣娉�
- axisLabel: {
- show: true,
- textStyle: {
- color: '#09d8f2',
- fontSize: 14
- }
- },
- // 鍒嗘牸绾�
splitLine: {
- lineStyle: {
- type: 'dashed',
- color: 'rgba(135,140,147,0.8)'
+ show: false
+ }
+ },
+ yAxis: [{
+ type: 'category',
+ data: [],
+ axisLabel: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ z: 10
+ }, {
+ type: 'category',
+ axisLabel: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ data: []
+ }],
+ series: [{
+ name: '',
+ type: 'bar',
+ barWidth: '100%',
+ // barMaxWidth: '100%',
+ label: {
+ normal: {
+ show: true,
+ // position: ['24', '38%'],
+ position: (param1.toString() + param2.toString()).length <= 6 ? ['24', '38%'] : 'insideLeft',
+ // formatter: '{c} %',
+ formatter: param1 + '/' + param2,
+ textStyle: {
+ color: '#FFFFFF',
+ fontWeight: 'bold',
+ fontFamily: 'Microsoft YaHei',
+ fontSize: 18
+ }
}
},
- splitNumber: 3
+ itemStyle: {
+ normal: {
+ barBorderRadius: 5,
+ shadowBlur: 10,
+ shadowColor: '#111',
+ color: '#2FD04F'
+ }
+ },
+ // data: [param1],
+ data: [relativeValue],
+ z: 10
+ }, {
+ type: 'bar',
+ barWidth: '100%',
+ yAxisIndex: 1,
+ silent: true,
+ // barMaxWidth: '100%',
+ itemStyle: {
+ normal: {
+ barBorderRadius: 5,
+ color: '#42475B'
+ }
+ },
+ // data: [param2]
+ data: [100]
+ }]
+ }
+
+ return option
+}
+
+// 閲囪喘璁㈠崟
+export function cgddchart(data1, data2, data3) {
+ // 寰楀埌鏈�澶у�� 5鐨勫�嶆暟
+
+ let max = Math.max(Math.max(data1, data2), data3) + 5
+ if (max % 5 !== 0) {
+ max = 5 - max % 5 + max
+ }
+ const option = {
+ backgroundColor: 'transparent',
+ tooltip: {
+ formatter: '{a} <br/>{c} {b}'
},
series: [
{
- name: 'a',
+ show: false,
+ name: ' ',
+ type: 'gauge',
+ color: ['#f00'],
+ min: 0,
+ max: max,
+ splitNumber: 5,
+ radius: '70%',
+ center: ['17%', '48%'],
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ width: 10,
+ color: [
+ [0.4, '#09d8f2'],
+ [1, '#00FFFFF']
+ ]
+ },
+ backgroundColor: 'none'
+ },
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)
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
}
},
- 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)
+ splitLine: { // 鍒嗛殧绾�
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: colorY
}
},
- barGap: 0,
- data: sideData
+ axisLabel: {
+ borderRadius: 1,
+ // color: 'rgba(255,255,255,0.7)',
+ color: '#00FFFF',
+ padding: 1,
+ fontSize: 18
+ },
+ title: {
+ // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ // fontWeight: 'bolder',
+ fontSize: 22,
+ fontFamily: 'Microsoft YaHei',
+ fontColor: '#FFF',
+ color: '#FFF',
+ paddingTop: 20,
+ offsetCenter: [0, '120%']
+ // fontStyle: 'italic'
+ },
+ itemStyle: {
+ // color: '#1092ff'
+ color: '#09d8f2'
+ },
+ detail: {
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ fontFamily: 'digital',
+ fontSize: 26,
+ color: '#fff',
+ rich: {},
+ offsetCenter: [0, '90%'],
+
+ formatter: function(value) {
+ return value
+ }
+ },
+ data: [{
+ value: data1,
+ name: '鏈湀閲囪喘璁㈠崟鏁�'
+ }]
},
{
- name: 'b',
+ name: '鏈湀閲囪喘璁㈠崟鏁�',
+ type: 'gauge',
+ color: ['#f00'],
+ min: 0,
+ max: max,
+ splitNumber: 5,
+ radius: '70%',
+ center: ['17%', '48%'],
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ width: 10,
+ color: [
+ [0.4, '#09d8f2'],
+ [1, '#00FFFFF']
+ ]
+ },
+ backgroundColor: 'none'
+ },
tooltip: {
show: false
},
- type: 'pictorialBar',
- itemStyle: {
- borderWidth: 1,
- borderColor: '#0571D5',
- color: '#1779E0'
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
},
- 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
+ splitLine: { // 鍒嗛殧绾�
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: colorY
+ }
+ },
+ axisLabel: {
+ borderRadius: 1,
+ // color: 'rgba(255,255,255,0.7)',
+ color: '#00FFFF',
+ padding: 1,
+ fontSize: 18
+ },
+ title: {
+ // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ // fontWeight: 'bolder',
+ fontSize: 22,
+ fontFamily: 'Microsoft YaHei',
+ fontColor: '#FFF',
+ color: '#FFF',
+ paddingTop: 20,
+ offsetCenter: [0, '120%']
+ // fontStyle: 'italic'
+ },
+ itemStyle: {
+ // color: '#1092ff'
+ color: '#09d8f2'
+ },
+ detail: {
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ fontFamily: 'digital',
+ fontSize: 26,
+ color: '#fff',
+ rich: {},
+ offsetCenter: [0, '90%'],
+
+ formatter: function(value) {
+ return value
+ }
+ },
+ data: [{
+ value: data1,
+ name: '鏈湀閲囪喘璁㈠崟鏁�'
+ }]
+ },
+ {
+ name: '鏈湀鍒拌揣鍗曟暟',
+ type: 'gauge',
+ color: ['#f00'],
+ min: 0,
+ max: max,
+ splitNumber: 5,
+ radius: '70%',
+ center: ['50%', '48%'],
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ width: 10,
+ color: [
+ [0.4, '#09d8f2'],
+ [1, '#00FFFFF']
+ ]
+ },
+ backgroundColor: 'none'
+ },
+ tooltip: {
+ show: false
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: colorY
+ }
+ },
+ axisLabel: {
+ borderRadius: 1,
+ // color: 'rgba(255,255,255,0.7)',
+ color: '#00FFFF',
+ padding: 1,
+ fontSize: 18
+ },
+ title: {
+ // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ // fontWeight: 'bolder',
+ fontSize: 22,
+ fontColor: '#FFF',
+ color: '#FFF',
+ fontFamily: 'Microsoft YaHei',
+ paddingTop: 20,
+ offsetCenter: [0, '120%']
+ // fontStyle: 'italic'
+ },
+ itemStyle: {
+ // color: '#1092ff'
+ color: '#09d8f2'
+ },
+ detail: {
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ // borderWidth: 1,
+ textBorderColor: '#000',
+ textBorderWidth: 1,
+ textShadowBlur: 1,
+ textShadowColor: colorX,
+ textShadowOffsetX: 0,
+ textShadowOffsetY: 0,
+ paddingTop: 10,
+ fontFamily: 'digital',
+ fontSize: 20,
+ width: 30,
+ color: '#fff',
+ rich: {},
+ offsetCenter: [0, '90%'],
+ formatter: function(value) {
+ // console.info(value)
+ // return (value * 10 + '%')
+ return value
+ }
+ },
+ data: [{
+ value: data2,
+ name: '鏈湀鍒拌揣鍗曟暟'
+ }]
+ },
+ {
+ name: '鏈湀閲囪喘鍏ュ簱鍗曟暟',
+ type: 'gauge',
+ color: ['#f00'],
+ min: 0,
+ max: max,
+ splitNumber: 5,
+ radius: '70%',
+ center: ['83%', '48%'],
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ width: 10,
+ color: [
+ [0.4, '#09d8f2'],
+ [1, '#00FFFFF']
+ ]
+ },
+ backgroundColor: 'none'
+ },
+ tooltip: {
+ show: false
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: colorX
+ }
+ },
+ axisLabel: {
+ borderRadius: 1,
+ // color: 'rgba(255,255,255,0.7)',
+ color: '#00FFFF',
+ padding: 1,
+ fontSize: 18
+ },
+ title: {
+ // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ // fontWeight: 'bolder',
+ fontSize: 22,
+ fontColor: '#FFF',
+ color: '#FFF',
+ fontFamily: 'Microsoft YaHei',
+ paddingTop: 20,
+ offsetCenter: [0, '120%']
+ // fontStyle: 'italic'
+ },
+ itemStyle: {
+ // color: '#1092ff'
+ color: '#09d8f2'
+ },
+ detail: {
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ // borderWidth: 1,
+ textBorderColor: '#000',
+ textBorderWidth: 1,
+ textShadowBlur: 1,
+ textShadowColor: colorX,
+ textShadowOffsetX: 0,
+ textShadowOffsetY: 0,
+ paddingTop: 10,
+ fontFamily: 'digital',
+ fontSize: 20,
+ width: 30,
+ color: '#fff',
+ rich: {},
+ offsetCenter: [0, '90%'],
+ formatter: function(value) {
+ return value
+ }
+ },
+ data: [{
+ value: data3,
+ name: `鏈湀閲囪喘鍏ュ簱鍗曟暟`
+ }]
}
+
]
}
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
+// 杞﹂棿璐ㄩ噺
+export function cjzl01(scaleData) {
+ var rich = {
+ white: {
+ color: colorX,
+ align: 'center',
+ padding: [3, 0],
+ fontSize: 20
+ }
+ }
+ var data = []
+ var color = ['#00ffff', '#ff5b00', '#006ced', '#ffe000', '#ffa800', '#ff3000']
+ for (var i = 0; i < scaleData.length; i++) {
+ data.push({
+ value: scaleData[i].value,
+ name: scaleData[i].name,
+ itemStyle: {
+ normal: {
+ borderWidth: 5,
+ shadowBlur: 20,
+ borderColor: color[i],
+ shadowColor: color[i]
}
}
}
- ],
+ )
+ }
+ var seriesObj = [{
+ name: '',
+ type: 'pie',
+ clockWise: false,
+ radius: [60, 65],
+ hoverAnimation: false,
+ top: '10%',
+ itemStyle: {
+ normal: {
+ label: {
+ show: true,
+ position: 'outside',
+ color: colorX,
+ fontSize: 20,
+ formatter: function(params) {
+ if (params.name !== '') {
+ return params.name + '\n{white|' + params.value + '}'
+ } else {
+ return ''
+ }
+ },
+ rich: rich
+ },
+ labelLine: {
+ length: 10,
+ length2: 10,
+ show: true,
+ color: '#00ffff'
+ }
+ }
+ },
+ data: data
+ }]
+ const option = {
+ backgroundColor: 'transparent',
+ tooltip: {
+ show: false
+ },
+ legend: {
+ show: false
+ },
+ toolbox: {
+ show: false
+ },
+ title: {
+ text: '鎬诲拰',
+ left: '49%',
+ top: '45%',
+ textAlign: 'center',
+ textStyle: {
+ color: '#00ffff',
+ fontSize: '20',
+ fontWeight: 'bolder'
+ },
+ subtext: scaleData.length > 0 ? scaleData.map(i => parseFloat(i.value)).reduce((pre, curr) => {
+ return pre + curr
+ }) : [0],
+ subtextStyle: {
+ color: '#00ffff',
+ fontSize: '20',
+ fontWeight: 'bolder'
+ }
+ },
+ series: seriesObj
+ }
+
+ return option
+}
+
+export function cjzl02(title, scaleData) {
+ var rich = {
+ white: {
+ color: '#ddd',
+ align: 'center',
+ padding: [5, 0],
+ fontSize: 20
+ }
+ }
+
+ var data = []
+ var color = ['#00ffff', '#ff3000', '#ffe000', '#ffa800', '#ff5b00']
+ for (var i = 0; i < scaleData.length; i++) {
+ data.push({
+ value: scaleData[i].value,
+ name: scaleData[i].name,
+ itemStyle: {
+ normal: {
+ borderWidth: 5,
+ shadowBlur: 20,
+ borderColor: color[i],
+ shadowColor: [i]
+ }
+ }
+ }
+ )
+ }
+ var seriesObj = [{
+ name: '',
+ type: 'pie',
+ clockWise: false,
+ radius: [60, 65],
+ top: '10%',
+ hoverAnimation: false,
+ itemStyle: {
+ normal: {
+ label: {
+ fontSize: 20,
+ show: true,
+ position: 'outside',
+ color: colorX,
+ formatter: function(params) {
+ // var percent = 0
+ // var total = 0
+ // for (var i = 0; i < scaleData.length; i++) {
+ // total += scaleData[i].value
+ // }
+ // percent = ((params.value / total) * 100).toFixed(0)
+ if (params.name !== '') {
+ return params.name + '\n{white|' + '' + params.value + '}'
+ } else {
+ return ''
+ }
+ },
+ rich: rich
+ },
+ labelLine: {
+ length: 10,
+ length2: 20,
+ show: true,
+ color: '#00ffff'
+ }
+ }
+ },
+ data: data
+ }]
+ const option = {
+ backgroundColor: 'transparent',
+ tooltip: {
+ show: false
+ },
+ top: 'middle',
+ title: {
+ text: title,
+ left: '49%',
+ top: '45%',
+ textAlign: 'center',
+ textStyle: {
+ // color: colorX,
+ color: '#00ffff',
+ fontSize: '20',
+ fontWeight: 'bolder'
+ },
+ subtext: scaleData.length > 0 ? scaleData.map(i => parseFloat(i.value)).reduce((pre, curr) => {
+ return pre + curr
+ }) : [0],
+ subtextStyle: {
+ color: '#00ffff',
+ fontSize: '20',
+ fontWeight: 'bolder'
+ }
+ },
+ legend: {
+ show: false
+ },
+ toolbox: {
+ show: false
+ },
+ series: seriesObj
+ }
+
+ return option
+}
+
+export function cjzl03(xData, legendData, yData, show) { // 宸︿晶
+ return {
+ backgroundColor: 'transparent',
+ // tooltip: {},
+ title: {
+ show: show,
+ text: '鍚勮溅闂翠笉鑹秼鍔�',
+ left: '50%',
+ top: '3%',
+ textAlign: 'center',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '20',
+ fontWeight: 'bolder'
+ }
+ },
+ grid: {
+ left: '2%',
+ right: '2%',
+ bottom: '20%',
+ top: '15%',
+ containLabel: true
+ },
+ legend: {
+ data: legendData,
+ textStyle: { fontSize: 16, color: '#fff' },
+ itemWidth: 25,
+ itemHeight: 10,
+ itemGap: 15,
+ bottom: '5%',
+ selectedMode: false
+ },
+ xAxis: [{
+ type: 'category',
+ boundaryGap: true,
+ axisLabel: {
+ interval: 0,
+ formatter: '{value}',
+ fontSize: 16,
+ margin: 20,
+ textStyle: {
+ color: colorX
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ data: xData
+ }],
yAxis: [
{
+ // max: 800,
+ boundaryGap: false,
+ splitNumber: 4,
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,
+ fontSize: 18,
color: colorX
+ }
+ },
+ // name: '鍗�',
+ // nameTextStyle: {
+ // color: colorY,
+ // fontSize: 14,
+ // lineHeight: 20
+ // },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
}
},
axisLine: {
show: true,
lineStyle: {
- width: 2,
- color: '#4E84AC'
+ color: '#032c58'
}
},
axisTick: {
- show: false
- },
- splitLine: {
- lineStyle: {
- type: 'dashed',
- // 浣跨敤娣辨祬鐨勯棿闅旇壊
- color: '#184D9A'
- }
+ show: true
}
}
],
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: {
+ name: legendData[0],
+ type: 'line',
+ // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
+ // symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
+ showAllSymbol: true,
+ symbol: 'emptyCircle',
+ symbolSize: 6,
+ lineStyle: {
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
- }
+ color: '#00ffff' // 绾挎潯棰滆壊
+ },
+ borderColor: '#00ffff'
},
label: {
- normal: {
- show: true,
- // lineHeight: 20,
- // width: 80,
- // height: 20,
- verticalAlign: 'center',
- borderRadius: 200,
- position: 'right',
- color: '#00FF00',
- fontSize: 16
+ show: true,
+ position: 'top',
+ textStyle: {
+ fontSize: 16,
+ color: '#fff'
}
+ },
+ itemStyle: {
+ normal: {
+ color: '#00ffff'
+ }
+ },
+ tooltip: {
+ show: false
+ },
+ // areaStyle: { // 鍖哄煙濉厖鏍峰紡
+ // normal: {
+ // // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ // offset: 0,
+ // color: 'rgba(0,154,120,1)'
+ // },
+ // {
+ // offset: 1,
+ // color: 'rgba(0,0,0, 0)'
+ // }
+ // ], false),
+ // shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
+ // shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
+ // }
+ // },
+ data: yData[0]
+ },
+ {
+ name: legendData[1],
+ type: 'line',
+ // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
+ // symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
+ showAllSymbol: true,
+ symbol: 'emptyCircle',
+ symbolSize: 6,
+ lineStyle: {
+ normal: {
+ color: '#ff3000' // 绾挎潯棰滆壊
+ },
+ borderColor: '#ff3000'
+ },
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ fontSize: 16,
+ color: '#fff'
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#ff3000'
+ }
+ },
+ tooltip: {
+ show: false
+ },
+ // areaStyle: { // 鍖哄煙濉厖鏍峰紡
+ // normal: {
+ // // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ // offset: 0,
+ // color: 'rgba(0,154,120,1)'
+ // },
+ // {
+ // offset: 1,
+ // color: 'rgba(0,0,0, 0)'
+ // }
+ // ], false),
+ // shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
+ // shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
+ // }
+ // },
+ data: yData[1]
+ },
+ {
+ name: legendData[2],
+ type: 'line',
+ // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
+ // symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
+ showAllSymbol: true,
+ symbol: 'emptyCircle',
+ symbolSize: 6,
+ lineStyle: {
+ normal: {
+ color: '#ffe000' // 绾挎潯棰滆壊
+ },
+ borderColor: '#ffe000'
+ },
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ fontSize: 16,
+ color: '#fff'
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#ffe000'
+ }
+ },
+ tooltip: {
+ show: false
+ },
+ // areaStyle: { // 鍖哄煙濉厖鏍峰紡
+ // normal: {
+ // // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ // offset: 0,
+ // color: 'rgba(0,154,120,1)'
+ // },
+ // {
+ // offset: 1,
+ // color: 'rgba(0,0,0, 0)'
+ // }
+ // ], false),
+ // shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
+ // shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
+ // }
+ // },
+ data: yData[2]
+ },
+ {
+ name: legendData[3],
+ type: 'line',
+ // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
+ // symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
+ showAllSymbol: true,
+ symbol: 'emptyCircle',
+ symbolSize: 6,
+ lineStyle: {
+ normal: {
+ color: '#ffa800' // 绾挎潯棰滆壊
+ },
+ borderColor: '#ffa800'
+ },
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ fontSize: 16,
+ color: '#fff'
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#ffa800'
+ }
+ },
+ tooltip: {
+ show: false
+ },
+ // areaStyle: { // 鍖哄煙濉厖鏍峰紡
+ // normal: {
+ // // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ // offset: 0,
+ // color: 'rgba(0,154,120,1)'
+ // },
+ // {
+ // offset: 1,
+ // color: 'rgba(0,0,0, 0)'
+ // }
+ // ], false),
+ // shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
+ // shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
+ // }
+ // },
+ data: yData[3]
+ },
+ {
+ name: legendData[4],
+ type: 'line',
+ // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
+ // symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
+ showAllSymbol: true,
+ symbol: 'emptyCircle',
+ symbolSize: 6,
+ lineStyle: {
+ normal: {
+ color: '#ff5b00' // 绾挎潯棰滆壊
+ },
+ borderColor: '#ff5b00'
+ },
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ fontSize: 16,
+ color: '#fff'
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#ff5b00'
+ }
+ },
+ tooltip: {
+ show: false
+ },
+ // areaStyle: { // 鍖哄煙濉厖鏍峰紡
+ // normal: {
+ // // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ // offset: 0,
+ // color: 'rgba(0,154,120,1)'
+ // },
+ // {
+ // offset: 1,
+ // color: 'rgba(0,0,0, 0)'
+ // }
+ // ], false),
+ // shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
+ // shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
+ // }
+ // },
+ data: yData[4]
+ }
+ ]
+ }
+}
+
+export function cjzl04(xData, data1, data2, data3) { // 鍙充晶
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '2%',
+ top: '12%',
+ right: '2%',
+ bottom: '20%',
+ containLabel: true
+ },
+ legend: {
+ // show: true,
+ // itemGap: 20,
+ // data: ['娉ㄥ唽鎬婚噺', '鏈�鏂版敞鍐岄噺'],
+ // textStyle: {
+ // color: '#f9f9f9',
+ // borderColor: '#fff'
+ // }
+ data: ['瀹屾垚鏁�', '浠诲姟鏁�', '瀹屾垚鐜�'],
+ textStyle: { fontSize: 16, color: '#fff' },
+ itemWidth: 25,
+ itemHeight: 10,
+ itemGap: 15,
+ bottom: '5%',
+ selectedMode: false
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: true,
+ axisLabel: {
+ interval: 0,
+ formatter: '{value}',
+ fontSize: 16,
+ margin: 20,
+ textStyle: {
+ color: colorX
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ data: xData
+ },
+ yAxis: [
+ {
+ boundaryGap: false,
+ // splitNumber: 4,
+ type: 'value',
+ // max: 100,
+ axisLabel: {
+ textStyle: {
+ fontSize: 16,
+ color: colorX
+ }
+ },
+ nameTextStyle: {
+ color: '#fff',
+ fontSize: 14,
+ lineHeight: 40
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: false
}
},
{
- name: '璁惧寮�鏈虹巼',
+ boundaryGap: false,
+ // splitNumber: 4,
+ max: 100,
+ type: 'value',
+ axisLabel: {
+ textStyle: {
+ fontSize: 16,
+ color: colorX
+ }
+ },
+ nameTextStyle: {
+ color: '#fff',
+ fontSize: 16,
+ lineHeight: 40
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: false
+ }
+ }
+ ],
+ series: [
+ { // 涓変釜鏈�搴曚笅鐨勫渾鐗�
+ '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: `rgb(37,196,238)` // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: `rgb(37,196,238)`// 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ 'data': [1, 1, 1, 1, 1]
+ },
+
+ // 涓嬪崐鎴煴鐘跺浘
+ {
+ 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,
+ barWidth: 45,
+ barGap: '-100%',
+ itemStyle: { // lenged鏂囨湰
+ opacity: 1,
+ color: function(params) {
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: `rgb(35,131,180)` // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: `rgb(35,131,180)`// 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ data: data1
+ },
+
+ { // 鏇夸唬鏌辩姸鍥� 榛樿涓嶆樉绀洪鑹诧紝鏄渶涓嬫柟鏌卞浘锛堥偖浠惰惀閿�锛夌殑value鍊� - 20
+ type: 'bar',
+ barWidth: 45,
+ barGap: '-100%',
+ stack: '骞垮憡',
+ itemStyle: {
+ color: 'transparent'
+ },
+ label: {
+ normal: {
+ show: true,
+ position: 'left',
+ fontSize: 16,
+ color: colorX,
+ zIndex: 10
+ }
+ },
+ data: data1
+ },
+
+ {
+ 'name': '', // 澶撮儴
+ 'type': 'pictorialBar',
+ 'symbolSize': [45, 25],
+ 'symbolOffset': [0, -10],
+ 'z': 12,
+ 'symbolPosition': 'end',
+ itemStyle: {
+ color: '#163F7A',
+ opacity: 1
+ },
+ 'data': data2
+ },
+
+ {
+ 'name': '',
+ 'type': 'pictorialBar',
+ 'symbolSize': [45, 25],
+ 'symbolOffset': [0, -10],
+ 'z': 12,
+ itemStyle: {
+ opacity: 1,
+ color: function(params) {
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: `rgb(37,196,238)` // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: `rgb(37,196,238)`// 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ 'symbolPosition': 'end',
+ 'data': data1
+ },
+
+ {
+ name: '浠诲姟鏁�',
+ type: 'bar',
+ barWidth: 45,
+ barGap: '-100%',
+ z: 0,
+ itemStyle: {
+ color: '#163F7A',
+ opacity: 0.7
+ },
+ label: {
+ normal: {
+ show: true,
+ position: 'top',
+ fontSize: 16,
+ color: colorX,
+ offset: [0, -5]
+ }
+ },
+ data: data2
+ },
+
+ {
+ name: '瀹屾垚鐜�',
+ type: 'line',
+ yAxisIndex: 1,
+ showSymbol: true,
+ showAllSymbol: true,
+ symbolSize: 6,
+ barWidth: 14,
+ zlevel: 3,
+ lineStyle: {
+ normal: {
+ width: 2,
+ color: `rgb(108,237,100)`
+ }
+ },
+ // 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: 1,
- y2: 0,
+ x2: 0,
+ y2: 1,
colorStops: [
{
offset: 0,
- color: '#00FFFF' // 0% 澶勭殑棰滆壊
+ color: `rgb(108,237,100)`// 0% 澶勭殑棰滆壊
},
{
offset: 1,
- color: '#FFFF00' // 100% 澶勭殑棰滆壊
+ color: `rgb(108,237,100)` // 100% 澶勭殑棰滆壊
}
],
- global: false // 缂虹渷涓� false
- },
- barBorderRadius: [30, 30, 30, 30],
- shadowColor: 'rgba(0,160,221,1)',
- shadowBlur: 4
+ globalCoord: false // 缂虹渷涓� false
+ } // 娓愬彉棰滆壊
}
},
label: {
normal: {
show: true,
- // lineHeight: 20,
- // width: 80,
- // height: 20,
- borderRadius: 200,
- verticalAlign: 'center',
- // position: ['-0', '-20'],
- position: 'right',
- color: '#FFFF00',
- fontSize: 16
+ position: 'top',
+ fontSize: 14,
+ color: colorX,
+ formatter: params => {
+ return `${params.value}%`
+ }
+ // offset: [0, -5]
}
- }
+ },
+ data: data3
}
]
}
return option
}
-export function zhkb12() {
+export function all01(xData2, yData) {
+ // var xData2 = ['123', '21', '32', '23', '1233']
+ var data1 = yData.map(i => i.quantity)
+ var data2 = yData.map(i => i.plan_qty)
+ var barWidth = 30
+ const option = {
+ backgroundColor: 'transparent',
+ // tooltip: {
+ // trigger: 'item'
+ // },
+ grid: {
+ left: '2%',
+ top: '20%',
+ right: '2%',
+ bottom: '5%',
+ containLabel: true
+ },
+ title: {
+ text: '鍚勮溅闂村綋鏈堣鍗曟暟/鍏ュ簱鏁伴噺',
+ left: '50%',
+ top: '0%',
+ textAlign: 'center',
+ textStyle: {
+ color: 'rgba(0,255,255,0.8)',
+ fontSize: '20',
+ fontWeight: 'bolder'
+ }
+ },
+ xAxis: {
+ data: xData2,
+ type: 'category',
+ boundaryGap: true,
+ axisLabel: {
+ interval: 0,
+ formatter: '{value}',
+ fontSize: 16,
+ margin: 20,
+ textStyle: {
+ color: colorX
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: false
+ }
+ },
+ yAxis: {
+ boundaryGap: false,
+ // splitNumber: 4,
+ type: 'value',
+ // max: 100,
+ axisLabel: {
+ textStyle: {
+ fontSize: 16,
+ color: colorX
+ }
+ },
+ nameTextStyle: {
+ color: '#fff',
+ fontSize: 16,
+ lineHeight: 40
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: false
+ }
+ },
+ series: [
+ { // 涓婂崐鎴煴瀛�
+ name: '2019',
+ type: 'bar',
+ barWidth: barWidth,
+ barGap: '-100%',
+ z: 0,
+ itemStyle: {
+ color: '#163F7A',
+ opacity: 0.7
+ },
+ data: data2
+ },
+ { // 涓嬪崐鎴煴瀛�
+ name: '2020',
+ type: 'bar',
+ barWidth: barWidth,
+ barGap: '-100%',
+ itemStyle: { // lenged鏂囨湰
+ opacity: 0.7,
+ color: function(params) {
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#12B9DB' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#6F8EF2' // 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ data: data1
+ },
+ { // 鏇夸唬鏌辩姸鍥� 榛樿涓嶆樉绀洪鑹诧紝鏄渶涓嬫柟鏌卞浘锛堥偖浠惰惀閿�锛夌殑value鍊� - 20
+ type: 'bar',
+ barWidth: barWidth,
+ barGap: '-100%',
+ stack: '骞垮憡',
+ itemStyle: {
+ color: 'transparent'
+ },
+ label: {
+ normal: {
+ show: true,
+ position: 'left',
+ fontSize: 16,
+ color: colorX,
+ zIndex: 10
+ }
+ },
+ data: data1
+ },
+ { // 涓婂崐鎴煴瀛愰《閮ㄥ渾鐗�
+ 'name': '',
+ 'type': 'pictorialBar',
+ 'symbolSize': [barWidth, 15],
+ 'symbolOffset': [0, -10],
+ 'z': 12,
+ 'symbolPosition': 'end',
+ itemStyle: {
+ color: '#163F7A',
+ opacity: 1
+ },
+ label: {
+ show: true,
+ position: 'top',
+ fontSize: 16,
+ color: '#fff'
+ },
+ 'data': data2
+ },
+ { // 涓嬪崐鎴煴瀛愰《閮ㄥ渾鐗�
+ 'name': '',
+ 'type': 'pictorialBar',
+ 'symbolSize': [barWidth, 15],
+ 'symbolOffset': [0, -10],
+ 'z': 12,
+ itemStyle: {
+ opacity: 1,
+ color: function(params) {
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#12B9DB' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#6F8EF2' // 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ // label: {
+ // show: true,
+ // position: 'top',
+ // fontSize: 16,
+ // color: '#fff'
+ // // formatter:(item)=>{
+ // // console.log(item)
+ // // return 'ssss'
+ // // }
+ // },
+ 'symbolPosition': 'end',
+ 'data': data1
+ },
+ { // 涓嬪崐鎴煴瀛愬簳閮ㄥ渾鐗�
+ 'name': '',
+ 'type': 'pictorialBar',
+ 'symbolSize': [barWidth, 15],
+ 'symbolOffset': [0, 5],
+ 'z': 12,
+ itemStyle: {
+ opacity: 1,
+ color: function(params) {
+ 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: '绗竴鍦�',
+ type: 'pictorialBar',
+ symbolSize: [47, 16],
+ symbolOffset: [0, 11],
+ z: 11,
+ itemStyle: {
+ normal: {
+ color: 'transparent',
+ borderColor: '#00ffff',
+ borderWidth: 2
+ }
+ },
+ data: [1, 1, 1, 1, 1]
+ },
+ {
+ name: '绗簩鍦�',
+ type: 'pictorialBar',
+ symbolSize: [62, 22],
+ symbolOffset: [0, 17],
+ z: 10,
+ itemStyle: {
+ normal: {
+ color: 'transparent',
+ borderColor: '#00ffff',
+ borderWidth: 2
+ }
+ },
+ data: [1, 1, 1, 1, 1]
+ }
+ ]
+ }
+ return option
+}
+
+export function all02(data) {
+ return {
+ backgroundColor: 'transparent',
+ // tooltip: {},
+ title: {
+ text: '姣忔湀璁㈠崟鏁伴噺/鍑哄簱鏁伴噺',
+ left: '50%',
+ top: '0%',
+ textAlign: 'center',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '20',
+ fontWeight: 'bolder'
+ }
+ },
+ grid: {
+ left: '4%',
+ right: '4%',
+ bottom: '4%',
+ top: '15%',
+ containLabel: true
+ },
+ // legend: {
+ // show: false,
+ // itemGap: 50,
+ // data: ['娉ㄥ唽鎬婚噺', '鏈�鏂版敞鍐岄噺'],
+ // textStyle: {
+ // color: '#f9f9f9',
+ // borderColor: '#fff'
+ // }
+ // },
+ xAxis: [{
+ type: 'category',
+ boundaryGap: true,
+ axisLabel: {
+ interval: 0,
+ formatter: '{value}',
+ fontSize: 16,
+ margin: 20,
+ textStyle: {
+ color: colorX
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ data: data.map(i => i.Month)
+ }],
+ yAxis: [
+ {
+ // max: 800,
+ boundaryGap: false,
+ splitNumber: 4,
+ type: 'value',
+ axisLabel: {
+ textStyle: {
+ fontSize: 16,
+ color: colorX
+ }
+ },
+ // name: '鍗�',
+ // nameTextStyle: {
+ // color: colorY,
+ // fontSize: 14,
+ // lineHeight: 20
+ // },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: true
+ }
+ }
+ ],
+ series: [
+ {
+ name: '娉ㄥ唽鎬婚噺',
+ type: 'line',
+ // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
+ // symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
+ showAllSymbol: true,
+ symbol: 'emptyCircle',
+ symbolSize: 6,
+ lineStyle: {
+ normal: {
+ color: '#28ffb3' // 绾挎潯棰滆壊
+ },
+ borderColor: '#f0f'
+ },
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ fontSize: 16,
+ color: '#fff'
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#28ffb3'
+
+ }
+ },
+ tooltip: {
+ show: false
+ },
+ areaStyle: { // 鍖哄煙濉厖鏍峰紡
+ normal: {
+ // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(0,154,120,1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(0,0,0, 0)'
+ }
+ ], false),
+ shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
+ shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
+ }
+ },
+ data: data.map(i => i.quantity)
+ },
+ {
+ name: '鏈�鏂版敞鍐岄噺',
+ type: 'line',
+ barWidth: 20,
+ tooltip: {
+ show: false
+ },
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ fontSize: 16,
+ color: '#fff'
+ }
+ },
+ areaStyle: { // 鍖哄煙濉厖鏍峰紡
+ normal: {
+ // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(0,154,120,1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(0,0,0, 0)'
+ }
+ ], false),
+ shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
+ shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
+ }
+ },
+ // itemStyle: {
+ // normal: {
+ // // barBorderRadius: 5,
+ // // color: new echarts.graphic.LinearGradient(
+ // // 0, 0, 0, 1,
+ // // [{
+ // // offset: 0,
+ // // color: '#14c8d4'
+ // // },
+ // // {
+ // // offset: 1,
+ // // color: '#43eec6'
+ // // }
+ // // ]
+ // // )
+ // color: function(params) {
+ // var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1']
+ // return colorList[params.dataIndex]
+ // }
+ // }
+ // },
+ data: data.map(i => i.ouquantity)
+ }
+ ]
+ }
}
--
Gitblit v1.9.3