chart

src/components/charts/XLine.vue

@@ -10,10 +10,6 @@ export default {
     return {
       chart: undefined,
       defaultOpts: {
-        //  dataset: {
-        //   dimensions: ['date', 'userCount', 'authorizationCount'],
-        //   source,
-        // },
         title: {
           text: "新增用户"
         },

src/views/indexEcharts/index.vue

@@ -34,11 +34,11 @@
   </el-row>
   <p class="title under-line" @click="toBehaviorAnalysis()">用户行为</p>
   <span class="title-desc under-line" @click="toBehaviorAnalysis()">最近7天</span>
-  <div class="grid-content" ref="thirdChart"  id="thirdChart"  :style="{ height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}" ></div>
-  <el-row :gutter="20">
+  <!-- <div class="grid-content" ref="thirdChart"  id="thirdChart"  :style="{ height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}" ></div> -->
+   <x-line :style="{height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}"  :value="lineSeting"></x-line>
+ <el-row :gutter="20">
     <el-col :span="12">
-      <div class="grid-content" ref="fourthChart"  id="fourthChart"  :style="{ height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}" >
-      </div>
+      <div class="grid-content" ref="fourthChart"  id="fourthChart"  :style="{height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}" ></div>
     </el-col>
     <el-col :span="12">
       <div class="grid-content" ref="fifthChart"  id="fifthChart"  :style="{ height: '500px',margin:'20px 0',border:'1px solid #eee', padding:'20px',borderRadius:'5px'}" >
@@ -79,7 +79,9 @@ const {
 } = createNamespacedHelpers("indexEcharts");
 
 export default {
-  components: {},
+  components: {
+    XLine: () => import('@/components/charts/XLine.vue'),
+  },
   data() {
     return {
       // 新增用户
@@ -88,33 +90,14 @@ export default {
         { label: '授权注册', }
       ],
       tableTitle: [ '类型' ],
-      tableData2: [
-        {
-          num: "98",
-          name: "王晓红",
-          phone: "15742389456",
-          building: "香颂.蔚澜半岛"
-        },
-        {
-          num: "99",
-          name: "王晓红2",
-          phone: "15742389456",
-          building: "香颂.蔚澜半岛"
+      tableData2: [ ],
+      userBehavior: [], // 用户行为
+      lineSeting: {
+        dataset: {
+          dimensions: ['date', 'activity', 'activityCount'],
+          source: [],
         },
-        {
-          num: "88",
-          name: "王晓红3",
-          phone: "15742389456",
-          building: "香颂.蔚澜半岛"
-        },
-        {
-          num: "94",
-          name: "王晓红4",
-          phone: "15742389456",
-          building: "香颂.蔚澜半岛"
-        }
-      ],
-      userBehavior: [] // 用户行为
+      },
     };
   },
   computed: {
@@ -127,8 +110,8 @@ export default {
     initPage() {
       this.setDetailNull();
       this.getIndexEcharts().then(x => {
+        this.lineSeting.dataset.source = this.echartsInfo.selectUserBehavior
         const data = this.echartsInfo.selectNewsUserCount
-        // this.lineSeting.dataset.source = data
         this.tableData = (data || []).reduce((acc, item, index) => {
           const { date, userCount, authorizationCount } = item
           const row2 = {
@@ -172,7 +155,7 @@ export default {
       };
       // 绘制图表
       firstChart.setOption({
-        color: ["#ff580f", "#ffb400"],
+        color: ["#3688f8", "#7974ce"],
         backgroundColor: "#fff",
         tooltip: {
           trigger: "axis"
@@ -250,6 +233,7 @@ export default {
       let secondChart = Echarts.init(this.$refs.secondChart);
       // 绘制图表
       secondChart.setOption({
+        color: ["#7974ce","#f5749d","#3688f8"],
         tooltip: {
           trigger: "item",
           formatter: "{a} <br/>{b} : {c} ({d}%)"
@@ -286,73 +270,73 @@ export default {
         ]
       });
       // 折线图
-      let thirdChart = Echarts.init(this.$refs.thirdChart);
+      // let thirdChart = Echarts.init(this.$refs.thirdChart);
       // 绘制图表
-      thirdChart.setOption({
-        title: {
-          text: "访问人数"
-        },
-        color: ["#000", "green", "#5793f3", "#d14a61", "#241bba", "orange"],
-        tooltip: {
-          trigger: "axis"
-        },
-        legend: {
-          data: ["首页", "项目", "咨询", "名片", "活动", "资讯"]
-        },
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
-        },
-        toolbox: {},
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
-        },
-        yAxis: {
-          type: "value"
-        },
-        series: [
-          {
-            name: "首页",
-            type: "line",
-            stack: "1",
-            data: []
-          },
-          {
-            name: "项目",
-            type: "line",
-            stack: "2",
-            data: [220, 182, 191, 234, 290, 330, 310]
-          },
-          {
-            name: "咨询",
-            type: "line",
-            stack: "3",
-            data: [150, 232, 201, 154, 190, 330, 410]
-          },
-          {
-            name: "名片",
-            type: "line",
-            stack: "4",
-            data: [320, 332, 301, 334, 390, 330, 320]
-          },
-          {
-            name: "活动",
-            type: "line",
-            stack: "5",
-            data: [820, 932, 901, 544, 1290, 1330, 1320]
-          },
-          {
-            name: "资讯",
-            type: "line",
-            stack: "6",
-            data: [400, 500, 201, 934, 1290, 1423, 777]
-          }
-        ]
-      });
+      // thirdChart.setOption({
+      //   title: {
+      //     text: "访问人数"
+      //   },
+      //   color: ["#ed3a3d", "#e613d2", "#2ed9f7", "#0ab662", "#165cf8", "#8854b9"],
+      //   tooltip: {
+      //     trigger: "axis"
+      //   },
+      //   legend: {
+      //     data: ["首页", "项目", "咨询", "名片", "活动", "资讯"]
+      //   },
+      //   grid: {
+      //     left: "3%",
+      //     right: "4%",
+      //     bottom: "3%",
+      //     containLabel: true
+      //   },
+      //   toolbox: {},
+      //   xAxis: {
+      //     type: "category",
+      //     boundaryGap: false,
+      //     data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
+      //   },
+      //   yAxis: {
+      //     type: "value"
+      //   },
+      //   series: [
+      //     {
+      //       name: "首页",
+      //       type: "line",
+      //       stack: "1",
+      //       data: []
+      //     },
+      //     {
+      //       name: "项目",
+      //       type: "line",
+      //       stack: "2",
+      //       data: [220, 182, 191, 234, 290, 330, 310]
+      //     },
+      //     {
+      //       name: "咨询",
+      //       type: "line",
+      //       stack: "3",
+      //       data: [150, 232, 201, 154, 190, 330, 410]
+      //     },
+      //     {
+      //       name: "名片",
+      //       type: "line",
+      //       stack: "4",
+      //       data: [320, 332, 301, 334, 390, 330, 320]
+      //     },
+      //     {
+      //       name: "活动",
+      //       type: "line",
+      //       stack: "5",
+      //       data: [820, 932, 901, 544, 1290, 1330, 1320]
+      //     },
+      //     {
+      //       name: "资讯",
+      //       type: "line",
+      //       stack: "6",
+      //       data: [400, 500, 201, 934, 1290, 1423, 777]
+      //     }
+      //   ]
+      // });
       // 柱状图
       let fourthChart = Echarts.init(this.$refs.fourthChart);
       // 绘制图表
@@ -372,7 +356,7 @@ export default {
         title: {
           text: "活跃用户数"
         },
-        color: ["#3398DB"],
+        color: ["#7571cf"],
         tooltip: {
           trigger: "axis",
           axisPointer: {
@@ -416,6 +400,7 @@ export default {
         title: {
           text: "转化率"
         },
+        color:["#6a96f7","#f5749d"],
         tooltip: {
           trigger: "item",
           formatter: "{a} <br/>{b}: {c} ({d}%)"
@@ -458,6 +443,7 @@ export default {
         title: {
           text: "性别比例"
         },
+        color:["#6a96f7","#f5749d"],
         tooltip: {
           trigger: "item",
           formatter: "{a} <br/>{b}: {c} ({d}%)"