移动端taro中可视化探索实践

最新推荐文章于 2024-06-01 09:51:55 发布
最新推荐文章于 2024-06-01 09:51:55 发布
阅读量1k 收藏 5
点赞数 4
分类专栏： Taro 文章标签： echarts react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/waillyer/article/details/119874814
版权

这里写目录标题

技术栈

react ，微信小程序，taro -taro-ui

测试情况
在taro中测试
Echart正常使用
F2正常使用
Ant Design Charts报错

对比

在这里插入图片描述

ECharts

ECharts 和微信小程序官方团队合作，提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。

https://echarts.apache.org

GitHub地址 ecomfe/echarts-for-weixin
在这里插入图片描述
F2
专注于移动端的可视化解决方案，兼容 H5/小程序/Weex 等多端环境
官网https://antv.vision/zh

在这里插入图片描述

地址https://github.com/antvis/g2
在这里插入图片描述

在项目中使用echart

根据文档说明，在echart官网定制，导出插件引入项目中
在这里插入图片描述

index.config.js
export default {
    navigationBarTitleText: '柱状图',
    usingComponents: {
        // 定义需要引入的第三方组件
        // 1. key 值指定第三方组件名字，以小写开头
        // 2. value 值指定第三方组件 js 文件的相对路径
        'ec-canvas': '../../components/ec-canvas/ec-canvas',
    },
};


import React, { useState } from 'react';

import * as echarts from '@/components/ec-canvas/echarts.js';
import { View } from '@tarojs/components';
import './index.scss';

let chart = null;
function initChart(canvas, width, height, dpr) {
    chart = echarts.init(canvas, null, {
        width,
        height,
        devicePixelRatio: dpr, // new
    });
    canvas.setChart(chart);

    const option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line',
            },
        ],
    };

    chart.setOption(option);
    return chart;
}

export default () => {
    const [ec] = useState({ onInit: initChart });
    return (
        <View className="bar">
            <ec-canvas id="mychart-dom-area" canvas-id="mychart-line" ec={ec} />
        </View>
    );
};

F2移动可视化方案

https://f2.antv.vision/zh/docs/tutorial/getting-started
yarn add @antv/f2 --save
在这里插入图片描述

import React, { useEffect } from "react";
import { View, Text, Canvas } from "@tarojs/components";
import { AtButton } from "taro-ui";
import F2 from "@antv/f2";
import "./index.scss";

export default () => {
  const initChart = () => {
    // F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
    const data = [
      { genre: "Sports", sold: 275 },
      { genre: "Strategy", sold: 115 },
      { genre: "Action", sold: 120 },
      { genre: "Shooter", sold: 350 },
      { genre: "Other", sold: 150 },
    ];

    // Step 1: 创建 Chart 对象
    const chart = new F2.Chart({
      id: "myChart",
      pixelRatio: window.devicePixelRatio, // 指定分辨率
    });

    // Step 2: 载入数据源
    chart.source(data);

    // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
    chart.interval().position("genre*sold").color("genre");

    // Step 4: 渲染图表
    chart.render();
  };
  useEffect(() => {
    initChart();
  }, []);
  return (
    <>
      <View>
        <Text>Hello world!</Text>
        <Canvas style="width: 300px; height: 200px;" canvasId="myChart" />
      </View>
    </>
  );
};



import Taro from "@tarojs/taro";
import React, { useEffect } from "react";
import { View, Text, Canvas } from "@tarojs/components";
import F2 from "@antv/f2";
import "./index.scss";

