前端
This commit is contained in:
parent
4de32d74bd
commit
c949f73c2d
@ -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)
|
||||||
|
@ -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() {
|
||||||
|
Loading…
Reference in New Issue
Block a user