@@ -536,4 +546,151 @@ onMounted(() => {
background: linear-gradient(to right, #455CCC, #51C2E0);
transition: width 0.5s ease-in-out;
}
+
+.bubble {
+ width: 5px;
+ height: 5px;
+ background-color: white;
+ position: absolute;
+ border-radius: 50%;
+ top: 7vh;
+ animation-name: bubbleAnimation;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+}
+
+.bubble1 {
+ width: 5px;
+ height: 5px;
+ background-color: white;
+ position: absolute;
+ border-radius: 50%;
+ top: 7vh;
+ left: 6.5vw;
+ animation-name: bubbleAnimation;
+ animation-duration: 1.5s;
+ animation-iteration-count: infinite;
+}
+
+.bubble2 {
+ width: 5px;
+ height: 5px;
+ background-color: white;
+ position: absolute;
+ border-radius: 50%;
+ top: 7vh;
+ left: 8.5vw;
+ animation-name: bubbleAnimation;
+ animation-duration: 1.25s;
+ animation-iteration-count: infinite;
+}
+
+
+@keyframes bubbleAnimation {
+ 0% {
+ top: 7vh;
+ // opacity: 0;
+ transform: scale(0);
+ }
+
+ 25% {
+ top: 6.5vh;
+ opacity: 1;
+ transform: scale(0.55);
+
+
+ }
+
+ 50% {
+ top: 6vh;
+ opacity: 1;
+ transform: scale(0.5);
+
+ // left: 5vw;
+ }
+
+ 75% {
+ transform: scale(1);
+ top: 5vh;
+ opacity: 1;
+ }
+
+ 100% {
+
+ top: 4vh;
+ opacity: 0;
+ }
+}
+
+@keyframes bubbleAnimation1 {
+ 0% {
+ top: 7vh;
+ // opacity: 0;
+ transform: scale(0);
+ }
+
+ 25% {
+ top: 6.5vh;
+ opacity: 1;
+ transform: scale(0.55);
+
+
+ }
+
+ 50% {
+ top: 6vh;
+ opacity: 1;
+ transform: scale(0.5);
+
+ // left: 5vw;
+ }
+
+ 75% {
+ transform: scale(1);
+ top: 5vh;
+ opacity: 1;
+ }
+
+ 100% {
+
+ top: 4vh;
+ opacity: 0;
+ }
+}
+
+@keyframes bubbleAnimation2 {
+ 0% {
+ top: 7vh;
+ // opacity: 0;
+ transform: scale(0);
+ }
+
+ 25% {
+ top: 6.5vh;
+ opacity: 1;
+ transform: scale(0.55);
+
+
+ }
+
+ 50% {
+ top: 6vh;
+ opacity: 1;
+ transform: scale(0.5);
+
+ // left: 5vw;
+ }
+
+ 75% {
+ transform: scale(1);
+ top: 5vh;
+ opacity: 1;
+ }
+
+ 100% {
+
+ top: 4vh;
+ opacity: 0;
+ }
+}
\ No newline at end of file
diff --git a/src/view/option.js b/src/view/option.js
index c6d87b8..c97c261 100644
--- a/src/view/option.js
+++ b/src/view/option.js
@@ -1,582 +1,652 @@
import * as echarts from 'echarts';
let angle = 0;//角度，用来做简单的动画效果的
- let value = 78; //图上角度数据
- let result = [
- { name: '制造业', value: 5713,itemStyle: {color: '#FF7734'}},
- { name: '信息传输、软件和信息技术服务业', value: 3022 ,itemStyle: {color: '#FFC700'}},
- { name: '科学研究和技术服务业', value: 2647 ,itemStyle: {color: '#34FFE7'}},
- { name: '金融业', value: 2291 },
- { name: '批发和零售业', value: 1946 },
- { name: '交通运输、仓储和邮政业', value: 1812 },
- { name: '教育', value: 1756 },
- { name: '建筑业', value: 1712 },
- { name: '房地产业', value: 1666 },
- { name: '水利、环境和公共设施管理业', value: 1621 }
+let value = 78; //图上角度数据
+let result = [
+ { name: '制造业', value: 5713, itemStyle: { color: '#FF7734' } },
+ { name: '信息传输、软件和信息技术服务业', value: 3022, itemStyle: { color: '#FFC700' } },
+ { name: '科学研究和技术服务业', value: 2647, itemStyle: { color: '#34FFE7' } },
+ { name: '金融业', value: 2291 },
+ { name: '批发和零售业', value: 1946 },
+ { name: '交通运输、仓储和邮政业', value: 1812 },
+ { name: '教育', value: 1756 },
+ { name: '建筑业', value: 1712 },
+ { name: '房地产业', value: 1666 },
+ { name: '水利、环境和公共设施管理业', value: 1621 }
]
-const optins={
+const optins = {
- /******首页***********/
- // 用户图表
- userChartOption : {
- color:[
- new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- { offset: 1, color: 'transparent' },
- { offset: 0, color: '#0081C3' },
- ])
- , new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- { offset: 1, color: 'transparent' },
- { offset: 0, color: '#3E54BF' },
- ]) , new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- { offset: 1, color: 'transparent' },
- { offset: 0, color: '#4DBFD9' },
- ]) ,
- ],
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- // color: transparent;
-
- legend: {},
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [
- {
- type: 'category',
- data: ['11.01', '11-02', '11-03', '11-04', '11-05',]
- }
- ],
- yAxis: [
- {
- type: 'value',
- splitLine:{
- show:true,
- lineStyle:{
- type:'dashed',//背景色为虚线,
- color:'#256980'
- }
- }
-
- },
-
- ],
- series: [
- {
- name: '新增用户数量',
- type: 'bar',
- emphasis: {
- focus: 'series'
- },
- data: [320, 332, 301, 334, 390, 330, 320],
- itemStyle: {
- borderWidth: 1,
- borderColor: "#384FB4",
- },
-
- backgroundStyle: {
- color: ['red']
- }
- },
- {
- name: '访问用户数量',
- type: 'bar',
- emphasis: {
- focus: 'series'
- },
- data: [120, 132, 101, 134, 90, 230, 210],
- itemStyle: {
- borderWidth: 1,
- borderColor: "#3E54BF",
- },
- },
- {
- name: '累计用户数量',
- type: 'bar',
- emphasis: {
- focus: 'series'
- },
- data: [220, 182, 191, 234, 290, 330, 310],
- itemStyle: {
- borderWidth: 1,
- borderColor: "#4EC1DB",
- },
- },
-
- ]
+ /******首页***********/
+ // 用户图表
+ userChartOption: {
+ color: [
+ new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+ { offset: 1, color: 'transparent' },
+ { offset: 0, color: '#0081C3' },
+ ])
+ , new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+ { offset: 1, color: 'transparent' },
+ { offset: 0, color: '#3E54BF' },
+ ]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+ { offset: 1, color: 'transparent' },
+ { offset: 0, color: '#4DBFD9' },
+ ]),
+ ],
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ },
},
- // 地方店铺数量统计
- storeNum:{
- backgroundColor:"#061740",
- title: {
- text: '{a|'+ 70 +'}{c|%}',
- x: 'center',
- y: 'center',
- textStyle: {
- rich:{
- a: {
- fontSize: 10,
- color: '#ffffff',
- fontWeight: 'bold'
- },
- c: {
- fontSize: 10,
- color: '#ffffff',
- fontWeight: 'normal'
- }
- }
- }
- },
- series: [
- //内环
- {
- name: "",
- type: 'custom',
- coordinateSystem: "none",
- renderItem: function(params, api) {
- return {
- type: 'arc',
- shape: {
- cx: api.getWidth() / 2,
- cy: api.getHeight() / 2,
- r: Math.min(api.getWidth(), api.getHeight()) / 2.3 * 0.65,
- startAngle: (0+-angle) * Math.PI / 180,
- endAngle: (360+-angle) * Math.PI / 180
- },
- style: {
- stroke: "#0CD3DB",
- fill: "transparent",
- lineWidth: 0.5
- },
- silent: true
- };
- },
- data: [0]
- },
- //外环
- {
- name: '',
- type: 'pie',
- radius: ['85%', '70%'],
- silent: true,
- clockwise: true,
- startAngle: 90,
- z: 0,
- zlevel: 0,
- label: {
- normal: {
- position: "center",
- }
- },
- data: [
- {
- value: 60,
- name: "",
- itemStyle: {
- normal: {
- //外环发光
- borderWidth: 0.5,
- shadowBlur: 20,
- borderColor: '#4bf3f9',
- shadowColor: '#9bfeff',
- color: { // 圆环的颜色
- colorStops: [{
- offset: 0,
- color: '#4bf3f9', // 0% 处的颜色
- }, {
- offset: 1,
- color: '#4bf3f9', // 100% 处的颜色
- }]
- },
- }
- }
- },
- {
- value: 100-70,
- name: "",
- label: {
- normal: {
- show: false
- }
- },
- itemStyle: {
- normal: {
- color: "#173164"
- }
- }
- }
- ]
- },
- ]
+ // color: transparent;
+
+ legend: {
+ textStyle: {
+ color: "white"
+ }
+
+
},
- // 成交用户统计信息表
-
- transactionUsers : {
- color: ['#015989', '#583936', '#416979'],
- title: {
- text: ''
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- label: {
- backgroundColor: '#6a7985'
- }
- }
- },
- legend: {
- data: ['访客人数', '下单人数', '支付人数', 'Line 4', 'Line 5']
- // data: ['访客人数','下单人数','支付人数']
-
- },
- // toolbox: {
- // feature: {
- // saveAsImage: {}
- // }
- // },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
- }
- ],
- yAxis: [
- {
- type: 'value',
- splitLine:{
- show:true,
- lineStyle:{
- type:'dashed',//背景色为虚线,
- color:'#256980'
- }
- }
- }
- ],
- series: [
- {
- name: '访客人数',
- type: 'line',
- stack: 'Total',
- smooth: true,
- lineStyle: {
- width: 0
- },
- showSymbol: false,
- areaStyle: {
- opacity: 0.8,
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#18394A'
- },
- {
- offset: 1,
- color: '#2885A4'
- }
- ])
- },
- emphasis: {
- focus: 'series'
- },
- data: [140, 232, 101, 264, 90, 340, 250]
- },
- {
- name: '下单人数',
- type: 'line',
- stack: 'Total',
- smooth: true,
- lineStyle: {
- width: 0
- },
- showSymbol: false,
- areaStyle: {
- opacity: 0.8,
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#004367'
- },
- {
- offset: 1,
- color: '#005886'
- }
- ])
- },
- emphasis: {
- focus: 'series'
- },
- data: [120, 282, 111, 234, 220, 340, 310]
- },
- {
- name: '支付人数',
- type: 'line',
- stack: 'Total',
- smooth: true,
- lineStyle: {
- width: 0
- },
- showSymbol: false,
- areaStyle: {
- opacity: 0.8,
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#5A3A37'
- },
- {
- offset: 1,
- color: '#355969'
- }
- ])
- },
- emphasis: {
- focus: 'series'
- },
- data: [320, 132, 201, 334, 190, 130, 220]
- },
-
-
- ]
- },
-
- /*******townDetail**********/
- // 订单金额
- orderAmount:{
- color:[
- new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- { offset: 1, color: '#57D3ED' },
- { offset: 0, color: 'transparent' },
- ])
- , new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- { offset: 1, color: '#4156C2' },
- { offset: 0, color: 'transparent' },
- ])
- ],
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- // color: transparent;
-
- legend: {},
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [
- {
- type: 'category',
- data: ['0-4时', '4-8时', '8-12时', '12-16时', '16-20时','20-0时']
- }
- ],
- yAxis: [
- {
- type: 'value',
- splitLine:{
- show:true,
- lineStyle:{
- type:'dashed',//背景色为虚线,
- color:'#256980'
- }
- }
-
- },
-
- ],
- series: [
- {
- name: '昨日订单额',
- type: 'bar',
- emphasis: {
- focus: 'series'
- },
- data: [320, 332, 301, 334, 390, 330, 322,222],
- // itemStyle: {
- // borderWidth: 1,
- // borderColor: "#384FB4",
- // },
-
- backgroundStyle: {
- color: ['red']
- }
- },
- {
- name: '今日订单额',
- type: 'bar',
- emphasis: {
- focus: 'series'
- },
- data: [120, 132, 101, 134, 90, 230, 210,366],
-
- },
-
-
- ]
-
-
-
-
-
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
},
- // 成交用户数据
- transactionUsersTown : {
- color: ['#015989', '#583936', '#416979'],
- title: {
- text: ''
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- label: {
- backgroundColor: '#6a7985'
+ xAxis: [
+ {
+ type: 'category',
+ data: ['11.01', '11-02', '11-03', '11-04', '11-05',]
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',//背景色为虚线,
+ color: '#256980'
}
}
+
},
- legend: {
- data: ['访客人数', '下单人数', '支付人数', ]
+
+ ],
+ series: [
+ {
+ name: '新增用户数量',
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ data: [320, 332, 301, 334, 390, 330, 320],
+ itemStyle: {
+ borderWidth: 1,
+ borderColor: "#384FB4",
+ },
+
+ backgroundStyle: {
+ color: ['red']
+ }
+ },
+ {
+ name: '访问用户数量',
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ data: [120, 132, 101, 134, 90, 230, 210],
+ itemStyle: {
+ borderWidth: 1,
+ borderColor: "#3E54BF",
+ },
+ },
+ {
+ name: '累计用户数量',
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ data: [220, 182, 191, 234, 290, 330, 310],
+ itemStyle: {
+ borderWidth: 1,
+ borderColor: "#4EC1DB",
+ },
+ },
+
+ ]
+ },
+ // 地方店铺数量统计
+ storeNum: {
+ backgroundColor: "#061740",
+ title: {
+ text: '{a|' + 70 + '}{c|%}',
+ x: 'center',
+ y: 'center',
+ textStyle: {
+ rich: {
+ a: {
+ fontSize: 10,
+ color: '#ffffff',
+ fontWeight: 'bold'
+ },
+ c: {
+ fontSize: 10,
+ color: '#ffffff',
+ fontWeight: 'normal'
+ }
+ }
+ }
+ },
+ series: [
+ //内环
+ {
+ name: "",
+ type: 'custom',
+ coordinateSystem: "none",
+ renderItem: function (params, api) {
+ return {
+ type: 'arc',
+ shape: {
+ cx: api.getWidth() / 2,
+ cy: api.getHeight() / 2,
+ r: Math.min(api.getWidth(), api.getHeight()) / 2.3 * 0.65,
+ startAngle: (0 + -angle) * Math.PI / 180,
+ endAngle: (360 + -angle) * Math.PI / 180
+ },
+ style: {
+ stroke: "#0CD3DB",
+ fill: "transparent",
+ lineWidth: 0.5
+ },
+ silent: true
+ };
+ },
+ data: [0]
+ },
+ //外环
+ {
+ name: '',
+ type: 'pie',
+ radius: ['85%', '70%'],
+ silent: true,
+ clockwise: true,
+ startAngle: 90,
+ z: 0,
+ zlevel: 0,
+ label: {
+ normal: {
+ position: "center",
+ }
+ },
+ data: [
+ {
+ value: 60,
+ name: "",
+ itemStyle: {
+ normal: {
+ //外环发光
+ borderWidth: 0.5,
+ shadowBlur: 20,
+ borderColor: '#4bf3f9',
+ shadowColor: '#9bfeff',
+ color: { // 圆环的颜色
+ colorStops: [{
+ offset: 0,
+ color: '#4bf3f9', // 0% 处的颜色
+ }, {
+ offset: 1,
+ color: '#4bf3f9', // 100% 处的颜色
+ }]
+ },
+ }
+ }
+ },
+ {
+ value: 100 - 70,
+ name: "",
+ label: {
+ normal: {
+ show: false
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: "#173164"
+ }
+ }
+ }
+ ]
+ },
+ ]
+ },
+ // 成交用户统计信息表
+
+ transactionUsers: {
+ color: ['#015989', '#583936', '#416979'],
+ title: {
+ text: ''
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985'
+ }
+ }
+ },
+ legend: {
+ data: ['访客人数', '下单人数', '支付人数'],
+ textStyle: {
+ color: "white"
+ }
// data: ['访客人数','下单人数','支付人数']
- },
- // toolbox: {
- // feature: {
- // saveAsImage: {}
- // }
- // },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
- }
- ],
- yAxis: [
- {
- type: 'value',
- splitLine:{
- show:true,
- lineStyle:{
- type:'dashed',//背景色为虚线,
- color:'#256980'
- }
- }
- }
- ],
- series: [
- {
- name: '访客人数',
- type: 'line',
- stack: 'Total',
- smooth: true,
- lineStyle: {
- width: 0
- },
- showSymbol: false,
- areaStyle: {
- opacity: 0.8,
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#18394A'
- },
- {
- offset: 1,
- color: '#2885A4'
- }
- ])
- },
- emphasis: {
- focus: 'series'
- },
- data: [140, 232, 101, 264, 90, 340, 250]
- },
- {
- name: '下单人数',
- type: 'line',
- stack: 'Total',
- smooth: true,
- lineStyle: {
- width: 0
- },
- showSymbol: false,
- areaStyle: {
- opacity: 0.8,
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#2752A6'
- },
- {
- offset: 1,
- color: '#005886'
- }
- ])
- },
- emphasis: {
- focus: 'series'
- },
- data: [120, 282, 111, 234, 220, 340, 310]
- },
- {
- name: '支付人数',
- type: 'line',
- stack: 'Total',
- smooth: true,
- lineStyle: {
- width: 0
- },
- showSymbol: false,
- areaStyle: {
- opacity: 0.8,
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: '#005685'
- },
- {
- offset: 1,
- color: '#355969'
- }
- ])
- },
- emphasis: {
- focus: 'series'
- },
- data: [320, 132, 201, 334, 190, 130, 220]
- },
-
-
- ]
},
+ // toolbox: {
+ // feature: {
+ // saveAsImage: {}
+ // }
+ // },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',//背景色为虚线,
+ color: '#256980'
+ }
+ }
+ }
+ ],
+ series: [
+ {
+ name: '访客人数',
+ type: 'line',
+ stack: 'Total',
+ smooth: true,
+ lineStyle: {
+ width: 0
+ },
+ showSymbol: false,
+ areaStyle: {
+ opacity: 0.8,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: '#18394A'
+ },
+ {
+ offset: 1,
+ color: '#2885A4'
+ }
+ ])
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [140, 232, 101, 264, 90, 340, 250]
+ },
+ {
+ name: '下单人数',
+ type: 'line',
+ stack: 'Total',
+ smooth: true,
+ lineStyle: {
+ width: 0
+ },
+ showSymbol: false,
+ areaStyle: {
+ opacity: 0.8,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: '#004367'
+ },
+ {
+ offset: 1,
+ color: '#005886'
+ }
+ ])
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [120, 282, 111, 234, 220, 340, 310]
+ },
+ {
+ name: '支付人数',
+ type: 'line',
+ stack: 'Total',
+ smooth: true,
+ lineStyle: {
+ width: 0
+ },
+ showSymbol: false,
+ areaStyle: {
+ opacity: 0.8,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: '#5A3A37'
+ },
+ {
+ offset: 1,
+ color: '#355969'
+ }
+ ])
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [320, 132, 201, 334, 190, 130, 220]
+ },
+
+
+ ]
+ },
+
+ /*******townDetail**********/
+ // 订单金额
+ orderAmount: {
+ color: [
+ new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+ { offset: 1, color: '#57D3ED' },
+ { offset: 0, color: 'transparent' },
+ ])
+ , new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+ { offset: 1, color: '#4156C2' },
+ { offset: 0, color: 'transparent' },
+ ])
+ ],
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ // color: transparent;
+
+ legend: {},
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: ['0-4时', '4-8时', '8-12时', '12-16时', '16-20时', '20-0时']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',//背景色为虚线,
+ color: '#256980'
+ }
+ }
+
+ },
+
+ ],
+ series: [
+ {
+ name: '昨日订单额',
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ data: [320, 332, 301, 334, 390, 330, 322, 222],
+ // itemStyle: {
+ // borderWidth: 1,
+ // borderColor: "#384FB4",
+ // },
+
+ backgroundStyle: {
+ color: ['red']
+ }
+ },
+ {
+ name: '今日订单额',
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ data: [120, 132, 101, 134, 90, 230, 210, 366],
+
+ },
+
+
+ ]
+
+
+
+
+
+ },
+ // 成交用户数据
+ transactionUsersTown: {
+ color: ['#015989', '#583936', '#416979'],
+ title: {
+ text: ''
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985'
+ }
+ }
+ },
+ legend: {
+ data: ['访客人数', '下单人数', '支付人数',]
+ // data: ['访客人数','下单人数','支付人数']
+
+ },
+ // toolbox: {
+ // feature: {
+ // saveAsImage: {}
+ // }
+ // },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',//背景色为虚线,
+ color: '#256980'
+ }
+ }
+ }
+ ],
+ series: [
+ {
+ name: '访客人数',
+ type: 'line',
+ stack: 'Total',
+ smooth: true,
+ lineStyle: {
+ width: 0
+ },
+ showSymbol: false,
+ areaStyle: {
+ opacity: 0.8,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: '#18394A'
+ },
+ {
+ offset: 1,
+ color: '#2885A4'
+ }
+ ])
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [140, 232, 101, 264, 90, 340, 250]
+ },
+ {
+ name: '下单人数',
+ type: 'line',
+ stack: 'Total',
+ smooth: true,
+ lineStyle: {
+ width: 0
+ },
+ showSymbol: false,
+ areaStyle: {
+ opacity: 0.8,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: '#2752A6'
+ },
+ {
+ offset: 1,
+ color: '#005886'
+ }
+ ])
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [120, 282, 111, 234, 220, 340, 310]
+ },
+ {
+ name: '支付人数',
+ type: 'line',
+ stack: 'Total',
+ smooth: true,
+ lineStyle: {
+ width: 0
+ },
+ showSymbol: false,
+ areaStyle: {
+ opacity: 0.8,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: '#005685'
+ },
+ {
+ offset: 1,
+ color: '#355969'
+ }
+ ])
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ data: [320, 132, 201, 334, 190, 130, 220]
+ },
+
+
+ ]
+ },
+ // 订单数据
+ orderData: {
+
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {},
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'value',
+ boundaryGap: [0, 0.01],
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',//背景色为虚线,
+ color: '#256980'
+ }
+ }
+ },
+ yAxis: {
+ type: 'category',
+ data: ['当日订单数', '当月订单数'],
+
+ },
+ series: [
+ {
+ barWidth: 15,
+ barGap: '1000%',/*多个并排柱子设置柱子之间的间距*/
+ barCategoryGap: '100%',/*多个并排柱子设置柱子之间的间距*/
+ data: [120, 200],
+ type: 'bar',
+ itemStyle: {
+ normal: {
+ color: function (params) {
+ var colorList = [new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+ { offset: 1, color: '#0298E5' },
+ { offset: 0, color: 'transparent' },
+ ]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+ { offset: 1, color: '#4358C8' },
+ { offset: 0, color: 'transparent' },
+ ])];
+ return colorList[params.dataIndex]
+ },
+ borderColor: ['blue']
+
+ },
+ borderWidth: 2,
+ borderColor: "red",
+ },
+
+ }
+ ]
+ }
+
-
}
export default optins
\ No newline at end of file
diff --git a/src/view/order.vue b/src/view/order.vue
index e93ac97..da9f4d6 100644
--- a/src/view/order.vue
+++ b/src/view/order.vue
@@ -7,6 +7,8 @@
订单列表
退款单
核销订单
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+ 
+