Merge branch 'master' of http://gitlab.oytour.com/huaguohao/crm

src/components/chart/noincome.vue

+<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

+<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

@@ -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>