调整文化视图页面

src/views/WhView.vue

@@ -1,49 +1,57 @@
 <template>
     <div class="tyc">
-      <div class="topnav">文化</div>
-      <!-- 图形 -->
-      <div class="tyclogo">
-        <div class="tyname">文化</div>
-        <div class="tydesc">图书馆|文化馆|博物馆</div>
-      </div>
-      <!-- 总计进馆人数 -->
-      <div class="jgbox">
-        <div class="jg_title">总计进馆人数</div>
-        <div class="jgcon">
-  
-          <div class="jgitem">
-            <div class="jgimg"><img src="../assets/icon01.png"/></div>
-            <span class="jgival">234,255</span>
-            <span class="jgdesc">今日进馆人数</span>
-          </div>
-          <div class="jgitem">
-            <div class="jgimg"><img src="../assets/icon02.png"/></div>
-            <span class="jgival">234,255</span>
-            <span class="jgdesc">本月进馆人数</span>
-          </div>
-          <div class="jgitem">
-            <div class="jgimg"><img src="../assets/icon03.png"/></div>
-            <span class="jgival">234,255</span>
-            <span class="jgdesc">本年进馆人数</span>
-          </div>                
+        <div class="topnav">文化</div>
+        <!-- 图形 -->
+        <div class="tyclogo">
+            <div class="tyname">文化</div>
+            <div class="tydesc">图书馆|文化馆|博物馆</div>
+        </div>
+        <!-- 总计进馆人数 -->
+        <div class="jgbox">
+            <div class="jg_title">总计进馆人数</div>
+            <div class="jgcon">
+
+                <div class="jgitem">
+                    <div class="jgimg"><img src="../assets/icon01.png" /></div>
+                    <span class="jgival">234,255</span>
+                    <span class="jgdesc">今日进馆人数</span>
+                </div>
+                <div class="jgitem">
+                    <div class="jgimg"><img src="../assets/icon02.png" /></div>
+                    <span class="jgival">234,255</span>
+                    <span class="jgdesc">本月进馆人数</span>
+                </div>
+                <div class="jgitem">
+                    <div class="jgimg"><img src="../assets/icon03.png" /></div>
+                    <span class="jgival">234,255</span>
+                    <span class="jgdesc">本年进馆人数</span>
+                </div>
+            </div>
+        </div>
+        <!-- 进馆人数统计 -->
+        <div class="gcins">
+            <div class="gcins_title">24小时进馆人数趋势</div>
+            <div id="gcins_charts" style="height:16rem"></div>
+        </div>
+
+        <!-- 各场馆人数趋势 -->
+        <div class="gcgrs">
+            <div class="gcgrs_title">各场馆人数趋势</div>
+            <div id="gc_charts" class="gcgrs_charts"></div>
+        </div>
+        <!-- 各场馆人数趋势 -->
+        <div class="tsgbox">
+            <div class="tsg_title">图书馆数据统计</div>
+            <div id="tsgchart" class="tsgc_charts"></div>
         </div>
-      </div>
-      <!-- 进馆人数统计 -->
-      <div class="gcins">
-        <div class="gcins_title">进馆人数统计</div>
-        <div id="gcins_charts" style="height:16rem"></div>
-      </div>
-      <!-- 人数状态 -->
-      <div class="incbox"></div>
-  
     </div>
