vis389/src/views/bigScreen/drivingCabin/left1.vue

<template>
  <container2 title="经营责任书完成概况">
    <div class="wrap">
      <el-row class="content1">
        <el-col :span="12">
          <div id="left1" ref="left1" class="chart1"></div>
        </el-col>
        <el-col :span="12">
          <div class="record">
            <div>0进展指标 <span class="num">2</span>个</div>
          </div>
        </el-col>
      </el-row>
      <el-row class="content2">
        <el-row class="titWrap">
          <el-col :span="12" class="tit">责任书各类完成情况百分比</el-col>
          <el-col :span="12" style="text-align:right">
            <bigScreenTabs v-model="index" :titleArr="['部门', '类型']"></bigScreenTabs>
          </el-col>
        </el-row>
        <div class="tabContent" v-show="index == 0">
          <div id="left2"></div>
        </div>
        <div class="tabContent" v-show="index == 1">
          <div id="left3"></div>
        </div>
      </el-row>

    </div>
  </container2>
</template>

<script>
import rocketTit from "../components/rocketTit/index.vue";
import container2 from "../components/container2/index.vue";
import bigScreenTabs from "../components/bigScreenTabs/index.vue";
// import {Liquid} from '@antv/g2plot';
// import resize from '../../dashboard/mixins/resize'
export default {
  // mixins: [resize],
  name: 'left1',
  components: {
    rocketTit,
    container2,
    bigScreenTabs,
  },
  data () {
    return {
      index: 0,

      data: [
        {
          "year": "2021-01",
          "value": ~~(Math.random() * 100),
          "category": "部门一"
        },
        {
          "year": "2021-02",
          "value": ~~(Math.random() * 100),
          "category": "部门一"
        },
        {
          "year": "2021-03",
          "value": ~~(Math.random() * 100),
          "category": "部门一"
        },
        {
          "year": "2021-04",
          "value": ~~(Math.random() * 100),
          "category": "部门一"
        },
        {
          "year": "2021-05",
          "value": ~~(Math.random() * 100),
          "category": "部门一"
        },
        {
          "year": "2021-06",
          "value": ~~(Math.random() * 100),
          "category": "部门一"
        },
        {
          "year": "2021-01",
          "value": ~~(Math.random() * 100),
          "category": "部门二"
        },
        {
          "year": "2021-02",
          "value": ~~(Math.random() * 100),
          "category": "部门二"
        },
        {
          "year": "2021-03",
          "value": ~~(Math.random() * 100),
          "category": "部门二"
        },
        {
          "year": "2021-04",
          "value": ~~(Math.random() * 100),
          "category": "部门二"
        },
        {
          "year": "2021-05",
          "value": ~~(Math.random() * 100),
          "category": "部门二"
        },
        {
          "year": "2021-06",
          "value": ~~(Math.random() * 100),
          "category": "部门二"
        },
      ]
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
      this.initLine()
    })
  },
  beforeDestroy () {

  },
  methods: {
    initChart () {
      const { Liquid } = G2Plot;
      const liquidPlot = new Liquid(this.$refs.left1, {
        percent: 0.25,
        statistic: {
          content: {
            style: {
              color: 'rgb(255,255,255)',
              fontSize: 18,
            },
            customHtml: (container, view, { percent }) => {
              const text = `总体<br/>完成情况 ${(percent * 100).toFixed(0)}%`;
              return `<div>${text}</div>`;
            },
          }
        },
        outline: {
          border: 4,
          style: {
            stroke: 'l(0) 0:rgba(89, 184, 244, 1) 0.5:rgba(106, 232, 216, 1) 1:rgba(88, 151, 240, 1)'
          }
        },
        wave: {
          length: 128,
        },
      });
      console.log(liquidPlot.render())
      // liquidPlot.render();
    },
    initLine () {
      const { Line } = G2Plot;
      let arr = this.data;
      const line = new Line('left2', {
        data: arr,
        xField: 'year',
        yField: 'value',
        padding: 'auto',
        seriesField: 'category',
        legend: {
          position: 'top',
          title: {
            style: {
              color: '#ffffff'
            }
          },
          itemName: {
            style: {
              fill: '#ffffff'
            }
          }
        },
        // 配置折线趋势填充
        area: {
          style: {
            fillOpacity: 0.15,
          },
        },
        xAxis: {
          type: 'time',
          label: {
            // 数值格式化为千分位
            style: {
              stroke: 'rgba(145, 213, 254, 0.1)',
              fill: '#ffffff',
            }
          },
        },

        yAxis: {
          label: {
            // 数值格式化为千分位
            formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
            style: {
              stroke: 'rgba(145, 213, 254, 0.1)',
              fill: '#ffffff',
            }
          },
          grid: {
            line: {
              style: {
                stroke: 'rgba(145, 213, 254, 0.1)',
                fill: '#ffffff',
                lineWidth: 2,
                lineDash: [4, 5],
                strokeOpacity: 0,
                cursor: 'pointer'
              }
            }
          },
          line: {
            style: {
              stroke: 'rgba(145, 213, 254, 0.1)',
              fill: '#ffffff',
              lineWidth: 2,
            }
          }
        },
      });
      const line1 = new Line('left3', {
        data: arr,
        xField: 'year',
        yField: 'value',
        padding: 'auto',
        seriesField: 'category',
        legend: {
          position: 'top',
          title: {
            style: {
              color: '#ffffff'
            }
          }
        },
        // 配置折线趋势填充
        area: {
          style: {
            fillOpacity: 0.15,
          },
        },
        xAxis: {
          type: 'time',
        },
        yAxis: {
          label: {
            // 数值格式化为千分位
            formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
          },
        },
      });

      line.render();
      line1.render();
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.content1 {
  height: 200px;
  .chart1 {
    margin: 0 auto;
    width: 192px;
    height: 192px;
    background: transparent;
  }

  .record {
    display: flex;
    align-items: center;
    height: 192px;
    padding-left: 30px;
    > div {
      flex: 1;
      position: relative;
      ::before {
        content: "";
        display: inline-block;
        width: 9px;
        height: 9px;
        background: #ffffff;
        border-radius: 50%;
        position: absolute;
        left: -18px;
        top: 18px;
      }
    }
  }
}

.num {
  font-size: 30px;
  font-family: Roboto-BlackItalic, Roboto;
  font-weight: normal;
  color: #91d5fe;
  vertical-align: sub;
  //   margin-right: 3px;
}

.content2 {
  padding: 20px;
  flex: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .titWrap {
    height: 30px;
  }

  .tabContent {
    flex: 1;
  }
  .tabContent > div {
    width: 100%;
    height: 100%;
  }

  .tit {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    line-height: 22px;
    position: relative;
    padding-left: 15px;
  }
  .tit::after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 0px;
    width: 4px;
    height: 16px;
    background: #00ffff;
  }
}
</style>