export default () => {
  const initChart = (config) => {
    // F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
    const data = [
      { genre: "Sports", sold: 275 },
      { genre: "Strategy", sold: 115 },
      { genre: "Action", sold: 120 },
      { genre: "Shooter", sold: 350 },
      { genre: "Other", sold: 150 },
    ];

    // Step 1: 创建 Chart 对象
    // const chart = new F2.Chart({
    //   id: "myChart",
    //   pixelRatio: window.devicePixelRatio, // 指定分辨率
    // });
    console.log("Object.assign", Object.assign(config));
    const chart = new F2.Chart(
      Object.assign(config, {
        appendPadding: [10, 15, 10, 15],
        // 预留展示tooltip高度
        padding: [40, "auto", "auto"],
      })
    );

    // Step 2: 载入数据源
    chart.source(data);

    // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
    chart.interval().position("genre*sold").color("genre");

    // Step 4: 渲染图表
    chart.render();
  };
  const onWxCanvas = () => {
    const query = Taro.createSelectorQuery();
    query
      .select("#" + "chart-id")
      .fields({
        node: true,
        size: true,
      })
      .exec((res) => {
        console.log("res", res);
        const { node, width, height } = res[0];
        const context = node.getContext("2d");
        const pixelRatio = Taro.getSystemInfoSync().pixelRatio;
        // 高清设置
        node.width = width * pixelRatio;
        node.height = height * pixelRatio;
        //  chart全局设置
        const appendPadding = 5;
        const config = { context, width, height, pixelRatio, appendPadding };
        console.log("config", config);
        const chart = initChart(config);
        console.log("chart", chart);
        if (chart) {
          //   this.chart = chart;
          //   this.canvasEl = chart.get("el");
        }
      });
  };

  useEffect(() => {
    setTimeout(() => {
      onWxCanvas();
      console.log("999");
    }, 500);
  }, []);
  return (
    <>
      <View>
        <Text>Hello world!</Text>
        <Canvas
          style="width: 300px; height: 200px;"
          //   canvasId="chart-id"
          type="2d"
          id="chart-id"
        />
      </View>
    </>
  );
};

初步选用f2

封装Canvas组件

F2Canvas.js
在这里插入图片描述

封装组件

F2Canvas
src/components/F2Canvas/index.jsx

import React, { useEffect, useState } from "react";
import Taro from "@tarojs/taro";
import { Canvas } from "@tarojs/components";

function wrapEvent(e) {
  if (!e) return;
  if (!e.preventDefault) {
    e.preventDefault = function () {};
  }
  return e;
}

export default ({ className, style, id, onInit }) => {
  const [currentChart, setCurrentChart] = useState("");
  const [canvasEl, seCanvasEl] = useState("");
  console.log("onInit", onInit);

  const onWxCanvas = () => {
    const query = Taro.createSelectorQuery();
    query
      .select("#" + id)
      .fields({
        node: true,
        size: true,
      })
      .exec((res) => {
        console.log("res", res);
        const { node, width, height } = res[0];
        const context = node.getContext("2d");
        const pixelRatio = Taro.getSystemInfoSync().pixelRatio;
        // 高清设置
        node.width = width * pixelRatio;
        node.height = height * pixelRatio;
        //  chart全局设置
        const appendPadding = 5;
        const config = { context, width, height, pixelRatio, appendPadding };
        console.log("config", config);
        const chart = onInit(config);

        if (chart) {
          const CH = chart;
          const El = chart.get("el");
          console.log("CH", CH, El);
          seCanvasEl();
        }
      });
  };
  useEffect(() => {
    setTimeout(() => {
      onWxCanvas();
      console.log("999");
    }, 500);
  }, []);

  const touchStart = (e) => {
    if (canvasEl) {
      canvasEl.dispatchEvent("touchstart", wrapEvent(e));
    }
  };

  const touchMove = (e) => {
    e.stopPropagation();
    e.preventDefault();
    if (canvasEl) {
      canvasEl.dispatchEvent("touchmove", wrapEvent(e));
    }
  };

  const touchEnd = (e) => {
    if (canvasEl) {
      canvasEl.dispatchEvent("touchend", wrapEvent(e));
    }
  };

  return (
    <Canvas
      className={className}
      style={style}
      type="2d"
      id={id}
      onTouchStart={touchStart}
      onTouchMove={touchMove}
      onTouchEnd={touchEnd}
    />
  );
};

src/components/LineChart/index.jsx

import React, { Component } from "react";
import PropTypes from "prop-types";
import F2Canvas from "../F2Canvas";
import F2 from "@antv/f2";

export default ({ data, id, xField, yField, color }) => {
  const initChart = (config) => {
    const chart = new F2.Chart(
      Object.assign(config, {
        appendPadding: [10, 15, 10, 15],
        // 预留展示tooltip高度
        padding: [40, "auto", "auto"],
      })
    );

    // Step 2: 载入数据源
    chart.source(data, {
      value: {
        tickCount: 5,
        min: 0,
      },
      date: {
        type: "timeCat",
        range: [0, 1],
        tickCount: 3,
      },
    });

    // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
    chart
      .line()
      .position(`${xField}*${yField}`)
      .color(color || "#2FC25B");

    // Step 4: 渲染图表
    chart.render();
  };
  return (
    <F2Canvas
      id={id}
      style={{ width: "100%", height: "200px" }}
      onInit={initChart}
    ></F2Canvas>
  );
};