-  </template>
-  <style scoped>
-  .tyc {
+</template>
+<style scoped>
+.tyc {
     position: relative;
-  }
-  
-  .topnav {
+}
+
+.topnav {
     height: 46px;
     line-height: 46px;
     text-align: center;
@@ -56,40 +64,43 @@
     top: 0;
     background-color: #080A25;
     margin-bottom: 30rpx;
-  }
-  
-  .tyclogo {
+}
+
+.tyclogo {
     margin-top: 1.6rem;
     background-image: url("../assets/wh_00.png");
     background-repeat: no-repeat;
     background-size: 100%;
     background-position: 0 0;
     height: 12rem;
-  }
-  
-  .tyclogo .tyname {
+}
+
+.tyclogo .tyname {
     height: 3rem;
     line-height: 3rem;
     text-align: right;
     padding-right: 6.06rem;
     font-size: 2.02rem;
     padding-top: 4.8rem;
-  }
-  .tyclogo .tydesc{
+}
+
+.tyclogo .tydesc {
     height: 2rem;
     line-height: 2rem;
     font-size: 1.03rem;
     text-align: right;
     padding-right: 1.06rem;
     color: #999;
-  }
-  /* 总计进馆 */
-  .jgbox{
+}
+
+/* 总计进馆 */
+.jgbox {
     margin-top: 1.02rem;
     width: 100%;
     height: 12rem;
-  }
-  .jgbox .jg_title{
+}
+
+.jgbox .jg_title {
     background-image: url('../assets/ty_jg_bg.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
@@ -97,41 +108,48 @@
     padding-left: 3.2rem;
     height: 2.06rem;
     line-height: 2.06rem;
-  }
-  .jgbox .jgcon{
+}
+
+.jgbox .jgcon {
     width: 100%;
     height: 7rem;
     padding-top: 2rem;
-  }
-  .jgbox .jgcon .jgitem{
+}
+
+.jgbox .jgcon .jgitem {
     width: 30%;
     margin-left: 3%;
     float: left;
-  }
-  .jgbox .jgcon .jgitem .jgimg{
+}
+
+.jgbox .jgcon .jgitem .jgimg {
     margin-left: auto;
     margin-right: auto;
     text-align: center;
-  }
-  .jgbox .jgcon .jgitem span{
+}
+
+.jgbox .jgcon .jgitem span {
     display: block;
     text-align: center;
     height: 1.8rem;
     line-height: 1.8rem;
-  }
-  .jgbox .jgcon .jgitem .jgival{
+}
+
+.jgbox .jgcon .jgitem .jgival {
     font-size: 1.06rem;
-  }
-  .jgbox .jgcon .jgitem .jgdesc{
+}
+
+.jgbox .jgcon .jgitem .jgdesc {
     color: #666;
     font-size: 0.8rem;
-  }
-  /* 进馆人数统计 */
-  .gcins {
+}
+
+/* 24小时进馆人数趋势 */
+.gcins {
     margin-top: 1.6rem;
-  }
-  
-  .gcins .gcins_title {
+}
+
+.gcins .gcins_title {
     background-image: url("../assets/tyc_tbg.png");
     background-position: 0 0;
     background-repeat: no-repeat;
@@ -139,159 +157,520 @@
     height: 1.8rem;
     line-height: 1.8rem;
     padding-left: 2.02rem;
-  }
-  
-  /* 进馆人数 */
-  .incbox{
-    margin-top: 1.2rem;
-    background: url("../assets/tyc_bhd.png") no-repeat 0 center;
+}
+
+/* 各场馆人数趋势 */
+.gcgrs {
+    margin-top: 1.06rem;
+}
+
+.gcgrs .gcgrs_title {
+    background-image: url("../assets/wh_tbg.png");
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    height: 1.8rem;
+    line-height: 1.8rem;
+    padding-left: 2.02rem;
+}
+
+.gcgrs .gcgrs_charts {
+    margin-top: 2rem;
+    width: 100%;
+    height: 17rem;
+}
+
+/* 图书馆趋势 */
+.tsgbox {
+    margin-top: 3rem;
+}
+
+.tsgbox .tsg_title {
+    background-image: url("../assets/wh_tsg_tbg.png");
+    background-position: 0 0;
+    background-repeat: no-repeat;
     background-size: 100%;
-    height: 8rem;
-  }
-  </style>
-  <script>
-  import * as echarts from 'echarts';
-  export default {
+    height: 2.2rem;
+    line-height: 2.2rem;
+    padding-left: 2.02rem;
+}
+
+.tsgbox .tsgc_charts {
+    margin-top: 2rem;
+    width: 100%;
+    height: 16rem;
+}
+</style>
+<script>
+import * as echarts from 'echarts';
+export default {
     name: 'TycView',
     data() {
-      return {
-        //
-      }
+        return {
+            //
+        }
     },
     mounted() {
-      this.cgsf_line()
+        // 24h ins k line
+        this.cgsf_line()
+        //
+        this.gc_line()
+        //
+        this.tsg_line()
     },
     methods: {
-      // 山峰图
-      cgsf_line() {
-        var chartDom = document.getElementById('gcins_charts');
-        var myChart = echarts.init(chartDom);
-        var option;
-  
-        option = {
-  
-          grid: {
-            left: '3%',
-            right: '3%',
-            bottom: '3%',
-            top: '10%',
-            containLabel: true
-          },
-          xAxis: [{
-            data: [
-              '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00',
-            ],
-            axisLine: {
-              lineStyle: {
-                color: '#0095FF',
-                width: 1,
-                type: 'solid',
-              },
-              show: true
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: false
-            },
-            axisLabel: {
-              show: true,
-              textStyle: {
-                color: '#fff'
-              }
+        // 山峰图
+        cgsf_line() {
+            var chartDom = document.getElementById('gcins_charts');
+            var myChart = echarts.init(chartDom);
+            var option;
+
+            option = {
+
+                grid: {
+                    left: '3%',
+                    right: '3%',
+                    bottom: '3%',
+                    top: '10%',
+                    containLabel: true
+                },
+                xAxis: [{
+                    data: [
+                        '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00',
+                    ],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#0095FF',
+                            width: 1,
+                            type: 'solid',
+                        },
+                        show: true
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    splitLine: {
+                        show: false
+                    },
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: '#fff'
+                        }
+                    }
+                }],
+                yAxis: [{
+                    type: 'value',
+                    axisLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            // 使用深浅的间隔色
+                            color: '#027eff'
+                        }
+                    },
+                    axisLabel: {
+                        color: '#0095FF',
+                    }
+                }],
+                series: [{
+                    // name: '厂用电量',
+                    type: 'bar',
+                    barGap: '5%',
+                    barWidth: '10%',
+                    barCategoryGap: '60%',
+                    stack: 1,
+                    itemStyle: {
+                        normal: {
+                            barBorderRadius: [30, 30, 0, 0],
+                            color: new echarts.graphic.LinearGradient(
+                                0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: '#00feff'
+                                },
+                                {
+                                    offset: 1,
+                                    color: '#0286ff'
+                                }
+                            ]
+                            )
+                        }
+                    },
+                    data: [
+                        14000,
+                        11000,
+                        10000,
+                        9000,
+                        8000,
+                        7000,
+                        5000,
+                        4000,
+                        3000,
+                    ],
+                    zlevel: 11
+                },
+                {
+                    // name: '厂用电量',
+                    type: 'scatter',
+                    stack: 1,
+                    xAxisIndex: 0,
+                    symbolOffset: [0, 0], //相对于原本位置的偏移量
+                    data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
+                    itemStyle: {
+                        normal: {
+                            color: '#fff'
+                        }
+                    },
+                    symbolSize: 13,
+                    zlevel: 10,
+                    z: 2,
+                },
+                {
+                    name: '背景',
+                    type: 'bar',
+                    barWidth: '10%',
+                    barGap: '-100%',
+                    data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
+                    itemStyle: {
+                        normal: {
+                            color: '#004298',
+                            barBorderRadius: 30,
+                        }
+                    },
+                    z: 1,
+                },
+                ]
             }
-          }],
-          yAxis: [{
-            type: 'value',
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                // 使用深浅的间隔色
-                color: '#027eff'
-              }
-            },
-            axisLabel: {
-              color: '#0095FF',
+
+            option && myChart.setOption(option);
+        },
+
+        //
+        gc_line() {
+            var chartDom = document.getElementById("gc_charts");
+            var myChart = echarts.init(chartDom);
+
+            var option
+            var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',];
+            var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
+            var name = ['图书馆', '文化馆', '博物馆']
+            var data = [
+                [137, 34, 135, 161, 74, 152, 110, 100, 150],
+                [174, 137, 135, 34, 152, 135, 140, 160, 100],
+                [134, 74, 137, 135, 161, 137, 300, 220, 250],
+            ]
+
+            var series = [];
+            for (var i = 0; i < 6; i++) {
+                series.push({
+                    name: name[i],
+                    type: "line",
+                    symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
+                    symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+                    smooth: true, //是否平滑曲线显示
+                    showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
+                    areaStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color: color[i]
+                            }, {
+                                offset: 0.8,
+                                color: 'rgba(255,255,255,0)'
+                            }], false),
+                            // shadowColor: 'rgba(255,255,255, 0.1)',
+                            shadowBlur: 10,
+                            opacity: 0.3,
+                        }
+                    },
+                    itemStyle: {
+                        normal: {
+                            color: color[i],
+                            lineStyle: {
+                                width: 1,
+                                type: 'solid' //'dotted'虚线 'solid'实线
+                            },
+                            borderColor: color[i], //图形的描边颜色。支持的格式同 color
+                            borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] 
+                            barBorderRadius: 0,
+                            label: {
+                                show: false,
+                            },
+                            opacity: 0.5,
+                        }
+                    },
+                    data: data[i],
+
+                })
             }
