This commit is contained in:
xvv 2024-07-19 10:23:23 +08:00
parent 4de32d74bd
commit c949f73c2d
2 changed files with 98 additions and 48 deletions

View File

@ -113,7 +113,7 @@
</div> </div>
<div class="h-r-ba"></div> <div class="h-r-ba"></div>
<div> <div>
<div class="h-tt" >活跃油站</div>
<div class="d-s" style="justify-content: space-between"> <div class="d-s" style="justify-content: space-between">
<div id="cccc" style="width: 300px;height: 200px;margin-right: 50px"></div> <div id="cccc" style="width: 300px;height: 200px;margin-right: 50px"></div>
<div id="ccct" style="width: 300px;height: 200px;"></div> <div id="ccct" style="width: 300px;height: 200px;"></div>
@ -234,8 +234,10 @@ export default {
const option = { const option = {
color: [ color: [
'#0DC291', '#b7f1e2',
'#FFB519', '#fc7150',
'#fea500',
'#5facfe',
], ],
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
@ -245,15 +247,20 @@ export default {
{ {
name: 'Access From', name: 'Access From',
type: 'pie', type: 'pie',
radius: '80%', roseType: 'area',
radius: [5, '80%'],
data: [ data: [
{ value: 28, name: '28%' }, { value: 36, name: '#98汽油占比' },
{ value: 72, name: '72%' }, { value: 42, name: '0#柴油占比' },
{ value: 40, name: '#95汽油占比' },
{ value: 38, name: '#92柴油占比' },
], ],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
borderRadius: 8,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)' shadowColor: 'rgba(0, 0, 0, 0.5)'
} }
@ -292,8 +299,10 @@ export default {
}; };
const option2 = { const option2 = {
color: [ color: [
'#0DC291', '#46c2c4',
'#FFB519', '#6e4dd8',
'#214790',
'#d55f5f',
], ],
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
@ -303,10 +312,12 @@ export default {
{ {
name: 'Access From', name: 'Access From',
type: 'pie', type: 'pie',
radius: '80%', radius: [50, '80%'],
data: [ data: [
{ value: 28, name: '28%' }, { value: 28, name: '会员充值占比' },
{ value: 72, name: '72%' }, { value: 72, name: '积分商城交易占比' },
{ value: 28, name: '油品交易占比' },
{ value: 72, name: '便利店交易占比' },
], ],
emphasis: { emphasis: {
@ -319,8 +330,8 @@ export default {
} }
] ]
}; };
const option3 = { const option3 = {
color: ['#FF9655', '#0DC291', '#409EFF'],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -332,25 +343,12 @@ export default {
}, },
legend: { legend: {
data: ['交易金额', '交易笔数', '活跃油站数'] data: ['Evaporation', '会员余额', '会员充值金额']
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
data: [ data: ['中建锦绣广场1站', '中建锦绣广场2站', '中建锦绣广场3站', '中建锦绣广场4站', '中建锦绣广场5站', '中建锦绣广场6站', '中建锦绣广场7站'],
'00:00',
'02:00',
'04:00',
'06:00',
'08:00',
'10:00',
'12:00',
'14:00',
'16:00',
'18:00',
'20:00',
'22:00'
],
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
} }
@ -360,7 +358,6 @@ export default {
{ {
type: 'value', type: 'value',
name: '金额(元)', name: '金额(元)',
min: 0, min: 0,
max: 250, max: 250,
interval: 50, interval: 50,
@ -370,7 +367,7 @@ export default {
}, },
{ {
type: 'value', type: 'value',
name: '笔数', name: '',
min: 0, min: 0,
max: 25, max: 25,
interval: 5, interval: 5,
@ -381,46 +378,100 @@ export default {
], ],
series: [ series: [
{ {
name: '活跃油站数', name: '会员余额',
color: '#D55F5F',
type: 'bar', type: 'bar',
tooltip: { tooltip: {
valueFormatter: function (value) { valueFormatter: function (value) {
return value + ' ml'; return value;
} }
}, },
barWidth: 13, barWidth: 13,
itemStyle: { itemStyle: {
normal: { normal: {
// 5]
barBorderRadius: [50, 50, 0, 0] barBorderRadius: [50, 50, 0, 0]
} }
}, },
data: [ 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: '交易金额', name: '会员充值金额',
type: 'line', color: '#0DC291',
yAxisIndex: 1, type: 'bar',
tooltip: { tooltip: {
valueFormatter: function (value) { 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: '交易笔数', name: '会员消费金额',
type: 'line', color: '#409EFF',
yAxisIndex: 1, type: 'bar',
tooltip: { tooltip: {
valueFormatter: function (value) { 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: { grid: {
@ -429,7 +480,6 @@ export default {
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
} }
}; };
chart.setOption(option) chart.setOption(option)

View File

@ -13,7 +13,7 @@ import shopowner from "@/views/homeComponents/shopowner.vue"
export default { export default {
data(){ data(){
return{ return{
power:1 power:2
} }
}, },
created() { created() {