大屏右侧框架

src/views/gisHome/component/leftMain.vue

@@ -18,7 +18,7 @@
       <div class="cardList">
         <div class="card">
           <div class="iconImg">
-            <img src="@/assets/images/Attendancerate.png" alt="" />
+            <img src="@/assets/images/totalnumber.png" alt="" />
           </div>
           <p>总人数</p>
           <div class="peopleNum"><span>259</span>人</div>
@@ -67,6 +67,7 @@
         </div>
         <div class="ligner"></div>
       </div>
+      <div class="order" id="orderMain"></div>
     </div>
     <div class="topleft"></div>
     <div class="bottomright"></div>
@@ -79,9 +80,9 @@ import * as echarts from 'echarts';
 type EChartsOption = echarts.EChartsOption;
 
 const initMachinerycharts = () => {
-  var chartDom = document.getElementById('machineryMain');
-  var myMachineryChart = echarts.init(chartDom);
-  var option: EChartsOption;
+  let chartDom = document.getElementById('machineryMain');
+  let myMachineryChart = echarts.init(chartDom);
+  let option: EChartsOption;
 
   // prettier-ignore
   let dataAxis = ['水泥机', '搅拌机', '拖拉机', '推土机', '推土机', '推土机','推土机', ];
@@ -140,7 +141,7 @@ const initMachinerycharts = () => {
         type: 'slider',
         xAxisIndex: 0,
         // 滚动条背景颜色
-        backgroundColor: 'rgba(8, 14, 15, 1)',
+        backgroundColor: 'rgba(8, 14, 15, .3)',
         // 选中区域的背景颜色
         fillerColor: {
           type: 'linear',
@@ -160,16 +161,33 @@ const initMachinerycharts = () => {
           ],
           global: false // 缺省为 false
         },
-
+        showDataShadow: false,
         // 手柄大小
         handleSize: 0,
         showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
         moveHandleSize: 0, //移动手柄的大小
         // 滚动条高度
-        height: 10,
+        height: 12,
         borderRadius: 8,
+        borderColor: 'rgba(8, 14, 15, .3)',
         // 滚动条与图表的距离
-        bottom: 10,
+        bottom: 5,
+        handleSize: 5,
+        // dataZoom-slider组件离容器下侧的距离
+        // bottom: 0,
+        // 两侧缩放手柄的 icon 形状
+        handleIcon:
+          'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 画一个圆形
+        handleStyle: {
+          borderWidth: 5,
+          borderCap: 'round',
+          borderRadius: 20, // 设置滑块的圆角大小
+          color: 'rgba(27,90,169,1)', // 设置滑块的颜色
+          shadowBlur: 3, // 设置滑块阴影的模糊大小
+          shadowColor: 'rgba(0, 0, 0, 0.6)', // 设置滑块阴影的颜色
+          shadowOffsetX: 1, // 设置滑块阴影的水平偏移
+          shadowOffsetY: 2 // 设置滑块阴影的垂直偏移
+        },
         start: 0,
         // 计算初始结束百分比
         end: (6 / data.length) * 100
@@ -196,7 +214,14 @@ const initMachinerycharts = () => {
 };
 
 const initOrderChart = () => {
-  const option = {
+  let chartDom = document.getElementById('orderMain');
+  let myMachineryChart = echarts.init(chartDom);
+  let option: EChartsOption;
+
+  // prettier-ignore
+  let data = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+  option = {
     tooltip: {
       trigger: 'axis',
       axisPointer: {
@@ -204,25 +229,174 @@ const initOrderChart = () => {
         type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
       }
     },
-    legend: {},
+    legend: {
+      left: 'right', //位置
+      icon: 'roundRect', //形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
+      itemWidth: 15, // 设置宽度
+      itemHeight: 4, // 设置高度
+      itemGap: 27, // 设置间距
+      top: 10, // 设置圆角
+      data: ['入库量', '领用量'],
+      textStyle: {
+        //文字样式
+        color: '#B4CEFF',
+        fontSize: '12'
+      }
+    },
     grid: {
       left: '3%',
       right: '4%',
-      bottom: '3%',
-      containLabel: true
+      bottom: '0',
+      containLabel: true,
+      width: '90%'
     },
     xAxis: {
-      type: 'value'
+      type: 'value',
+      show: false
     },
     yAxis: {
       type: 'category',
-      data: ['Mon', 'Tue', 'Wed', 'Thu'],
+      data,
+      offset: 60,
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      inverse: true,
       axisLabel: {
         formatter: function (value, index) {
-          return '<img src="http://zmkg.cqet.top:8899/assets/product-BhSC5hsV.png" />' + value; // 不进行任何格式化
+          return `{${data[index]}|No.${index + 1}} {value|${value}}`;
+        },
+        align: 'left',
+        color: 'rgba(230, 247, 255, 1)',
+        rich: {
+          Mon: {
+            color: 'rgba(230, 247, 255, 1)',
+            fontSize: 12,
+            align: 'center',
+            width: 31,
+            height: 23,
+            backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: 'rgba(255, 208, 59, 1)' },
+              { offset: 1, color: 'rgba(255, 208, 59, 0)' }
+            ])
+          },
+          Tue: {
+            color: 'rgba(230, 247, 255, 1)',
+            fontSize: 12,
+            align: 'left',
+            width: 31,
+            height: 23,
+            backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: 'rgba(31, 189, 237, 1)' },
+              { offset: 1, color: 'rgba(31, 189, 237, 0)' }
+            ])
+          },
+          Wed: {
+            color: 'rgba(230, 247, 255, 1)',
+            fontSize: 12,
+            align: 'left',
+            width: 31,
+            height: 23,
+            backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              { offset: 0, color: 'rgba(67, 226, 203, 1)' },
+              { offset: 1, color: 'rgba(67, 226, 203, 0)' }
+            ])
+          }
         }
       }
     },