-          }],
-          series: [{
-            // name: '厂用电量',
-            type: 'bar',
-            barGap: '5%',
-            barWidth: '10%',
-            barCategoryGap: '60%',
-            stack: 1,
-            itemStyle: {
-              normal: {
-                barBorderRadius: [30, 30, 0, 0],
-                color: new echarts.graphic.LinearGradient(
-                  0, 0, 0, 1, [{
-                    offset: 0,
-                    color: '#00feff'
-                  },
-                  {
-                    offset: 1,
-                    color: '#0286ff'
-                  }
-                ]
-                )
-              }
+            option = {
+                // backgroundColor: "#141f56",
+                legend: {
+                    top: 0,
+                    itemGap: 15,
+                    itemWidth: 15,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '14'
+                    },
+                    data: name
+                },
+                title: {
+                    // text: "负面言论分领域趋势",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '22',
+                        fontWeight: 'normal',
+                    },
+                    subtextStyle: {
+                        color: '#90979c',
+                        fontSize: '16',
+
+                    },
+                },
+                grid: {
+                    borderWidth: 0,
+                    top: 240,
+                    bottom: 240,
+                    textStyle: {
+                        color: "#fff"
+                    }
+                },
+                xAxis: [{
+                    type: "category",
+                    axisLine: {
+                        show: false,
+                    },
+                    splitLine: {
+                        show: false,
+                    },
+                    boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
+                    axisTick: {
+                        show: false
+                    },
+                    splitArea: {
+                        show: false
+                    },
+                    axisLabel: {
+                        inside: false,
+                        textStyle: {
+                            color: '#FFFFFF',
+                            fontWeight: 'normal',
+                            fontSize: '12',
+                        },
+                    },
+                    data: xData,
+                }],
+                yAxis: {
+                    type: 'value',
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#32346c ',
+                        }
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: '#0095FF',
+                            fontWeight: 'normal',
+                            fontSize: '12',
+                        },
+                        formatter: '{value}',
+                    },
+                },
+                series: series,
+            }
+
+            option && myChart.setOption(option);
+        },
+        // 图书馆
+        tsg_line() {
+            var chartDom = document.getElementById("tsgchart");
+            var myChart = echarts.init(chartDom);
+            var option;
+
+            var data = [{
+                name: '今日办证人数',
+                value: 323,
             },
-            data: [
-              14000,
-              11000,
-              10000,
-              9000,
-              8000,
-              7000,
-              5000,
-              4000,
-              3000,
-            ],
-            zlevel: 11
-          },
-          {
-            // name: '厂用电量',
-            type: 'scatter',
-            stack: 1,
-            xAxisIndex: 0,
-            symbolOffset: [0, 0], //相对于原本位置的偏移量
-            data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
-            itemStyle: {
-              normal: {
-                color: '#fff'
-              }
+            {
+                name: '今日还书册数',
+                value: 209,
             },
-            symbolSize: 13,
-            zlevel: 10,
-            z: 2,
-          },
-          {
-            name: '背景',
-            type: 'bar',
-            barWidth: '10%',
-            barGap: '-100%',
-            data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
-            itemStyle: {
-              normal: {
-                color: '#004298',
-                barBorderRadius: 30,
-              }
+            {
+                name: '今日借书册数',
+                value: 323,
             },
-            z: 1,
-          },
-          ]
-        }
-  
-        option && myChart.setOption(option);
-      },
+            ];
+            var getArrByKey = (data, k) => {
+                let key = k || "value";
+                let res = [];
+                if (data) {
+                    data.forEach(function (t) {
+                        res.push(t[key]);
+                    });
+                }
+                return res;
+            };
+            var getSymbolData = (data) => {
+                let arr = [];
+                for (var i = 0; i < data.length; i++) {
+                    arr.push({
+                        value: data[i].value,
+                        symbolPosition: 'end'
+                    })
+                }
+                return arr;
+            }
+
+            console.log(getSymbolData(data));
+            option = {
+                grid: {
+                    top: '2%',
+                    bottom: -15,
+                    right: 30,
+                    left: 30,
+                    containLabel: true
+                },
+                xAxis: {
+                    show: false
+                },
+                yAxis: [{
+                    triggerEvent: true,
+                    show: true,
+                    // inverse: true,
+                    data: getArrByKey(data, 'name'),
+                    axisLine: {
+                        show: false
+                    },
+                    splitLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLabel: {
+                        show: false,
+                        interval: 0,
+                        color: '#fff',
+                        align: 'left',
+                        margin: 80,
+                        fontSize: 12,
+                        formatter: function (value) {
+                            return '{title|' + value + '}'
+                        },
+                        rich: {
+                            title: {
+                                width: 165
+                            }
+                        }
+                    },
+                }, {
+                    triggerEvent: true,
+                    show: true,
+                    // inverse: true,
+                    data: getArrByKey(data, 'name'),
+                    axisLine: {
+                        show: false
+                    },
+                    splitLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLabel: {
+                        interval: 0,
+                        shadowOffsetX: '-20px',
+                        color: '#fff',
+                        align: 'right',
+                        verticalAlign: 'bottom',
+                        lineHeight: 30,
+                        fontSize: 16,
+                        formatter: function (value, index) {
+                            return data[index].value + ' 册 '
+                        },
+                    }
+                }],
+                series: [{
+                    name: 'XXX',
+                    type: 'pictorialBar',
+                    symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
+                    symbolSize: [50, 50],
+                    symbolOffset: [20, 0],
+                    z: 12,
+                    itemStyle: {
+                        normal: {
+                            color: '#14b1eb'
+                        }
+                    },
+                    data: getSymbolData(data)
+                }, {
+                    name: '条',
+                    type: 'bar',
+                    showBackground: true,
+                    barBorderRadius: 30,
+                    yAxisIndex: 0,
+                    data: data,
+                    barWidth: 10,
+                    // align: left,
+                    itemStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(
+                                0,
+                                0,
+                                1,
+                                0,
+                                [{
+                                    offset: 0,
+                                    color: '#A71A2B'
+                                },
+                                {
+                                    offset: 0.7,
+                                    color: '#A71A2B'
+                                },
+                                {
+                                    offset: 1,
+                                    color: '#5EDEE5'
+                                }
+                                ],
+
+                                false
+                            ),
+                            barBorderRadius: 10
+                        },
+                        // color: '#A71A2B',
+                        barBorderRadius: 4,
+                    },
+                    label: {
+                        normal: {
+                            color: '#fff',
+                            show: true,
+                            position: [0, '-20px'],
+                            textStyle: {
+                                fontSize: 16
+                            },
+                            formatter: function (a) {
+                                return a.name
+                            }
+                        }
+                    }
+                }]
+            };
+
+            option && myChart.setOption(option);
+        },
     },
-  }
-  </script>
+}
+</script>