uniapp,cli-vue3(及vue2)引入f2；cli-vue3(以及vue2) Echarts引入总结

cli-vue3中引入f2

main全局配置

import * as F2 from '@antv/f2'
const app = createApp(App);
app.config.globalProperties.$F2 = F2;

mian.js

import { createApp } from 'vue'
import App from './App.vue'
import * as F2 from '@antv/f2'
const app = createApp(App);
app.config.globalProperties.$F2 = F2;
app.mount('#app')

vue3调用

this.$F2.Chart
方法在mounted执行

f2.vue实例

<template>
  <div class="hello">
    <canvas id="boxCanvas" style="width: 100%; height: 300px"></canvas>
  </div>
</template>
<script>
// const F2 = require('@antv/f2/lib/index')
export default {
  name: "F2Demo",
  components: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
  mounted() {
    this.boxCanvas()
    console.log(this.$F2)
  },
  // 方法集合
  methods: {
    boxCanvas() {
      var data = [
        {
          year: "2015 年",
          sales: 145,
        },
        {
          year: "2016 年",
          sales: 121,
        },
        {
          year: "2017 年",
          sales: 100,
        },
        {
          year: "2018 年",
          sales: 97,
        },
        {
          year: "2019 年",
          sales: 85,
        },
      ];
      var chart = new this.$F2.Chart({
        id: "boxCanvas",
        pixelRatio: window.devicePixelRatio,
      });
      chart.source(data, {
        sales: {
          tickCount: 5,
        },
      });
      chart.tooltip({
        showItemMarker: false,
        onShow: function onShow(ev) {
          var items = ev.items;
          items[0].name = null;
          items[0].name = items[0].title;
          items[0].value = "¥ " + items[0].value;
        },
      });
      // 让柱状图的宽度适配不同的屏幕尺寸
      var barWidth = 36 * (window.innerWidth / 375);
      chart
        .interval()
        .position("year*sales")
        .color("l(90) 0:#1890ff 1:#70cdd0")
        .size(barWidth); // 定义柱状图渐变色
      chart.render();
    },
  },
  // 计算属性
  computed: {},
};
</script>
<style scoped>
</style>

uniapp - vue3引入F2

注册全局属性

import App from './App'
import  request from '@/service/request1.js'
import * as F2 from './static/f2.min.js'

// #ifdef VUE3
import { createSSRApp } from 'vue'

import './static/iconfont.js'  // 图标引入(公司图标)
import '//at.alicdn.com/t/font_2819950_x07qxmfgezn.js'  // 图标引入(个人新增)

export function createApp() {
  const app = createSSRApp(App)
  app.config.globalProperties.$request = request
  app.config.globalProperties.$F2 = F2
  return {
    app
  }
}
console.log(createApp())
// #endif

同样注册全局属性
在子单文件组件输出this.$F2
uniapp输出 (无法拿到Chart数据,无法进行渲染)

vue3输出 (可以拿到Chart数据,可以渲染出页面)

总结:能否拿到完整的$F2是能否渲染图表的关键,uniapp只能引入单个文件,无法引入node_modules中@antv/F2文件夹,所以无法渲染
uniapp 引入

import * as F2 from './static/f2.min.js'

用npm下载方法引入F2插件,报错.

import * as F2 from '@antv/f2'

报错原因猜测:
为多端兼容考虑，建议优先从uni-app插件市场获取插件。直接从 npm 下载库很容易只兼容H5端。
非 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 模块，安装的模块及其依赖的模块使用的 API 必须是 uni-app 已有的API（兼容小程序 API）
下载的组件操作了太多window,dom,及其他原因;

echarts组件搜索

vue3引入 整个f2文件夹
import * as F2 from ‘@antv/f2’
官网:注意：如果你使用了一些三方ui框架、js库，其中引用了包括一些使用了dom、window、navigator的三方库，除非你只做H5端，否则需要更换。去uni-app的插件市场寻找替代品。如果找不到对应库，必须使用for web的库，在App端可以使用renderjs来引入这些for web的库。

cli-vue2中引入f2

main全局配置(与vue3不同)

import F2 from '@antv/f2'; 
Vue.prototype.F2 = F2;
Vue.config.productionTip = false
main.js
import Vue from 'vue'
import App from './App.vue'
import F2 from '@antv/f2';
 
Vue.prototype.F2 = F2;
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

vue2调用

this.F2.Chart
方法在mounted执行

main.js

<template>
  <div class="hello">
    <canvas id="boxCanvas" style="width: 100%; height: 300px"></canvas>
  </div>
</template>
<script>
export default {
  name: "F2Demo",
  components: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
  mounted() {
    this.boxCanvas()
  },
  // 方法集合
  methods: {
    boxCanvas() {
      var data = [
        {
          year: "2015 年",
          sales: 145,
        },
        {
          year: "2016 年",
          sales: 121,
        },
        {
          year: "2017 年",
          sales: 100,
        },
        {
          year: "2018 年",
          sales: 97,
        },
        {
          year: "2019 年",
          sales: 85,
        },
      ];
      var chart = new this.F2.Chart({
        id: "boxCanvas",
        pixelRatio: window.devicePixelRatio,
      });
      chart.source(data, {
        sales: {
          tickCount: 5,
        },
      });
      chart.tooltip({
        showItemMarker: false,
        onShow: function onShow(ev) {
          var items = ev.items;
          items[0].name = null;
          items[0].name = items[0].title;
          items[0].value = "¥ " + items[0].value;
        },
      });
      // 让柱状图的宽度适配不同的屏幕尺寸
      var barWidth = 36 * (window.innerWidth / 375);
      chart
        .interval()
        .position("year*sales")
        .color("l(90) 0:#1890ff 1:#70cdd0")
        .size(barWidth); // 定义柱状图渐变色
      chart.render();
    },
  },
};
</script>
<style scoped>
</style>