+    dataZoom: [
+      {
+        // 设置滚动条的隐藏或显示
+        show: true,
+        // 设置类型
+        type: 'slider',
+        // 设置背景颜色
+        backgroundColor: 'rgba(8, 14, 15, .3)',
+
+        // 设置选中范围的填充颜色
+        fillerColor: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(67, 226, 203, .5)' // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: 'rgba(21, 181, 230, .5)' // 100% 处的颜色
+            }
+          ],
+          global: false // 缺省为 false
+        },
+        borderColor: 'rgba(8, 14, 15, .3)',
+        borderCap: 'round',
+        // 是否显示detail，即拖拽时候显示详细数值信息
+        showDetail: false,
+        // handleSize: 0,
+        moveHandleSize: 0, //移动手柄的大小
+        borderRadius: 20, //滚动条圆角
+        // 数据窗口范围的起始数值
+        startValue: 0,
+        // 数据窗口范围的结束数值（一页显示多少条数据）
+        endValue: 4,
+        handleSize: 5,
+        // dataZoom-slider组件离容器下侧的距离
+        // bottom: 0,
+        // 两侧缩放手柄的 icon 形状
+        handleIcon:
+          'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 画一个圆形
+        handleStyle: {
+          borderWidth: 5,
+          borderCap: 'round',
+          borderRadius: 20, // 设置滑块的圆角大小
+          color: 'rgba(27,90,169,1)', // 设置滑块的颜色
+          shadowBlur: 3, // 设置滑块阴影的模糊大小
+          shadowColor: 'rgba(0, 0, 0, 0.6)', // 设置滑块阴影的颜色
+          shadowOffsetX: 1, // 设置滑块阴影的水平偏移
+          shadowOffsetY: 2 // 设置滑块阴影的垂直偏移
+        },
+        // 控制哪个轴，如果是number表示控制一个轴，
+        // 如果是Array表示控制多个轴。此处控制第二根轴
+        yAxisIndex: [0, 1],
+        // empty：当前数据窗口外的数据，被设置为空。
+        // 即不会影响其他轴的数据范围
+        filterMode: 'empty',
+        // 滚动条高度
+        width: 12,
+        // 滚动条显示位置
+        height: '70%',
+        // 距离右边
+        right: 5,
+        showDataShadow: false, //是否显示数据阴影 默认auto
+        // 组件离容器上侧的距离
+        // 如果top的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐
+        top: 'middle'
+      },
+      {
+        // 没有下面这块的话，只能拖动滚动条，
+        // 鼠标滚轮在区域内不能控制外部滚动条
+        type: 'inside',
+        // 控制哪个轴，如果是number表示控制一个轴，
+        // 如果是Array表示控制多个轴。此处控制第二根轴
+        yAxisIndex: [0, 1],
+        width: 20,
+        // 滚轮是否触发缩放
+        zoomOnMouseWheel: false,
+        // 鼠标移动能否触发平移
+        moveOnMouseMove: true,
+        // 鼠标滚轮能否触发平移
+        moveOnMouseWheel: true
+      }
+    ],
+
     series: [
       {
         name: '入库量',
@@ -234,16 +408,8 @@ const initOrderChart = () => {
         emphasis: {
           focus: 'series'
         },
-        data: [320, 302, 301, 334],
-        label: {
-          show: true,
-          position: 'insideBottomRight',
-          distance: 52,
-          align: 'left',
-          verticalAlign: 'middle',
-          rotate: 0,
-          fontSize: 16
-        }
+        data: [320, 302, 301, 334, 345, 356, 367],
+        barWidth: '3px'
       },
       {
         name: '领用量',
@@ -255,15 +421,21 @@ const initOrderChart = () => {
         emphasis: {
           focus: 'series'
         },
-        data: [120, 132, 101, 134],
-        barWidth: '3px'
+        data: [120, 132, 101, 134, 152, 103, 150],
+        showBackground: true,
+        barWidth: '3px',
+        backgroundStyle: {
+          color: 'rgba(217, 231, 255, 0.1)'
+        }
       }
     ]
   };
+  option && myMachineryChart.setOption(option);
 };
 
 onMounted(() => {
   initMachinerycharts();
+  initOrderChart();
 });
 </script>
 
@@ -276,6 +448,12 @@ onMounted(() => {
   margin-left: 14px;
   margin-bottom: vh(30);
 }
+
+#orderMain {
+  width: 100%;
+  padding-right: 14px;
+  height: vh(300);
+}
 .title {
   > img {
     width: 14px;