From a7ba113f05b0b32adbab8bd2c603d31d543a0699 Mon Sep 17 00:00:00 2001
From: whycq <10027870+whycq@user.noreply.gitee.com>
Date: 星期五, 15 十二月 2023 11:04:40 +0800
Subject: [PATCH] # 大屏显示-1
---
src/main/webapp/static/js/BI/js.js | 1355 ++++++++++++++++++++++++++++------------------------------
1 files changed, 662 insertions(+), 693 deletions(-)
diff --git a/src/main/webapp/static/js/BI/js.js b/src/main/webapp/static/js/BI/js.js
index 652ac3d..b3edaf7 100644
--- a/src/main/webapp/static/js/BI/js.js
+++ b/src/main/webapp/static/js/BI/js.js
@@ -1,776 +1,745 @@
-锘�
-$(function () {
-echarts_1();
-echarts_4();
-function echarts_1() {
+锘�$(function () {
+ echarts_1();
+ //echarts_4();
+
+ function echarts_1() {
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
var myChart = echarts.init(document.getElementById('echart1'));
- option = {
- // backgroundColor: '#00265f',
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- grid: {
- left: '0%',
- top:'10px',
- right: '0%',
- bottom: '4%',
- containLabel: true
- },
- xAxis: [{
- type: 'category',
- data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
- axisLine: {
- show: true,
- lineStyle: {
- color: "rgba(255,255,255,.1)",
- width: 1,
- type: "solid"
+ option = {
+ // backgroundColor: '#00265f',
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
},
- },
-
- axisTick: {
- show: false,
- },
- axisLabel: {
- interval: 0,
- // rotate:50,
- show: true,
- splitNumber: 15,
- textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize: '12',
+ grid: {
+ left: '0%',
+ top: '10px',
+ right: '0%',
+ bottom: '4%',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ width: 1,
+ type: "solid"
+ },
},
- },
- }],
- yAxis: [{
- type: 'value',
- axisLabel: {
- //formatter: '{value} %'
- show:true,
- textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize: '12',
+
+ axisTick: {
+ show: false,
},
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: "rgba(255,255,255,.1 )",
- width: 1,
- type: "solid"
- },
- },
- splitLine: {
- lineStyle: {
- color: "rgba(255,255,255,.1)",
- }
- }
- }],
- series: [
- {
- type: 'bar',
- data: [200, 300, 300, 900, 1500, 1200, 600],
- barWidth:'35%', //鏌卞瓙瀹藉害
- // barGap: 1, //鏌卞瓙涔嬮棿闂磋窛
- itemStyle: {
- normal: {
- color:'#2f89cf',
- opacity: 1,
- barBorderRadius: 5,
- }
- }
- }
-
- ]
-};
-
+ axisLabel: {
+ interval: 0,
+ // rotate:50,
+ show: true,
+ splitNumber: 15,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ }],
+ yAxis: [{
+ type: 'value',
+ axisLabel: {
+ //formatter: '{value} %'
+ show: true,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1 )",
+ width: 1,
+ type: "solid"
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ }
+ }
+ }],
+ series: [
+ {
+ type: 'bar',
+ data: [200, 300, 300, 900, 1500, 1200, 600],
+ barWidth: '35%', //鏌卞瓙瀹藉害
+ // barGap: 1, //鏌卞瓙涔嬮棿闂磋窛
+ itemStyle: {
+ normal: {
+ color: '#2f89cf',
+ opacity: 1,
+ barBorderRadius: 5,
+ }
+ }
+ }
+
+ ]
+ };
+
// 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
myChart.setOption(option);
- window.addEventListener("resize",function(){
+ window.addEventListener("resize", function () {
myChart.resize();
});
}
-function echarts_2() {
+
+ function echarts_2() {
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
var myChart = echarts.init(document.getElementById('echart2'));
- option = {
- // backgroundColor: '#00265f',
- tooltip: {
- trigger: 'axis',
- axisPointer: { type: 'shadow'}
- },
- grid: {
- left: '0%',
- top:'10px',
- right: '0%',
- bottom: '4%',
- containLabel: true
- },
- xAxis: [{
- type: 'category',
- data: ['娴欐睙', '涓婃捣', '姹熻嫃', '骞夸笢', '鍖椾含', '娣卞湷', '瀹夊窘'],
- axisLine: {
- show: true,
- lineStyle: {
- color: "rgba(255,255,255,.1)",
- width: 1,
- type: "solid"
+ option = {
+ // backgroundColor: '#00265f',
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {type: 'shadow'}
},
- },
-
- axisTick: {
- show: false,
- },
- axisLabel: {
- interval: 0,
- // rotate:50,
- show: true,
- splitNumber: 15,
- textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize: '12',
+ grid: {
+ left: '0%',
+ top: '10px',
+ right: '0%',
+ bottom: '4%',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ data: ['娴欐睙', '涓婃捣', '姹熻嫃', '骞夸笢', '鍖椾含', '娣卞湷', '瀹夊窘'],
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ width: 1,
+ type: "solid"
+ },
},
- },
- }],
- yAxis: [{
- type: 'value',
- axisLabel: {
- //formatter: '{value} %'
- show:true,
- textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize: '12',
+
+ axisTick: {
+ show: false,
},
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: "rgba(255,255,255,.1 )",
- width: 1,
- type: "solid"
- },
- },
- splitLine: {
- lineStyle: {
- color: "rgba(255,255,255,.1)",
- }
- }
- }],
- series: [
- {
-
- type: 'bar',
- data: [1500, 1200, 600, 200, 300, 300, 900],
- barWidth:'35%', //鏌卞瓙瀹藉害
- // barGap: 1, //鏌卞瓙涔嬮棿闂磋窛
- itemStyle: {
- normal: {
- color:'#27d08a',
- opacity: 1,
- barBorderRadius: 5,
- }
- }
- }
-
- ]
-};
-
+ axisLabel: {
+ interval: 0,
+ // rotate:50,
+ show: true,
+ splitNumber: 15,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ }],
+ yAxis: [{
+ type: 'value',
+ axisLabel: {
+ //formatter: '{value} %'
+ show: true,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1 )",
+ width: 1,
+ type: "solid"
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ }
+ }
+ }],
+ series: [
+ {
+
+ type: 'bar',
+ data: [1500, 1200, 600, 200, 300, 300, 900],
+ barWidth: '35%', //鏌卞瓙瀹藉害
+ // barGap: 1, //鏌卞瓙涔嬮棿闂磋窛
+ itemStyle: {
+ normal: {
+ color: '#27d08a',
+ opacity: 1,
+ barBorderRadius: 5,
+ }
+ }
+ }
+
+ ]
+ };
+
// 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
myChart.setOption(option);
- window.addEventListener("resize",function(){
+ window.addEventListener("resize", function () {
myChart.resize();
});
}
-function echarts_5() {
+
+ function echarts_5() {
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
var myChart = echarts.init(document.getElementById('echart5'));
- option = {
- // backgroundColor: '#00265f',
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
-
- grid: {
- left: '0%',
- top:'10px',
- right: '0%',
- bottom: '2%',
- containLabel: true
- },
- xAxis: [{
- type: 'category',
- data: ['娴欐睙', '涓婃捣', '姹熻嫃', '骞夸笢', '鍖椾含', '娣卞湷', '瀹夊窘', '鍥涘窛'],
- axisLine: {
- show: true,
- lineStyle: {
- color: "rgba(255,255,255,.1)",
- width: 1,
- type: "solid"
+ option = {
+ // backgroundColor: '#00265f',
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
},
- },
-
- axisTick: {
- show: false,
- },
- axisLabel: {
- interval: 0,
- // rotate:50,
- show: true,
- splitNumber: 15,
- textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize: '12',
+
+ grid: {
+ left: '0%',
+ top: '10px',
+ right: '0%',
+ bottom: '2%',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ data: ['娴欐睙', '涓婃捣', '姹熻嫃', '骞夸笢', '鍖椾含', '娣卞湷', '瀹夊窘', '鍥涘窛'],
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ width: 1,
+ type: "solid"
+ },
},
- },
- }],
- yAxis: [{
- type: 'value',
- axisLabel: {
- //formatter: '{value} %'
- show:true,
- textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize: '12',
+
+ axisTick: {
+ show: false,
},
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: "rgba(255,255,255,.1 )",
- width: 1,
- type: "solid"
- },
- },
- splitLine: {
- lineStyle: {
- color: "rgba(255,255,255,.1)",
+ axisLabel: {
+ interval: 0,
+ // rotate:50,
+ show: true,
+ splitNumber: 15,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ }],
+ yAxis: [{
+ type: 'value',
+ axisLabel: {
+ //formatter: '{value} %'
+ show: true,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1 )",
+ width: 1,
+ type: "solid"
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ }
+ }
+ }],
+ series: [{
+ type: 'bar',
+ data: [2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10],
+ barWidth: '35%', //鏌卞瓙瀹藉害
+ // barGap: 1, //鏌卞瓙涔嬮棿闂磋窛
+ itemStyle: {
+ normal: {
+ color: '#2f89cf',
+ opacity: 1,
+ barBorderRadius: 5,
+ }
+ }
}
- }
- }],
- series: [{
- type: 'bar',
- data: [2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10],
- barWidth:'35%', //鏌卞瓙瀹藉害
- // barGap: 1, //鏌卞瓙涔嬮棿闂磋窛
- itemStyle: {
- normal: {
- color:'#2f89cf',
- opacity: 1,
- barBorderRadius: 5,
- }
- }
- }
- ]
-};
-
+ ]
+ };
+
// 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
myChart.setOption(option);
- window.addEventListener("resize",function(){
+ window.addEventListener("resize", function () {
myChart.resize();
});
}
-
-function echarts_4() {
+
+ function echarts_4() {
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
var myChart = echarts.init(document.getElementById('echart4'));
- option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- lineStyle: {
- color: '#dddc6b'
- }
- }
- },
- legend: {
- top:'0%',
- data:['瀹夊崜','IOS'],
- textStyle: {
- color: 'rgba(255,255,255,.5)',
- fontSize:'12',
- }
- },
- grid: {
- left: '10',
- top: '30',
- right: '10',
- bottom: '10',
- containLabel: true
- },
-
- xAxis: [{
- type: 'category',
- boundaryGap: false,
-axisLabel: {
- textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize:12,
- },
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ lineStyle: {
+ color: '#dddc6b'
+ }
+ }
},
- axisLine: {
- lineStyle: {
- color: 'rgba(255,255,255,.2)'
- }
-
- },
-
- data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
-
- }, {
-
- axisPointer: {show: false},
- axisLine: { show: false},
- position: 'bottom',
- offset: 20,
-
-
-
- }],
-
- yAxis: [{
- type: 'value',
- axisTick: {show: false},
- axisLine: {
- lineStyle: {
- color: 'rgba(255,255,255,.1)'
- }
- },
- axisLabel: {
+ legend: {
+ top: '0%',
+ data: ['瑙勫垝閲�'],
textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize:12,
- },
+ color: 'rgba(255,255,255,.5)',
+ fontSize: '12',
+ }
+ },
+ grid: {
+ left: '10',
+ top: '30',
+ right: '10',
+ bottom: '10',
+ containLabel: true
},
- splitLine: {
- lineStyle: {
- color: 'rgba(255,255,255,.1)'
- }
- }
- }],
- series: [
- {
- name: '瀹夊崜',
- type: 'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 5,
- showSymbol: false,
- lineStyle: {
-
- normal: {
- color: '#0184d5',
- width: 2
- }
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgba(1, 132, 213, 0.4)'
- }, {
- offset: 0.8,
- color: 'rgba(1, 132, 213, 0.1)'
- }], false),
- shadowColor: 'rgba(0, 0, 0, 0.1)',
- }
- },
- itemStyle: {
- normal: {
- color: '#0184d5',
- borderColor: 'rgba(221, 220, 107, .1)',
- borderWidth: 12
- }
- },
- data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4,3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]
+ xAxis: [{
+ type: 'category',
+ boundaryGap: false,
+ axisLabel: {
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: 12,
+ },
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,.2)'
+ }
- },
-{
- name: 'IOS',
- type: 'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 5,
- showSymbol: false,
- lineStyle: {
-
- normal: {
- color: '#00d887',
- width: 2
- }
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgba(0, 216, 135, 0.4)'
- }, {
- offset: 0.8,
- color: 'rgba(0, 216, 135, 0.1)'
- }], false),
- shadowColor: 'rgba(0, 0, 0, 0.1)',
- }
- },
- itemStyle: {
- normal: {
- color: '#00d887',
- borderColor: 'rgba(221, 220, 107, .1)',
- borderWidth: 12
- }
- },
- data: [5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1, 4]
+ },
- },
-
- ]
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
-};
-
+ }, {
+
+ axisPointer: {show: false},
+ axisLine: {show: false},
+ position: 'bottom',
+ offset: 20,
+
+
+ }],
+
+ yAxis: [{
+ type: 'value',
+ axisTick: {show: false},
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,.1)'
+ }
+ },
+ axisLabel: {
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: 12,
+ },
+ },
+
+ splitLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,.1)'
+ }
+ }
+ }],
+ series: [
+ {
+ name: '瑙勫垝閲�',
+ type: 'line',
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 5,
+ showSymbol: false,
+ lineStyle: {
+
+ normal: {
+ color: '#00d887',
+ width: 2
+ }
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(0, 216, 135, 0.4)'
+ }, {
+ offset: 0.8,
+ color: 'rgba(0, 216, 135, 0.1)'
+ }], false),
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#00d887',
+ borderColor: 'rgba(221, 220, 107, .1)',
+ borderWidth: 12
+ }
+ },
+ data: [1,2,3,4,5,6,7,8,9,10,11,12]
+
+ },
+
+ ]
+
+ };
+
// 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
myChart.setOption(option);
- window.addEventListener("resize",function(){
+ window.addEventListener("resize", function () {
myChart.resize();
});
}
-function echarts_6() {
+
+ function echarts_6() {
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
var myChart = echarts.init(document.getElementById('echart6'));
var dataStyle = {
- normal: {
- label: {
- show: false
- },
- labelLine: {
- show: false
- },
- //shadowBlur: 40,
- //shadowColor: 'rgba(40, 40, 40, 1)',
- }
-};
-var placeHolderStyle = {
- normal: {
- color: 'rgba(255,255,255,.05)',
- label: {show: false,},
- labelLine: {show: false}
- },
- emphasis: {
- color: 'rgba(0,0,0,0)'
- }
-};
-option = {
- color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
- tooltip: {
- show: true,
- formatter: "{a} : {c} "
- },
- legend: {
- itemWidth: 10,
- itemHeight: 10,
- itemGap: 12,
- bottom: '3%',
-
- data: ['娴欐睙', '涓婃捣', '骞夸笢', '鍖椾含', '娣卞湷'],
- textStyle: {
+ normal: {
+ label: {
+ show: false
+ },
+ labelLine: {
+ show: false
+ },
+ //shadowBlur: 40,
+ //shadowColor: 'rgba(40, 40, 40, 1)',
+ }
+ };
+ var placeHolderStyle = {
+ normal: {
+ color: 'rgba(255,255,255,.05)',
+ label: {show: false,},
+ labelLine: {show: false}
+ },
+ emphasis: {
+ color: 'rgba(0,0,0,0)'
+ }
+ };
+ option = {
+ color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
+ tooltip: {
+ show: true,
+ formatter: "{a} : {c} "
+ },
+ legend: {
+ itemWidth: 10,
+ itemHeight: 10,
+ itemGap: 12,
+ bottom: '3%',
+
+ data: ['娴欐睙', '涓婃捣', '骞夸笢', '鍖椾含', '娣卞湷'],
+ textStyle: {
color: 'rgba(255,255,255,.6)',
}
- },
-
- series: [
- {
- name: '娴欐睙',
- type: 'pie',
- clockWise: false,
- center: ['50%', '42%'],
- radius: ['59%', '70%'],
- itemStyle: dataStyle,
- hoverAnimation: false,
- data: [{
- value: 80,
- name: '01'
- }, {
- value: 20,
- name: 'invisible',
- tooltip: {show: false},
- itemStyle: placeHolderStyle
- }]
- },
- {
- name: '涓婃捣',
- type: 'pie',
- clockWise: false,
- center: ['50%', '42%'],
- radius: ['49%', '60%'],
- itemStyle: dataStyle,
- hoverAnimation: false,
- data: [{
- value: 70,
- name: '02'
- }, {
- value: 30,
- name: 'invisible',
- tooltip: {show: false},
- itemStyle: placeHolderStyle
- }]
- },
- {
- name: '骞夸笢',
- type: 'pie',
- clockWise: false,
- hoverAnimation: false,
- center: ['50%', '42%'],
- radius: ['39%', '50%'],
- itemStyle: dataStyle,
- data: [{
- value: 65,
- name: '03'
- }, {
- value: 35,
- name: 'invisible',
- tooltip: {show: false},
- itemStyle: placeHolderStyle
- }]
- },
- {
- name: '鍖椾含',
- type: 'pie',
- clockWise: false,
- hoverAnimation: false,
- center: ['50%', '42%'],
- radius: ['29%', '40%'],
- itemStyle: dataStyle,
- data: [{
- value: 60,
- name: '04'
- }, {
- value: 40,
- name: 'invisible',
- tooltip: {show: false},
- itemStyle: placeHolderStyle
- }]
- },
- {
- name: '娣卞湷',
- type: 'pie',
- clockWise: false,
- hoverAnimation: false,
- center: ['50%', '42%'],
- radius: ['20%', '30%'],
- itemStyle: dataStyle,
- data: [{
- value: 50,
- name: '05'
- }, {
- value: 50,
- name: 'invisible',
- tooltip: {show: false},
- itemStyle: placeHolderStyle
- }]
- }, ]
-};
-
- // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
- myChart.setOption(option);
- window.addEventListener("resize",function(){
- myChart.resize();
- });
- }
-function echarts_31() {
- // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
- var myChart = echarts.init(document.getElementById('fb1'));
-option = {
-
- title: [{
- text: '骞撮緞鍒嗗竷',
- left: 'center',
- textStyle: {
- color: '#fff',
- fontSize:'16'
- }
+ },
- }],
- tooltip: {
- trigger: 'item',
- formatter: "{a} <br/>{b}: {c} ({d}%)",
-position:function(p){ //鍏朵腑p涓哄綋鍓嶉紶鏍囩殑浣嶇疆
- return [p[0] + 10, p[1] - 10];
- }
- },
- legend: {
-
-top:'70%',
- itemWidth: 10,
- itemHeight: 10,
- data:['0宀佷互涓�','20-29宀�','30-39宀�','40-49宀�','50宀佷互涓�'],
- textStyle: {
- color: 'rgba(255,255,255,.5)',
- fontSize:'12',
- }
- },
- series: [
- {
- name:'骞撮緞鍒嗗竷',
- type:'pie',
- center: ['50%', '42%'],
- radius: ['40%', '60%'],
- color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
- label: {show:false},
- labelLine: {show:false},
- data:[
- {value:1, name:'0宀佷互涓�'},
- {value:4, name:'20-29宀�'},
- {value:2, name:'30-39宀�'},
- {value:2, name:'40-49宀�'},
- {value:1, name:'50宀佷互涓�'},
- ]
- }
- ]
-};
-
+ series: [
+ {
+ name: '娴欐睙',
+ type: 'pie',
+ clockWise: false,
+ center: ['50%', '42%'],
+ radius: ['59%', '70%'],
+ itemStyle: dataStyle,
+ hoverAnimation: false,
+ data: [{
+ value: 80,
+ name: '01'
+ }, {
+ value: 20,
+ name: 'invisible',
+ tooltip: {show: false},
+ itemStyle: placeHolderStyle
+ }]
+ },
+ {
+ name: '涓婃捣',
+ type: 'pie',
+ clockWise: false,
+ center: ['50%', '42%'],
+ radius: ['49%', '60%'],
+ itemStyle: dataStyle,
+ hoverAnimation: false,
+ data: [{
+ value: 70,
+ name: '02'
+ }, {
+ value: 30,
+ name: 'invisible',
+ tooltip: {show: false},
+ itemStyle: placeHolderStyle
+ }]
+ },
+ {
+ name: '骞夸笢',
+ type: 'pie',
+ clockWise: false,
+ hoverAnimation: false,
+ center: ['50%', '42%'],
+ radius: ['39%', '50%'],
+ itemStyle: dataStyle,
+ data: [{
+ value: 65,
+ name: '03'
+ }, {
+ value: 35,
+ name: 'invisible',
+ tooltip: {show: false},
+ itemStyle: placeHolderStyle
+ }]
+ },
+ {
+ name: '鍖椾含',
+ type: 'pie',
+ clockWise: false,
+ hoverAnimation: false,
+ center: ['50%', '42%'],
+ radius: ['29%', '40%'],
+ itemStyle: dataStyle,
+ data: [{
+ value: 60,
+ name: '04'
+ }, {
+ value: 40,
+ name: 'invisible',
+ tooltip: {show: false},
+ itemStyle: placeHolderStyle
+ }]
+ },
+ {
+ name: '娣卞湷',
+ type: 'pie',
+ clockWise: false,
+ hoverAnimation: false,
+ center: ['50%', '42%'],
+ radius: ['20%', '30%'],
+ itemStyle: dataStyle,
+ data: [{
+ value: 50,
+ name: '05'
+ }, {
+ value: 50,
+ name: 'invisible',
+ tooltip: {show: false},
+ itemStyle: placeHolderStyle
+ }]
+ },]
+ };
+
// 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
myChart.setOption(option);
- window.addEventListener("resize",function(){
+ window.addEventListener("resize", function () {
myChart.resize();
});
}
-function echarts_32() {
+
+ function echarts_31() {
+ // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
+ var myChart = echarts.init(document.getElementById('fb1'));
+ option = {
+
+ title: [{
+ text: '骞撮緞鍒嗗竷',
+ left: 'center',
+ textStyle: {
+ color: '#fff',
+ fontSize: '16'
+ }
+
+ }],
+ tooltip: {
+ trigger: 'item',
+ formatter: "{a} <br/>{b}: {c} ({d}%)",
+ position: function (p) { //鍏朵腑p涓哄綋鍓嶉紶鏍囩殑浣嶇疆
+ return [p[0] + 10, p[1] - 10];
+ }
+ },
+ legend: {
+
+ top: '70%',
+ itemWidth: 10,
+ itemHeight: 10,
+ data: ['0宀佷互涓�', '20-29宀�', '30-39宀�', '40-49宀�', '50宀佷互涓�'],
+ textStyle: {
+ color: 'rgba(255,255,255,.5)',
+ fontSize: '12',
+ }
+ },
+ series: [
+ {
+ name: '骞撮緞鍒嗗竷',
+ type: 'pie',
+ center: ['50%', '42%'],
+ radius: ['40%', '60%'],
+ color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
+ label: {show: false},
+ labelLine: {show: false},
+ data: [
+ {value: 1, name: '0宀佷互涓�'},
+ {value: 4, name: '20-29宀�'},
+ {value: 2, name: '30-39宀�'},
+ {value: 2, name: '40-49宀�'},
+ {value: 1, name: '50宀佷互涓�'},
+ ]
+ }
+ ]
+ };
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ myChart.setOption(option);
+ window.addEventListener("resize", function () {
+ myChart.resize();
+ });
+ }
+
+ function echarts_32() {
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
var myChart = echarts.init(document.getElementById('fb2'));
-option = {
-
- title: [{
- text: '鑱屼笟鍒嗗竷',
- left: 'center',
- textStyle: {
- color: '#fff',
- fontSize:'16'
- }
+ option = {
- }],
- tooltip: {
- trigger: 'item',
- formatter: "{a} <br/>{b}: {c} ({d}%)",
-position:function(p){ //鍏朵腑p涓哄綋鍓嶉紶鏍囩殑浣嶇疆
- return [p[0] + 10, p[1] - 10];
- }
- },
- legend: {
-
- top:'70%',
- itemWidth: 10,
- itemHeight: 10,
- data:['鐢靛瓙鍟嗗姟','鏁欒偛','IT/浜掕仈缃�','閲戣瀺','瀛︾敓','鍏朵粬'],
+ title: [{
+ text: '鑱屼笟鍒嗗竷',
+ left: 'center',
textStyle: {
- color: 'rgba(255,255,255,.5)',
- fontSize:'12',
- }
- },
- series: [
- {
- name:'骞撮緞鍒嗗竷',
- type:'pie',
- center: ['50%', '42%'],
- radius: ['40%', '60%'],
- color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
- label: {show:false},
- labelLine: {show:false},
- data:[
- {value:5, name:'鐢靛瓙鍟嗗姟'},
- {value:1, name:'鏁欒偛'},
- {value:6, name:'IT/浜掕仈缃�'},
- {value:2, name:'閲戣瀺'},
- {value:1, name:'瀛︾敓'},
- {value:1, name:'鍏朵粬'},
+ color: '#fff',
+ fontSize: '16'
+ }
+
+ }],
+ tooltip: {
+ trigger: 'item',
+ formatter: "{a} <br/>{b}: {c} ({d}%)",
+ position: function (p) { //鍏朵腑p涓哄綋鍓嶉紶鏍囩殑浣嶇疆
+ return [p[0] + 10, p[1] - 10];
+ }
+ },
+ legend: {
+
+ top: '70%',
+ itemWidth: 10,
+ itemHeight: 10,
+ data: ['鐢靛瓙鍟嗗姟', '鏁欒偛', 'IT/浜掕仈缃�', '閲戣瀺', '瀛︾敓', '鍏朵粬'],
+ textStyle: {
+ color: 'rgba(255,255,255,.5)',
+ fontSize: '12',
+ }
+ },
+ series: [
+ {
+ name: '骞撮緞鍒嗗竷',
+ type: 'pie',
+ center: ['50%', '42%'],
+ radius: ['40%', '60%'],
+ color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
+ label: {show: false},
+ labelLine: {show: false},
+ data: [
+ {value: 5, name: '鐢靛瓙鍟嗗姟'},
+ {value: 1, name: '鏁欒偛'},
+ {value: 6, name: 'IT/浜掕仈缃�'},
+ {value: 2, name: '閲戣瀺'},
+ {value: 1, name: '瀛︾敓'},
+ {value: 1, name: '鍏朵粬'},
+ ]
+ }
]
- }
- ]
-};
-
+ };
+
// 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
myChart.setOption(option);
- window.addEventListener("resize",function(){
+ window.addEventListener("resize", function () {
myChart.resize();
});
}
-function echarts_33() {
+
+ function echarts_33() {
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
var myChart = echarts.init(document.getElementById('fb3'));
-option = {
- title: [{
- text: '鍏磋叮鍒嗗竷',
- left: 'center',
- textStyle: {
- color: '#fff',
- fontSize:'16'
- }
-
- }],
- tooltip: {
- trigger: 'item',
- formatter: "{a} <br/>{b}: {c} ({d}%)",
-position:function(p){ //鍏朵腑p涓哄綋鍓嶉紶鏍囩殑浣嶇疆
- return [p[0] + 10, p[1] - 10];
- }
- },
- legend: {
- top:'70%',
- itemWidth: 10,
- itemHeight: 10,
- data:['姹借溅','鏃呮父','璐㈢粡','鏁欒偛','杞欢','鍏朵粬'],
+ option = {
+ title: [{
+ text: '鍏磋叮鍒嗗竷',
+ left: 'center',
textStyle: {
- color: 'rgba(255,255,255,.5)',
- fontSize:'12',
- }
- },
- series: [
- {
- name:'鍏磋叮鍒嗗竷',
- type:'pie',
- center: ['50%', '42%'],
- radius: ['40%', '60%'],
- color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
- label: {show:false},
- labelLine: {show:false},
- data:[
- {value:2, name:'姹借溅'},
- {value:3, name:'鏃呮父'},
- {value:1, name:'璐㈢粡'},
- {value:4, name:'鏁欒偛'},
- {value:8, name:'杞欢'},
- {value:1, name:'鍏朵粬'},
+ color: '#fff',
+ fontSize: '16'
+ }
+
+ }],
+ tooltip: {
+ trigger: 'item',
+ formatter: "{a} <br/>{b}: {c} ({d}%)",
+ position: function (p) { //鍏朵腑p涓哄綋鍓嶉紶鏍囩殑浣嶇疆
+ return [p[0] + 10, p[1] - 10];
+ }
+ },
+ legend: {
+ top: '70%',
+ itemWidth: 10,
+ itemHeight: 10,
+ data: ['姹借溅', '鏃呮父', '璐㈢粡', '鏁欒偛', '杞欢', '鍏朵粬'],
+ textStyle: {
+ color: 'rgba(255,255,255,.5)',
+ fontSize: '12',
+ }
+ },
+ series: [
+ {
+ name: '鍏磋叮鍒嗗竷',
+ type: 'pie',
+ center: ['50%', '42%'],
+ radius: ['40%', '60%'],
+ color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
+ label: {show: false},
+ labelLine: {show: false},
+ data: [
+ {value: 2, name: '姹借溅'},
+ {value: 3, name: '鏃呮父'},
+ {value: 1, name: '璐㈢粡'},
+ {value: 4, name: '鏁欒偛'},
+ {value: 8, name: '杞欢'},
+ {value: 1, name: '鍏朵粬'},
+ ]
+ }
]
- }
- ]
-};
-
+ };
+
// 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
myChart.setOption(option);
- window.addEventListener("resize",function(){
+ window.addEventListener("resize", function () {
myChart.resize();
});
}
-
-
+
+
})
--
Gitblit v1.9.1