cli-vue3(以及vue2) Echarts引入

<template>
<div class="Echarts">
    <div id="main" style="width: 100%; height: 400px"></div>
</div>
</template>
<script>
import * as echarts from "echarts/core";
import { SunburstChart } from "echarts/charts";
import { TitleComponent, TooltipComponent } from "echarts/components";
// 新的接口中不再包含 Canvas 渲染器，如果需要使用 SVG 渲染模式则使用 SVGRenderer
import { CanvasRenderer } from "echarts/renderers";
echarts.use([SunburstChart, TitleComponent, TooltipComponent, CanvasRenderer]);
export default {
  name: "Home",
  data() {
    // swiper相关配置属性放在swiper_options这个变量里
    return {
      //myChart
      myChart: "",
      option: {},
    };
  },
  mounted: function () {
    //this.myChart = echarts.init(document.getElementById('main'));
    //this.myChart.setOption(this.option);
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      var that = this;
      var myChart = echarts.init(document.getElementById("main"));
      that.option = {
        title: {
          text: "四季",
          subtext: "节气图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} ",
        },
        /* legend: {
                        data:['春季','夏季','秋季','冬季'],
                    }, */
        series: {
          type: "sunburst",
          data: [
            {
              name: "春季",
              value: 12,
              itemStyle: {
                color: "hsl(10, 100%, 50%)",
                borderColor: "hsl(200, 100%, 50%)",
                borderWidth: 2,
              },
              children: [
                {
                  name: "立春",
                  value: 2,
                  itemStyle: { color: "hsl(315, 100%, 50%)" },
                },
                {
                  name: "雨水",
                  value: 2,
                  itemStyle: { color: "hsl(330, 100%, 50%)" },
                },
                {
                  name: "惊蛰",
                  value: 2,
                  itemStyle: { color: "hsl(345, 100%, 50%)" },
                },
                {
                  name: "春分",
                  value: 2,
                  itemStyle: { color: "hsl(0, 100%, 50%)" },
                },
                {
                  name: "清明",
                  value: 2,
                  itemStyle: { color: "hsl(15, 100%, 50%)" },
                },
                {
                  name: "谷雨",
                  value: 2,
                  itemStyle: { color: "hsl(30, 100%, 50%)" },
                },
              ],
            },
            {
              name: "夏季",
              value: 12,
              itemStyle: {
                color: "hsl(100, 100%, 50%)",
                borderColor: "hsl(300, 100%, 50%)",
                borderWidth: 2,
              },
              children: [
                {
                  name: "立夏",
                  value: 2,
                  itemStyle: { color: "hsl(45, 100%, 50%)" },
                },
                {
                  name: "小满",
                  value: 2,
                  itemStyle: { color: "hsl(60, 100%, 50%)" },
                },
                {
                  name: "芒种",
                  value: 2,
                  itemStyle: { color: "hsl(75, 100%, 50%)" },
                },
                {
                  name: "夏至",
                  value: 2,
                  itemStyle: { color: "hsl(90, 100%, 50%)" },
                },
                {
                  name: "小暑",
                  value: 2,
                  itemStyle: { color: "hsl(105, 100%, 50%)" },
                },
                {
                  name: "大暑",
                  value: 2,
                  itemStyle: { color: "hsl(120, 100%, 50%)" },
                },
              ],
            },
            {
              name: "秋季",
              value: 12,
              itemStyle: {
                color: "hsl(190, 100%, 50%)",
                borderColor: "hsl(20, 100%, 50%)",
                borderWidth: 2,
              },
              children: [
                {
                  name: "立秋",
                  value: 2,
                  itemStyle: { color: "hsl(135, 100%, 50%)" },
                },
                {
                  name: "处暑",
                  value: 2,
                  itemStyle: { color: "hsl(150, 100%, 50%)" },
                },
                {
                  name: "白露",
                  value: 2,
                  itemStyle: { color: "hsl(165, 100%, 50%)" },
                },
                {
                  name: "秋分",
                  value: 2,
                  itemStyle: { color: "hsl(180, 100%, 50%)" },
                },
                {
                  name: "寒露",
                  value: 2,
                  itemStyle: { color: "hsl(195, 100%, 50%)" },
                },
                {
                  name: "霜降",
                  value: 2,
                  itemStyle: { color: "hsl(210, 100%, 50%)" },
                },
              ],
            },
            {
              name: "冬季",
              value: 12,
              itemStyle: {
                color: "hsl(280, 100%, 50%)",
                borderColor: "hsl(110, 100%, 50%)",
                borderWidth: 2,
              },
              children: [
                {
                  name: "立冬",
                  value: 2,
                  itemStyle: { color: "hsl(225, 100%, 50%)" },
                },
                {
                  name: "小雪",
                  value: 2,
                  itemStyle: { color: "hsl(240, 100%, 50%)" },
                },
                {
                  name: "大雪",
                  value: 2,
                  itemStyle: { color: "hsl(255, 100%, 50%)" },
                },
                {
                  name: "冬至",
                  value: 2,
                  itemStyle: { color: "hsl(270, 100%, 50%)" },
                },
                {
                  name: "小寒",
                  value: 2,
                  itemStyle: { color: "hsl(295, 100%, 50%)" },
                },
                {
                  name: "大寒",
                  value: 2,
                  itemStyle: { color: "hsl(300, 100%, 50%)" },
                },
              ],
            },
          ],
        },
      };
      myChart.setOption(that.option);
    },
  },
};
</script>