小程序使用AntV F2三柱状图,横向左右滑动

效果如图:
在这里插入图片描述
注意:数据格式的number不可有双引号。

const app = getApp()
let chart = null;
function initChart(canvas, width, height,) {
    // 使用 F2 绘制图表
  const data = [{
   index: 0, name: "客单价", lx: "迎风店", number: 34.64},
				{
   index: 0, name: "客流量", lx: "迎风店", number: 14},
				{
   index: 0, name: "销售金额", lx: "迎风店", number: 485.01},
				{
   index: 1, name: "客单价", lx: "东风店", number: 37.87},
				{
   index: 1, name: "客流量", lx: "东风店", number: 20},
				{
   index
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 19
    评论
您好,以下是使用 React 和 G2Plot 2.4.7 版本画折柱的一个简单示例: ```javascript import React, { useEffect } from 'react'; import { Line, Column } from '@antv/g2plot'; const data = [ { year: '1951 年', sales: 38 }, { year: '1952 年', sales: 52 }, { year: '1956 年', sales: 61 }, { year: '1957 年', sales: 145 }, { year: '1958 年', sales: 48 }, { year: '1959 年', sales: 38 }, { year: '1960 年', sales: 38 }, { year: '1962 年', sales: 38 }, ]; function Chart() { useEffect(() => { const linePlot = new Line('container', { data, xField: 'year', yField: 'sales', }); linePlot.render(); const columnPlot = new Column('container', { data, xField: 'year', yField: 'sales', seriesField: 'year', columnWidthRatio: 0.4, }); columnPlot.render(); return () => { linePlot.destroy(); columnPlot.destroy(); }; }, []); return <div id="container" />; } export default Chart; ``` 在上述代码中,我们使用了 React 的函数式组件,并在组件的 `useEffect` 钩子中创建了折线和折柱。其中,折线的数据源是 `data`,`xField` 设置为 `year`,`yField` 设置为 `sales`。柱状图的数据源和 `xField`、`yField` 设置同折线一致,`seriesField` 设置为 `year`,表示将折柱按照年份进行区分。`columnWidthRatio` 设置为 `0.4`,表示柱状图的宽度占比为 0.4。最后,我们将容器的 `id` 设置为 `container`,并在组件中返回该容器作为表的展示。在组件的 `return` 语句中,我们返回了一个 `div` 元素,并设置了其 `id` 为 `container`。最后,我们在 `useEffect` 钩子的返回函数中调用了 `destroy` 方法销毁表,以避免内存泄漏。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值