src/components/HistogramChart

import React, { Component } from "react";
import PropTypes from "prop-types";
import F2Canvas from "../F2Canvas";
import F2 from "@antv/f2";

export default ({ data, id, xField, yField, color }) => {
  const initChart = (config) => {
    const chart = new F2.Chart(
      Object.assign(config, {
        appendPadding: [10, 15, 10, 15],
        // 预留展示tooltip高度
        padding: [40, "auto", "auto"],
      })
    );

    // Step 2: 载入数据源
    chart.source(data);

    // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
    chart
      .interval()
      .position(`${xField}*${yField}`)
      .color(color || "#2FC25B");

    // Step 4: 渲染图表
    chart.render();
  };
  return (
    <F2Canvas
      id={id}
      style={{ width: "100%", height: "200px" }}
      onInit={initChart}
    ></F2Canvas>
  );
};

使用组件

import { useEffect } from "react";
import Taro from "@tarojs/taro";
import { View, Text, Button } from "@tarojs/components";
import HistogramChart from "../../components/HistogramChart";
import LineChart from "../../components/LineChart";
import "./index.scss";

export default () => {
  const data = [
    { genre: "Sports", sold: 275 },
    { genre: "Strategy", sold: 115 },
    { genre: "Action", sold: 120 },
    { genre: "Shooter", sold: 350 },
    { genre: "Other", sold: 150 },
  ];
  const dataLine = [
    {
      date: "2017-06-05",
      value: 116,
    },
    {
      date: "2017-06-06",
      value: 129,
    },
    {
      date: "2017-06-07",
      value: 135,
    },
    {
      date: "2017-06-08",
      value: 86,
    },
    {
      date: "2017-06-09",
      value: 73,
    },
    {
      date: "2017-06-10",
      value: 85,
    },
    {
      date: "2017-06-11",
      value: 73,
    },
    {
      date: "2017-06-12",
      value: 68,
    },
    {
      date: "2017-06-13",
      value: 92,
    },
    {
      date: "2017-06-14",
      value: 130,
    },
    {
      date: "2017-06-15",
      value: 245,
    },
    {
      date: "2017-06-16",
      value: 139,
    },
    {
      date: "2017-06-17",
      value: 115,
    },
    {
      date: "2017-06-18",
      value: 111,
    },
  ];
  const config01 = {
    id: "confi01",
    data,
    xField: "genre",
    yField: "sold",
    color: "#2FC25B",
  };
  const config02 = {
    id: "confi02",
    data: dataLine,
    xField: "date",
    yField: "value",
    color: "#2FC25B",
  };
  return (
    <View>
      <Text>图1</Text>
      <HistogramChart {...config01}></HistogramChart>
      <Text>图2</Text>
      <LineChart {...config02}></LineChart>
    </View>
  );
};

在这里插入图片描述

优化

F2Canvas组件通过chartList依赖

  useEffect(() => {
    setTimeout(() => {
      onWxCanvas();
    }, 500);
  }, [chartList]);

import React, { useState, useEffect } from "react";
import { useDidShow } from "@tarojs/taro";
import { View, Text } from "@tarojs/components";
import F2 from "@antv/f2";
import F2Canvas from "../../components/F2Canvas";
import {
  AtNoticebar,
  AtTabs,
  AtTabsPane,
  AtCard,
  AtActivityIndicator,
} from "taro-ui";
import { useSelector, useDispatch } from "react-redux";
import LineChart from "../../components/LineChart";
import "./index.scss";

