Skip to content

C
CRM
Commit ea3c1cc5 authored by 罗超's avatar 罗超
Browse files
Options

首页完工

parent f67cdb97
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1045 additions and 242 deletions
src/components/Home.vue
View file @ ea3c1cc5
This diff is collapsed.
src/components/chart/noincome.vue 0 → 100644
View file @ ea3c1cc5
<template>
<div class="inerank-container">
<div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
</div>
</template>
<script>
export default {
props:{
data:{
type:Array,
default:[]
}
},
data() {
return {
datatwo:[]
};
},
mounted() {
this.data=[
{
dataStr:'8月',
preferPrice:12000
},
{
dataStr:'9月',
preferPrice:120000
},
{
dataStr:'10月',
preferPrice:80000
},
{
dataStr:'11月',
preferPrice:85000
},
{
dataStr:'12月',
preferPrice:7000
},
{
dataStr:'1月',
preferPrice:160000
},
{
dataStr:'2月',
preferPrice:300000
},
]
this.datatwo=[
{
dataStr:'9月',
preferPrice:480000
},
{
dataStr:'10月',
preferPrice:120000
},
{
dataStr:'11月',
preferPrice:850000
},
{
dataStr:'12月',
preferPrice:70000
},
{
dataStr:'1月',
preferPrice:320000
},
{
dataStr:'2月',
preferPrice:700000
},
]
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
var dataAxis = [];
var data2 = [];
this.data.forEach(x=>{
dataAxis.push(x.dataStr)
data2.push(x.preferPrice)
})
let option = {
// backgroundColor: "#0abb87", //"#19133e6e",
title: {
show: false
},
xAxis: {
data: dataAxis,
axisLabel: {
textStyle: {
color: "#79778a",
fontFamily: "DIN"
},
margin: 10,
interval: 0,
show: false
},
type : 'category',
axisTick: {
show: false
},
axisLine: {
show: false
}
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#272938",
fontFamily: "DIN"
},
show: false
},
splitLine: {
show: false
}
},
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0
},
tooltip: {
trigger: "item",
axisPointer: {
type: "none",
snap: true,
label: {
backgroundColor: '#FAB6B6'
}
}
},
series: [
{
name: "未收款",
type: "bar",
smooth: false,
symbol: "circle",
barBorderRadius:[10, 10, 10, 10],
barWidth:14,
itemStyle: {
normal: {
lineStyle: {
color: "##0D2481"
},
areaStyle: {
color: "#00C5C8"
},
color:"#0D2481"
}
},
data: data2
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style>
.inerank-container {
height: 100%;
width: 100%;
}
</style>
src/components/chart/shangjiloudou.vue 0 → 100644
View file @ ea3c1cc5
<template>
<div class="inerank-container">
<div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Array,
default: []
}
},
data() {
return {};
},
mounted() {
this.data = [
{
dataStr: "9月",
preferPrice: 12000
},
{
dataStr: "10月",
preferPrice: 8000
},
{
dataStr: "11月",
preferPrice: 8500
},
{
dataStr: "12月",
preferPrice: 7000
},
{
dataStr: "1月",
preferPrice: 16000
},
{
dataStr: "2月",
preferPrice: 0
}
];
this.init();
},
methods: {
init() {
let myChart = this.$echarts.init(this.$refs.myLineRank);
var dataAxis = [];
var data2 = [];
this.data.forEach(x => {
dataAxis.push(x.dataStr);
data2.push(x.preferPrice);
});
let option = (option = {
title: {
text: "漏斗图",
subtext: "纯属虚构",
show:false
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c}%"
},
legend: {
data: ["展现", "点击", "访问", "咨询", "订单"]
},
color:['#FF9459','#FFB18A','#FCBC9F','#F7C6B6','#EED8D4'],
series: [
{
name: "预期",
type: "funnel",
left: "10%",
width: "80%",
label: {
formatter: "{b}预期"
},
labelLine: {
show: false
},
itemStyle: {
opacity: 0.7
},
emphasis: {
label: {
position: "inside",
formatter: "{b}预期: {c}%"
}
},
data: [
{ value: 60, name: "访问" },
{ value: 40, name: "咨询" },
{ value: 20, name: "订单" },
{ value: 80, name: "点击" },
{ value: 100, name: "展现" }
]
},
{
name: "实际",
type: "funnel",
left: "10%",
width: "80%",
maxSize: "80%",
label: {
position: "inside",
formatter: "{c}%",
color: "#fff"
},
itemStyle: {
opacity: 0.5,
borderColor: "#fff",
borderWidth: 2
},
emphasis: {
label: {
position: "inside",
formatter: "{b}实际: {c}%"
}
},
data: [
{ value: 30, name: "访问" },
{ value: 10, name: "咨询" },
{ value: 5, name: "订单" },
{ value: 50, name: "点击" },
{ value: 80, name: "展现" }
]
}
]
});
myChart.setOption(option);
}
}
};
</script>
<style>
.inerank-container {
height: 100%;
width: 100%;
}
</style>
src/views/index.vue
View file @ ea3c1cc5
......@@ -36,24 +36,25 @@
.template-div{
position: absolute;
top: 90px;
left: 30px;
right: 30px;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
padding: 0 30px;
}
*::-webkit-scrollbar{
width: 4px;
height: 8px;
}
*::-webkit-scrollbar-thumb {
border-radius: 4px;
/* border-radius: 4px; */
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
background: #c9c9c9;
background: #555;
}
*::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
border-radius: 4px;
background: #EDEDED;
/* border-radius: 4px; */
background: #555;
}
</style>
<template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment