#

luxiaotao1123

2023-08-01 36e019c7ec06b82a6242d2c092e95d7b23466175

 src/components/datav/cards.vue

@@ -2,7 +2,7 @@
  <div id="cards">
    <div class="chart-name">
      设备故障月趋势
      <dv-decoration-3 style="width:120px;height:20px;" />
      <dv-decoration-3 style="width:200px;height:30px;" />
    </div>
    <dv-charts :option="option" />
  </div>
@@ -16,7 +16,7 @@
  data() {
    return {
      option: {
        legend: { // 小标签
        legend: { // 图标
          data: [
            {
              name: '系列A',
@@ -32,7 +32,10 @@
          },
          left: 0,
          top: '50%',
          orient: 'vertical'
          orient: 'vertical',
          iconWidth: 40,  // 宽
          iconHeight: 15, // 高
          itemGap: 15 // 间距
        },
        xAxis: {
          // name: '第一周',
@@ -59,7 +62,7 @@
          data: 'value',
          nameTextStyle: {  // 轴标题
            fill: '#fff',
            fontSize: 15
            fontSize: 15,
          },
          axisLine: { // 轴线
            style: {
@@ -121,12 +124,14 @@
  border-top: 2px solid rgba(1, 153, 209, .5);
  box-shadow: 0 0 3px blue;
  box-sizing: border-box;
  padding: 0 0 0 50px;
  padding: 5px 0 0 50px;  // 移动图标
  position: relative;

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