前端
This commit is contained in:
xvv
parent
4de32d74bd
commit
c949f73c2d
@ -113,7 +113,7 @@
|
||||
</div>
|
||||
<div class="h-r-ba"></div>
|
||||
<div>
|
||||
<div class="h-tt" >活跃油站</div>
|
||||
|
||||
<div class="d-s" style="justify-content: space-between">
|
||||
<div id="cccc" style="width: 300px;height: 200px;margin-right: 50px"></div>
|
||||
<div id="ccct" style="width: 300px;height: 200px;"></div>
|
||||
@ -234,8 +234,10 @@ export default {
|
||||
|
||||
const option = {
|
||||
color: [
|
||||
'#0DC291',
|
||||
'#FFB519',
|
||||
'#b7f1e2',
|
||||
'#fc7150',
|
||||
'#fea500',
|
||||
'#5facfe',
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
@ -245,15 +247,20 @@ export default {
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '80%',
|
||||
roseType: 'area',
|
||||
radius: [5, '80%'],
|
||||
data: [
|
||||
{ value: 28, name: '28%' },
|
||||
{ value: 72, name: '72%' },
|
||||
{ value: 36, name: '#98汽油占比' },
|
||||
{ value: 42, name: '0#柴油占比' },
|
||||
{ value: 40, name: '#95汽油占比' },
|
||||
{ value: 38, name: '#92柴油占比' },
|
||||
|
||||
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
borderRadius: 8,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
@ -292,8 +299,10 @@ export default {
|
||||
};
|
||||
const option2 = {
|
||||
color: [
|
||||
'#0DC291',
|
||||
'#FFB519',
|
||||
'#46c2c4',
|
||||
'#6e4dd8',
|
||||
'#214790',
|
||||
'#d55f5f',
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
@ -303,10 +312,12 @@ export default {
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '80%',
|
||||
radius: [50, '80%'],
|
||||
data: [
|
||||
{ value: 28, name: '28%' },
|
||||
{ value: 72, name: '72%' },
|
||||
{ value: 28, name: '会员充值占比' },
|
||||
{ value: 72, name: '积分商城交易占比' },
|
||||
{ value: 28, name: '油品交易占比' },
|
||||
{ value: 72, name: '便利店交易占比' },
|
||||
|
||||
],
|
||||
emphasis: {
|
||||
@ -319,8 +330,8 @@ export default {
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const option3 = {
|
||||
color: ['#FF9655', '#0DC291', '#409EFF'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
@ -332,25 +343,12 @@ export default {
|
||||
},
|
||||
|
||||
legend: {
|
||||
data: ['交易金额', '交易笔数', '活跃油站数']
|
||||
data: ['Evaporation', '会员余额', '会员充值金额']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [
|
||||
'00:00',
|
||||
'02:00',
|
||||
'04:00',
|
||||
'06:00',
|
||||
'08:00',
|
||||
'10:00',
|
||||
'12:00',
|
||||
'14:00',
|
||||
'16:00',
|
||||
'18:00',
|
||||
'20:00',
|
||||
'22:00'
|
||||
],
|
||||
data: ['中建锦绣广场1站', '中建锦绣广场2站', '中建锦绣广场3站', '中建锦绣广场4站', '中建锦绣广场5站', '中建锦绣广场6站', '中建锦绣广场7站'],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
@ -360,67 +358,120 @@ export default {
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额(元)',
|
||||
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
axisLabel: {
|
||||
formatter: '{value} '
|
||||
formatter: '{value}'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '笔数',
|
||||
name: '',
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
formatter: '{value} '
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '活跃油站数',
|
||||
name: '会员余额',
|
||||
color: '#D55F5F',
|
||||
type: 'bar',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' ml';
|
||||
return value;
|
||||
}
|
||||
},
|
||||
barWidth: 13,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
//这里设置柱形图圆角 5左上角，右上角，右下角，左下角]
|
||||
barBorderRadius: [50, 50, 0, 0]
|
||||
}
|
||||
},
|
||||
data: [
|
||||
30.0, 31.9, 71.0, 23.2, 41.6, 31.7, 21.6, 30.0, 31.9, 71.0, 23.2, 41.6
|
||||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
name: '交易金额',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
name: '会员充值金额',
|
||||
color: '#0DC291',
|
||||
type: 'bar',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' °C';
|
||||
return value;
|
||||
}
|
||||
},
|
||||
data: [3.0, 3.9, 7.0, 2.2, 4.6, 3.7, 2.6, 3.0, 3.9, 7.0, 3.2, 4.6]
|
||||
barWidth: 13,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: [50, 50, 0, 0]
|
||||
}
|
||||
},
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '交易笔数',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
name: '会员消费金额',
|
||||
color: '#409EFF',
|
||||
type: 'bar',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' °C';
|
||||
return value;
|
||||
}
|
||||
},
|
||||
data: [2.0, 3.9, 4.0, 5.2, 4.6, 6.7, 7.6, 6.0, 5.9, 4.0, 4.2, 2.6]
|
||||
barWidth: 13,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: [50, 50, 0, 0]
|
||||
}
|
||||
},
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '油品交易额',
|
||||
color: '#FF9655',
|
||||
type: 'bar',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
barWidth: 13,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: [50, 50, 0, 0]
|
||||
}
|
||||
},
|
||||
barGap: '60%',
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '非油品交易额',
|
||||
color: '#55F3FF',
|
||||
type: 'bar',
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
barWidth: 13,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: [50, 50, 0, 0]
|
||||
}
|
||||
},
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
@ -429,7 +480,6 @@ export default {
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
chart.setOption(option)
|
||||
|
||||
@ -13,7 +13,7 @@ import shopowner from "@/views/homeComponents/shopowner.vue"
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
power:1
|
||||
power:2
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user