export default () => {
  const dispatch = useDispatch();
  const { list, chartList, noticeType } = useSelector((state) => state.message);
  const loading = useSelector((store) => store.loading);
  const [current, setCurrent] = useState(0);
  const [lineList, setLineList] = useState([]);
  const tabList = [
    { title: "公告", noticeType: 1 },
    { title: "通知", noticeType: 2 },
    { title: "统计", noticeType: 3 },
  ];
  useDidShow(() => {
    dispatch({
      type: "message/questMassage",
    });
  });

  console.log("list", list);
  const handleClick = (val) => {
    console.log(tabList[val]);
    setCurrent(val);
    dispatch({
      type: "message/overrideStateProps",
      payload: {
        noticeType: tabList[val].noticeType,
      },
    });
    dispatch({
      type: "message/questMassage",
    });
  };
  const notice = `${list[0]?.noticeTitle || ""}  ${list[0]?.createBy || ""}  ${
    list[0]?.createTime || ""
  }`;
  const config0R = {
    id: "confi02",
    data: list,
    xField: "date",
    yField: "value",
    color: "#2FC25B",
  };
  console.log("list", list);
  const initChart = (config) => {
    const chart = new F2.Chart(
      Object.assign(config, {
        appendPadding: [10, 15, 10, 15],
        // 预留展示tooltip高度
        padding: [40, "auto", "auto"],
      })
    );

    // Step 2: 载入数据源
    chart.source(chartList, {
      value: {
        tickCount: 5,
        min: 0,
      },
      date: {
        type: "timeCat",
        range: [0, 1],
        tickCount: 3,
      },
    });

    // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
    chart
      .line()
      .position(`${config0R.xField}*${config0R.yField}`)
      .color(config0R.color || "#2FC25B");

    // Step 4: 渲染图表
    chart.render();
    return chart;
  };
  console.log("chartList", chartList);
  return (
    <>
      <AtActivityIndicator
        isOpened={loading.effects["message/questMassage"]}
        mode="center"
        size={32}
        content="加载中..."
      ></AtActivityIndicator>
      <View className="index">
        <AtNoticebar marquee icon="volume-plus">
          {notice}
        </AtNoticebar>
        <AtTabs current={current} tabList={tabList} onClick={handleClick}>
          <AtTabsPane current={current} index={0}>
            {list.length > 0
              ? list?.map((item) => {
                  return (
                    <AtCard
                      note={item.createTime}
                      extra={`${item.createBy}`}
                      title={item.noticeTitle}
                      style={{ marginTop: "2px" }}
                      key={item.mesId}
                    >
                      {item.content}
                    </AtCard>
                  );
                })
              : null}
          </AtTabsPane>
          <AtTabsPane current={current} index={1}>
            {list.length > 0
              ? list?.map((item) => {
                  return (
                    <AtCard
                      note={item.createTime}
                      extra={`${item.createBy} `}
                      title={item.noticeTitle}
                      style={{ marginTop: "2px" }}
                      key={item.mesId}
                    >
                      {item.content}
                    </AtCard>
                  );
                })
              : null}
          </AtTabsPane>
          <AtTabsPane current={current} index={2}>
            <F2Canvas
              id="confi02"
              style={{ width: "100%", height: "200px" }}
              onInit={initChart}
              chartList={chartList}
            ></F2Canvas>
          </AtTabsPane>
        </AtTabs>
      </View>
    </>
  );
};
waillyer
关注
专栏目录
taro-form:Taro可视化表单编辑器
05-07
Taro表单编辑器 基于Taro3和react-dnd组件开发的表单编辑器，将支持多个平台（小程序、h5、app）目前仍在开发中，因接口限制，编辑模式仅支持在h5端。 预览版 当前版本任处于开发阶段，可能存在api改版或者bug修复导致的不兼容问题，请谨慎用于项目中。 在线预览 表单预览： 编辑模式： 截图 TaroForm交流群 qq群：816711392 使用 h5端： 将代码克隆到本地，执行 yarn 或者 npm install ，安装依赖，然后执行 yarn dev:h5 或者 npm run dev:h5 启动h5版本，跳转到main/edit/index页面即可进入编辑模式 小程序端： 将代码克隆到本地，执行 yarn 或者 npm install ，安装依赖，然后执行 yarn dev:weapp 或者 npm run dev:weapp 启动微信小程序版本，微信小程序仅支
蚂蚁金服移动端可视化解决方案 F2 3.2 正式发布
weixin_33762321的博客
08-28 434
F2，一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（node, 小程序，weex）。完备的图形语法理论，满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。 特性 专注移动，体验优雅 在“准确、有效、清晰、美”的可视化原则的基础之上，结合移动设备特性（规格不一，计算能力不足和触摸界面）以及人们对移动设备的使用习惯，我们从设计、性能以及多端异...
探索数据可视化的无限可能：Taro-React-Echarts
最新发布
gitblog_00076的博客
06-01 378
探索数据可视化的无限可能：Taro-React-Echarts taro-react-echarts ???? 基于Taro3、React的H5和微信小程序多端图表组件 项目地址: https://gitcode.com/gh_mirrors/ta/taro-rea...
移动端可视化设计与电脑端大不一样，你晓得吗？
2401_82616673的博客
02-10 616
移动设备具有不同的屏幕尺寸和方向，设计师需要考虑如何进行响应式设计，以适应不同的屏幕和设备。设计师需要考虑如何将功能和内容组织得更加简洁和易于访问，避免过多的层级和复杂的操作。：移动设备的屏幕尺寸相对较小，需要更加紧凑和简洁的布局设计。综上所述，移动端可视化设计需要考虑屏幕尺寸和布局、交互方式、导航和菜单、图表和图形的呈现以及响应式设计等因素，以提供适合移动设备的用户体验。移动设备的屏幕尺寸较小，设计师需要考虑如何在有限的空间内有效地展示图表和图形。
移动端数据可视化方案的挑战与设计
油墨香^-^的博客
07-06 1379
什么是数据可视化在进入正题之前，我们简单看一下什么是数据可视化，数据可视化通俗地讲就是将抽象数据进行数据可视化表达，比如下面的例子，我们把抽象的统计数据进行可视化表达后形成 折线图、柱状图、饼图等，这些都是数据可视化。当然而除了统计数据外，还有关系数据，比如我们的关系图，他是将关系数据可视化后的结果，这些都是我们所说的数据可视化。什么是移动端数据可视化方案在看完什么是数据可视化后，我们再来看看什么是移动端数据可视化，移动端数据可视化说白了就是我们在移动端实现的数据可视化，比如下面的一些场景。需求永远在预期之
taro中可视化探索.doc
09-02
在Taro中进行可视化探索，意味着我们可以利用它来构建丰富的图形界面和交互式用户体验，尤其在数据可视化、地图展示以及图表设计等方面具有广泛的应用。 首先，Taro 支持React技术栈，这意味着开发者可以使用React...
移动端taro笔记(个人笔记)
10-31
【移动端Taro笔记(个人笔记)】 Taro是一款开源的多端开发框架，它允许开发者使用React语法编写代码，然后可以编译到微信小程序、H5、支付宝小程序、百度小程序等多个平台，极大地提高了代码的复用性和开发效率。这...
微信小程序基于Taro的分享图片功能实践详解
10-16
在本文中，我们将深入探讨如何在微信小程序中利用Taro框架实现分享图片的功能。Taro是一个多端开发框架，它允许开发者使用React语法编写代码，然后编译成不同平台的应用，如微信小程序、H5、NativeApp等。微信小程序...
vue+Echars移动端可视化页面
热门推荐
weixin_51935690的博客
05-20 2万+
实现代码： <template> <div class="wrapper"> <span style="color:#fff;float:left;" @click="$router.back(-1)"><i class="iconfont icon-jiantou" style="margin-top: 10px;margin-left:10px;" ></i></s.
taro-designer:基于ReactDevelopment可视化化拖拽，页面构建，使用tarojs自带组件库，生成继承生成。主要取自tarojs组件库支持的H5和微信小程序的交集进行属性编辑
03-23
临时设计师 基于React开发可视化拖曳，页面构建，使用tarojs自带组件库，生成原始生成。主要取下tarojs组件库支持的H5和微信小程序的交集进行属性编辑。 访问地址 技术栈 React+ Mobx +云React+ Tarojs 目的 提高互动多端开发的效率，降低开发门云，通过拖拉拽就可生成基本的页面UI 使用 // clone code http://gitlab.platdep.shuyun.com/fe/public/taro-designer.git // 进入工程 cd taro-designer // 安装依赖 yarn install // 启动 yarn start 项目结构 build-utils // webpack相关配置 webpack.dev.js // webpack development mode config webpack.p
多端统一开发框架 Taro 1.0 正式发布
凹凸实验室
09-18 514
在 2018.6.7 我们对外开源了 多端统一开发框架——Taro。Taro 是一个多端统一开发框架，它支持使用 React 的开发方式来编写可以同时在微信小程序、Web 、React Native 等多个平台上运行的应用，帮助开发者提升开发效率，改善开发体验，降低多端研发成本。自开源以来，Taro 一直广受业界关注，其原理与思想也得到了广泛开发者的认可，这对于我们来说无疑是一件令人振奋的事。但是...
随记：Taro之小程序+echarts
xiaomomi的博客
11-02 492
随记：Taro之小程序+echarts echarts-taro3-react文档 npm依赖安装不适配 图表无法显示，文件下载可以放到components文件下； 将echarts.js里的{t.addEventListener.(e,n,i)}改为 {t.addEventListener?.(e,n,i)} 如不更改还是会发生不显示； ** 子组件 柱状图 EChartBar** import { useEffect, useState, useRef } from 'react' import {
探索未来设计的新可能：Taro Designer
gitblog_00074的博客
04-02 434
探索未来设计的新可能：Taro Designer 项目地址:https://gitcode.com/silence717/taro-designer 项目简介 Taro Designer 是一个基于 Taro 框架和 React 技术栈构建的多端设计工具。它旨在为开发者提供一个可视化、组件化的设计平台，使得前端开发者可以更高效地进行页面布局和组件设计，降低开发复杂度，提升工作效率。 技术分析 基...
探索Taro Design：一款跨平台UI组件库的深度解析
gitblog_00011的博客
03-31 470
探索Taro Design：一款跨平台UI组件库的深度解析 项目地址:https://gitcode.com/ShaoGongBra/taro-design 项目简介 Taro Design 是一个专为多端开发设计的高质量、高度可定制化的UI组件库。基于React，它完美地结合了Taro框架的优势，适用于微信小程序、H5、React Native等多端应用场景，旨在提供一致且高效的用户体验。 技术...
以mpVue、Taro为代表的小程序开发效率提升工具
POHOU23的博客
08-03 422
尽管，大部分团队已经意识到创新和高效很重要，但却依旧难以”敏捷“起来。这些因素导致各环节和部门总体的效率不高，包括持续发布能力低、需求响应周期长、交付吞吐率低、交付过程质量低、交付质量低，业务部门提出的创新性需求也很难及时响应。这几年为顺应效率提升，高频的技术换新让开发者又爱又恨，所谓的“学不动了”，不单单包括语言，框架、工具还有很多理念思维上的内容。但若学无所用，它的性价比就会下降。那么，小程序如何帮助开发者最大化实现技术先进、研发高效和投入成本低？...
TaroEcharts-各种图表在Taro中的实践
weixin_34146805的博客
01-17 2612
随着React的快速发展，我们也越来越接受它的写法和思想，如今小程序如火中天，普通的编译模式早已不适应开发者的需求。人们在不断的寻求一种React能够在小程序中编译的语言框架，因此Taro便诞生了。宇宙中最强的执行官。它支持使用 React 的开发方式来编写可以同时在微信小程序、Web 、React Native 等多个平台上运行的应用。经过不断地迭代完善，已经让 Taro 浴火重生。 TaroE...
taro引入f2图表_关于在小程序项目中使用图表插件AntV（即F2）
weixin_39568706的博客
12-20 970
前言：最近嘛从开发H5和各种图表系统被拉到来开发小程序，拿到的一个项目里面就涉及几个图表，用canvas是能实现效果，但是周期长而且还不一定好看稳定。所以嘛就上网找了相关资料。发现有Echarts为小程序专门改写的一套，但是类型不是很全，就转到了AntV这里来，阿里写的F2内容也挺全的。所以就采用了。在这里贴链接感谢这位码友的分享给我的灵感先 https://www.jianshu.com/p/6...
Taro3.0 使用Echarts 画折线图和饼图
DyuanH的博客
11-24 3387
前言 最近项目有数据统计展示的需求，考虑使用echarts，在开发的过程中遇到挺多问题，本文就这开发过程做个小结。 环境及工具 Taro版本：3.0.7 echarts插件：使用了taro物料市场的echarts插件 物料地址： https://taro-ext.jd.com/plugin/view/5f648e4c0dd8313026e0942d 使用过程 安装插件 npm i echarts-taro3-react 使用过程 饼图 pie.jsx import React, { Compo
阿里前端智能工程化探索：Pipcook与DSL实践
在这个报告中，刘亚中详细阐述了阿里巴巴前端团队在智能工程化领域的研究和实践。首先，他提到DSL，这是一种为了特定应用领域而设计的语言，可以帮助开发者更高效地编写代码。例如，DSL可以用于生成React或Rax应用的...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值