#

luxiaotao1123

2023-08-01 7c1e4502fe4431cc43755afc42935bbadf1464cd

 src/components/datav/cards.vue

@@ -2,7 +2,7 @@
  <div id="cards">
    <div class="chart-name">
      设备故障月趋势
      <dv-decoration-3 style="width:200px;height:20px;" />
      <dv-decoration-3 style="width:200px;height:30px;" />
    </div>
    <dv-charts :option="option" />
  </div>
@@ -16,15 +16,15 @@
  data() {
    return {
      option: {
        legend: { // 小标签
        legend: { // 图标
          data: [
            {
              name: '系列A',
              color: '#333'
              color: '#37a2da'
            },
            {
              name: '系列B',
              color: '#fff'
              color: '#32c5e9'
            }
          ],
          textStyle: {
@@ -32,10 +32,13 @@
          },
          left: 0,
          top: '50%',
          orient: 'vertical'
          orient: 'vertical',
          iconWidth: 40,  // 宽
          iconHeight: 15, // 高
          itemGap: 15 // 间距
        },
        xAxis: {
          name: '第一周',
          // name: '第一周',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          nameTextStyle: {  // 轴标题
            fill: '#fff',
@@ -55,10 +58,11 @@
        },
        yAxis: {
          name: '销售额',
          position: 'right',
          data: 'value',
          nameTextStyle: {  // 轴标题
            fill: '#fff',
            fontSize: 15
            fontSize: 15,
          },
          axisLine: { // 轴线
            style: {
@@ -78,7 +82,7 @@
            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
            type: 'bar',
            gradient: {
              color: ['#333']
              color: ['#37a2da']
            }
          },
          {
@@ -86,7 +90,7 @@
            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
            type: 'bar',
            gradient: {
              color: ['#fff']
              color: ['#32c5e9']
            }
          }
        ]
@@ -120,12 +124,14 @@
  border-top: 2px solid rgba(1, 153, 209, .5);
  box-shadow: 0 0 3px blue;
  box-sizing: border-box;
  padding: 0px 30px;
  padding: 5px 0 0 50px;  // 移动图标
  position: relative;

  .chart-name {
    display: flex; align-items: center; gap: 20px; // 动画在右侧
    font-weight: bold;
    position: absolute;
    right: 70px;
    left: 20px;
    text-align: right;
    font-size: 20px;
    top: 10px;