dx-element-ui/packages/charts/src/f2ExtendCharts.vue

<template>
  <div class="nt-f2-charts">
    <div v-if="chart.chartOptions.title" class="nt-f2-header" :class="chart.chartOptions.title.line ? 'line-flex': ''">
      <div
        v-if="chart.chartOptions.title.text"
        class="title"
        :class="chart.chartOptions.title.px == 'center' ? 'center' : (chart.chartOptions.title.px == 'left' ? 'left' : 'right')"
      >
        <div class="title__icon">
          <span v-if="chart.chartOptions.title.textIcon" :class="chart.chartOptions.title.textIcon"></span>
          <span :class="chart.chartOptions.title.textStyle">{{chart.chartOptions.title.text}}</span>
        </div>
        <div v-if="chart.chartOptions.dropdown" class="nt-dropdown-menu">
          <van-dropdown-menu>
            <van-dropdown-item
              @change="dropdownChange()"
              v-model="chart.chartOptions.dropdown.valueDef"
              :options="chart.chartOptions.dropdown.list"
            />
          </van-dropdown-menu>
        </div>
      </div>
      <div
        v-if="chart.chartOptions.title.subtext"
        class="sub-title"
        :class="chart.chartOptions.title.px == 'center' ? 'center' : (chart.chartOptions.title.px == 'left' ? 'left' : 'right')"
      >{{chart.chartOptions.title.subtext}}</div>
    </div>
    <div class="f2-chart-wrapper" :class="[chart.chartOptions.class, chart.chartOptions.id]">
      <canvas :id="chart.chartOptions.id"></canvas>
    </div>
  </div>
</template>

<script>
import F2 from "@antv/f2/lib/index-all";
import { chartsInitData, drawCharts } from "./f2chart";

export default {
  name: "F2",
  props: {},
  inject: ['chart'],
  data() {
    return chartsInitData();
  },
  watch: {
    chartData: {
      deep: true,
      handler() {
        this.initData();
      }
    }
  },
  created() {},
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      if (!this.elChart) {
        let chartClass = "f2-chart-wrapper",
          el = document.getElementsByClassName(chartClass)[0],
          chartWidth = el.clientWidth || el.offsetWidth,
          chartHeight = el.clientHeight || el.offsetHeight,
          chartDom = document.getElementById(this.chart.chartOptions.id);

        chartDom.addEventListener("touchstart", function(e) {
          if (e.preventDefault) e.preventDefault();
        });
        this.elChart = new F2.Chart({
          id: this.chart.chartOptions.id,
          width: chartWidth,
          height: chartHeight,
          appendPadding: [10, 0, 20, 0],
          pixelRatio: window.devicePixelRatio
        });
      }

      drawCharts(this);
    },
    dropdownChange() {
      let selected = null,
        dList = this.dropdown.list;

      for (let i = 0; i < dList.length; i++) {
        if (dList[i].value == this.dropdown.valueDef) {
          selected = dList[i];
        }
      }

      if (selected && this.chart.chartOptions.hasOwnProperty("series")) {
        let list = [];

        this.chart.chartOptions.series.forEach(item => {
          if (selected.select.indexOf(item[selected.name]) !== -1) {
            list.push(item);
          }
        });

        this.downList = list;

        this.elChart.clear();
        drawCharts(this);
      }
    }
  }
};
</script>
<style lang="scss">
    .f2-chart-wrapper, .nt-f2-charts{
        height: 260px;
        width: 100%;
    }
</style>