新增组件
This commit is contained in:
parent
73b12f808a
commit
fcfb425ccc
@ -62,6 +62,10 @@
|
||||
setEchartOption(){
|
||||
var myChart = echarts.init(this.$refs.xEcharts, 'T');
|
||||
myChart.setOption(this.myOptions);
|
||||
},
|
||||
setSize(){
|
||||
var myChart = echarts.init(this.$refs.xEcharts, 'T');
|
||||
myChart.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
284
src/views/home/widgets/components/StoreConversionData.vue
Normal file
284
src/views/home/widgets/components/StoreConversionData.vue
Normal file
@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<div class="card-item">
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane :stretch="true" :label="storeList[0].title + i" :name="i" v-for="(item, i) in storeList" :key="i">
|
||||
<template #label>
|
||||
<div class="tab-box">
|
||||
{{ item.title }}
|
||||
<div class="tab-echart">
|
||||
<div class="text">
|
||||
转化率
|
||||
<div class="num">
|
||||
{{ item.num }}%
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:30px;width:30px;margin-left:15px;position: relative;">
|
||||
<div class="echart-pop" :class="{ 'echart-pop-tran': activeName == i }"></div>
|
||||
<xEcharts ref="c1" :option="item.saleOption"></xEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="data-echart-box">
|
||||
<xEcharts ref="c1" :option="storeOption"></xEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import xEcharts from '@/components/xEcharts';
|
||||
export default {
|
||||
title: "门店转化率",
|
||||
icon: "el-icon-switch",
|
||||
description: "门店转化率数据",
|
||||
components: {
|
||||
xEcharts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 0,
|
||||
storeList: [{
|
||||
title: '门店'
|
||||
}],
|
||||
saleOption: {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
top: '5%',
|
||||
left: 'center'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['60%', '100%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (colors) {
|
||||
var colorList = [
|
||||
'#5470c6',
|
||||
];
|
||||
return colorList[colors.dataIndex];
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 80, name: '' },
|
||||
{ value: 20, name: '' },
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
storeOption: {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
||||
},
|
||||
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'
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
startValue: 'Mon'
|
||||
},
|
||||
{
|
||||
type: 'inside'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Email',
|
||||
type: 'line',
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: 'Union Ads',
|
||||
type: 'line',
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: 'Video Ads',
|
||||
type: 'line',
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: 'Direct',
|
||||
type: 'line',
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: 'Search Engine',
|
||||
type: 'line',
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setOption(data) {
|
||||
let option = {}
|
||||
this.saleOption.series[0].data = data ? data : [{ value: 80, name: '' }, { value: 20, name: '' }]
|
||||
option = JSON.parse(JSON.stringify(this.saleOption))
|
||||
return option
|
||||
},
|
||||
//设置获取数据
|
||||
setList(data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) {
|
||||
let arr = []
|
||||
data.map(res => {
|
||||
let obj = {}
|
||||
obj['title'] = res.title ? res.title : `门店${res}`
|
||||
obj['num'] = res % 2 ? 80 : 60
|
||||
obj['saleOption'] = this.setOption([{ value: res % 2 ? 80 : 60, name: '' }, { value: res % 2 ? 20 : 40, name: '' }])
|
||||
arr.push(obj)
|
||||
})
|
||||
this.storeList = arr
|
||||
},
|
||||
//设置门店数据 设置dataZoom、series
|
||||
setStoreOption(data={}){
|
||||
this.storeOption.series=data.list?data.list:this.storeOption.series
|
||||
this.storeOption.dataZoom=[{startValue: 'Mon'},{type: 'inside'}]
|
||||
},
|
||||
//设置series属性
|
||||
setStoreSeries(data){
|
||||
let arr=[]
|
||||
data.map(res=>{
|
||||
let obj={
|
||||
name: '',
|
||||
type: 'line',
|
||||
data: []
|
||||
}
|
||||
obj['type']=res.title
|
||||
obj['data']=res.data
|
||||
arr.push(obj)
|
||||
})
|
||||
console.log(arr)
|
||||
return arr
|
||||
},
|
||||
refView(){
|
||||
this.$refs.c1.setSize()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setList()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pos-r {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dis-f {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.al-item {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.jus-bet {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.tab-box {
|
||||
height: 100px;
|
||||
color: #000000d9;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tab-echart {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tab-echart .text {
|
||||
color: #00000073;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.tab-echart .text .num {
|
||||
height: 32px;
|
||||
color: #000000d9;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.echart-pop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 66;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.echart-pop-tran {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.data-echart-box {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__nav-scroll {
|
||||
margin: 0 24px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__nav-wrap.is-scrollable {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__nav-prev {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__nav-next {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__nav {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
/* ::v-deep .el-tabs{
|
||||
--el-tabs-header-height: 100px;
|
||||
} */
|
||||
</style>
|
||||
@ -68,6 +68,9 @@ export default {
|
||||
},
|
||||
determineNum(num){
|
||||
return num<10?'0'+num:num
|
||||
},
|
||||
refView(){
|
||||
this.$refs.c1.setSize()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -96,6 +99,8 @@ export default {
|
||||
.card-item {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
margin-bottom:16px;
|
||||
min-width:535px;
|
||||
}
|
||||
|
||||
.tabs-box {
|
||||
@ -128,6 +133,12 @@ export default {
|
||||
color:#409EFF !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1115px) {
|
||||
.date-tool-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__nav-scroll {
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
@ -276,7 +276,7 @@ export default {
|
||||
|
||||
@media (min-width:550px) and (max-width: 1115px) {
|
||||
.card-item {
|
||||
width: 48%;
|
||||
width: 49.2%;
|
||||
min-width: 246px;
|
||||
/* margin-right: 10px; */
|
||||
}
|
||||
|
||||
@ -14,8 +14,8 @@
|
||||
<div class="dis-f al-item w-100 mg-t-16" v-for="(item, i) in list" :key="i">
|
||||
<div class="list-num" :class="{ 'list-top': i < 3 }">{{ i + 1 }}</div>
|
||||
<div class="dis-f al-item" style="flex: 1;justify-content: space-between;">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ setNumMark(item.num) }}</span>
|
||||
<div class="list-title-text">{{ item.title }}</div>
|
||||
<div>{{ setNumMark(item.num) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -35,16 +35,16 @@ export default {
|
||||
type: String,
|
||||
default: 'sales'
|
||||
},
|
||||
listData:{
|
||||
type:Array,
|
||||
default:function(){
|
||||
listData: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
listData(nval){
|
||||
this.payOption.series[0].data=nval
|
||||
watch: {
|
||||
listData(nval) {
|
||||
this.payOption.series[0].data = nval
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -154,9 +154,10 @@ export default {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mg-t-16{
|
||||
margin-top:16px;
|
||||
.mg-t-16 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.list-num {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@ -173,4 +174,17 @@ export default {
|
||||
.list-top {
|
||||
color: #fff;
|
||||
background: #314659;
|
||||
}</style>
|
||||
}
|
||||
|
||||
.list-title-text {
|
||||
max-width: 100px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@media screen and (max-width: 550px) {
|
||||
.list-title-text{
|
||||
min-width:20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -150,6 +150,9 @@ export default {
|
||||
methods: {
|
||||
setNumMark(num) {
|
||||
return setMark(num)
|
||||
},
|
||||
refView(){
|
||||
this.$refs.c1.setSize()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -184,6 +187,7 @@ export default {
|
||||
.card-item {
|
||||
background: #fff;
|
||||
padding: 16px 0;
|
||||
margin-bottom:15px;
|
||||
}
|
||||
|
||||
.line {
|
||||
|
||||
@ -20,8 +20,8 @@
|
||||
<div class="info-box pd-24">
|
||||
<div class="mg-tb-32">销售额</div>
|
||||
<div class="dis-f al-item">
|
||||
<div style="width:100%;height:300px;">
|
||||
<xEcharts ref="c1" :option="saleOption"></xEcharts>
|
||||
<div style="width:100%;height:300px;min-width:400px;">
|
||||
<xEcharts ref="c1" :option="saleOption"></xEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -39,49 +39,72 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
saleOption:{
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
top: '5%',
|
||||
left: 'center'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
list: [{ value: 1048, name: '123' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }],
|
||||
saleOption: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
setSaleOption(){
|
||||
this.saleOption={
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
left: '70%',
|
||||
top: 'center',
|
||||
width: 50,
|
||||
formatter: (name)=> {
|
||||
// console.log(data, 'data')
|
||||
let total = 0
|
||||
let tarValue
|
||||
for (let i = 0; i < this.list.length; i++) {
|
||||
total += this.list[i].value
|
||||
if (this.list[i].name == name) {
|
||||
tarValue = this.list[i].value
|
||||
}
|
||||
}
|
||||
let v = tarValue
|
||||
//计算出百分比
|
||||
let p = Math.round((tarValue / total) * 100) + '%'
|
||||
return `${name} ${p} ${v}`
|
||||
//name是名称，v是数值
|
||||
},
|
||||
data: this.list
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['50%', '80%'],
|
||||
avoidLabelOverlap: false,
|
||||
center:['30%','50%'],
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'left'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: this.list
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
refView(){
|
||||
this.$refs.c1.setSize()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.setSaleOption()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -108,7 +131,7 @@ export default {
|
||||
.card-item {
|
||||
background: #fff;
|
||||
padding: 16px 0;
|
||||
margin-top:15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.line {
|
||||
@ -121,13 +144,14 @@ export default {
|
||||
padding-top: 24px;
|
||||
font-size: 14px;
|
||||
color: #000000d9;
|
||||
font-size:500;
|
||||
}
|
||||
.pd-24{
|
||||
padding:0 24px;
|
||||
}
|
||||
.mg-tb-32{
|
||||
margin:32px 0;
|
||||
font-size: 500;
|
||||
}
|
||||
|
||||
.pd-24 {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.mg-tb-32 {
|
||||
margin: 32px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,19 +11,19 @@
|
||||
<el-empty description="没有部件啦" :image-size="280"></el-empty>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="15">
|
||||
<el-row :gutter="15" >
|
||||
<draggable v-model="widgets" animation="100" handle=".customize-overlay" group="people" item-key="com" force-fallback fallbackOnBody class="draggable-box">
|
||||
<template #item="{ element }">
|
||||
<el-col :md="parseInt(element.layout) || 24" :xs="24">
|
||||
<div class="widgets-item">
|
||||
<component :is="allComps[element.name]"></component>
|
||||
<component :is="allComps[element.name]" :ref="`components${allComps[element.name].title}`"></component>
|
||||
<div v-if="customizing" class="customize-overlay">
|
||||
<el-button class="close" type="danger" plain icon="el-icon-close" size="small" @click="remove(element.name)"></el-button>
|
||||
<label>
|
||||
<el-icon><component :is="allComps[element.name].icon" /></el-icon>
|
||||
{{ allComps[element.name].title }}
|
||||
</label>
|
||||
<el-input-number v-model="element.layout" :min="4" :max="24" />
|
||||
<el-input-number v-model="element.layout" :min="4" :max="24" @change="sizeChange(allComps[element.name].title)" />
|
||||
<!-- <el-slider v-model="element.layout" :min="4" :max="24" :step="1" show-stops /> -->
|
||||
</div>
|
||||
</div>
|
||||
@ -169,6 +169,11 @@
|
||||
close(){
|
||||
this.customizing = false
|
||||
this.$refs.widgets.style.removeProperty('transform')
|
||||
},
|
||||
//修改组件大小
|
||||
sizeChange(name){
|
||||
// console.log(this.$refs[`components${name}`])
|
||||
this.$refs[`components${name}`].refView()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user