VChart开箱即用的多端图表库

文章目录

VChart简介

  • VisActor
    • VChart,不只是开箱即用的多端图表库,更是生动灵活的数据故事讲述者。
      • 一码多端
        • 自动适配桌面、H5、多个小程序环境
        • 本仓库包含如下包:
          vchart:核心包,VChart 图表
          react-vchart:基于 React 封装的 VChart 图表组件
          taro-vchart:基于 Taro 封装的 VChart 图表组件
          lark-vchart:基于 飞书小程序 封装的 VChart 图表组件
          tt-vchart: 基于 抖音小程序 封装的 VChart 图表组件
          block-vchart:基于 飞书小组件 封装的 VChart 图表组件
          wx-vchart:基于 微信小程序 封装的 VChart 图表组件
          docs: VChart 站点源码,同时也包含站点所有的中英文文档、图表示例代码等内容。
      • 综合应用标注、动画、流程控制、叙事模板等一系列增强功能进行叙事可视化创作

VChart使用

  • 快速上手
  • 图表示例
    • 图表分类:按名称、按目的、按形状、按组件更多示例
  • 基础的spec-基础配置包括图表类型、数据data和系列配置等等
    • 图表类型 'common' 组合图

      'area' 面积图

      'line' 折线图

      'bar' 柱状图

      'bar3d' 3D 柱状图

      'histogram' 直方图

      'histogram3d' 3D 直方图

      'rangeColumn' 区间柱图

      'rangeColumn3d' 3D 区间柱图

      'rangeArea' 区间面积图

      'map' 地图

      'pie' 饼图

      'pie3d' 3D 饼图

      'radar' 雷达图

      'rose' 玫瑰图

      'scatter' 散点图

      'sequence' 时序图

      'circularProgress' 环形进度条

      'linearProgress' 条形进度条

      'wordCloud' 词云

      'wordCloud3d' 3D 词云

      'funnel' 漏斗图

      'funnel3d' 3D 漏斗图

      'waterfall' 瀑布图

      'boxPlot' 箱型图

      'gauge' 仪表盘

      'sankey' 桑基图

      'treemap' 矩形树图

      'sunburst' 旭日图

      'circlePacking' circlePacking

      'heatmap' 热力图

    • 组件配置 'axes' 坐标轴

      'legends' 图例

      'tooltip' 提示框

      'crosshair' crosshair(鼠标hover上的十字准星线,一般只有一条竖虚线)

      'brush' 框选交互组件

      'scrollbar' 滚动条

      'dataZoom' 数据筛选滑块

      'player' 播放器

      'markLine' 标记线

      'markArea' 标记区域

      'markPoint' 标记点

      'indicator' 指标卡

      'title' 标题

  • 详细配置文档

React VChart使用

折线图示例
  • 折线图通过将一系列数据点进行连接,构造出趋势。
  • 折线图用于分析事物随时间或有序类别而变化的趋势。如果有多组数据,则用于分析多组数据随时间变化或有序类别的相互作用和影响。
js 复制代码
const spec = {
  type: 'line',
  data: {
    values: [
      { type: 'Nail polish', country: 'Africa', value: 4229 },
      { type: 'Nail polish', country: 'EU', value: 4376 },
      { type: 'Nail polish', country: 'China', value: 3054 },
      { type: 'Nail polish', country: 'USA', value: 12814 },
      { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
      { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
      { type: 'Eyebrow pencil', country: 'China', value: 5067 },
      { type: 'Eyebrow pencil', country: 'USA', value: 13012 },
      { type: 'Rouge', country: 'Africa', value: 5221 },
      { type: 'Rouge', country: 'EU', value: 3574 },
      { type: 'Rouge', country: 'China', value: 7004 },
      { type: 'Rouge', country: 'USA', value: 11624 },
      { type: 'Lipstick', country: 'Africa', value: 9256 },
      { type: 'Lipstick', country: 'EU', value: 4376 },
      { type: 'Lipstick', country: 'China', value: 9054 },
      { type: 'Lipstick', country: 'USA', value: 8814 },
      { type: 'Eyeshadows', country: 'Africa', value: 3308 },
      { type: 'Eyeshadows', country: 'EU', value: 4572 },
      { type: 'Eyeshadows', country: 'China', value: 12043 },
      { type: 'Eyeshadows', country: 'USA', value: 12998 },
      { type: 'Eyeliner', country: 'Africa', value: 5432 },
      { type: 'Eyeliner', country: 'EU', value: 3417 },
      { type: 'Eyeliner', country: 'China', value: 15067 },
      { type: 'Eyeliner', country: 'USA', value: 12321 },
      { type: 'Foundation', country: 'Africa', value: 13701 },
      { type: 'Foundation', country: 'EU', value: 5231 },
      { type: 'Foundation', country: 'China', value: 10119 },
      { type: 'Foundation', country: 'USA', value: 10342 },
      { type: 'Lip gloss', country: 'Africa', value: 4008 },
      { type: 'Lip gloss', country: 'EU', value: 4572 },
      { type: 'Lip gloss', country: 'China', value: 12043 },
      { type: 'Lip gloss', country: 'USA', value: 22998 },
      { type: 'Mascara', country: 'Africa', value: 18712 },
      { type: 'Mascara', country: 'EU', value: 6134 },
      { type: 'Mascara', country: 'China', value: 10419 },
      { type: 'Mascara', country: 'USA', value: 11261 }
    ]
  },
  title: {
    visible: true,
    text: 'Stacked line chart'
  },
  stack: true,
  xField: 'type',
  yField: 'value',
  seriesField: 'country',
  line: {
    style: {
      curveType: 'monotone'
    }
  },
  point: {
    style: {
      size: 0,
      fill: 'white',
      stroke: null,
      lineWidth: 2
    },
    state: {
      dimension_hover: {
        size: 10
      }
    }
  },
  axes:[
    {
      orient: 'left',
      label: {
        // 纵坐标轴数字千分位展示
        formatter: '{label:,}',
      }
    }
  ],
  // 十字准星线
  crosshair: {
    xField: {
      visible: true,
      line: {
        type: 'line',
        style: {
          stroke: '#5266CC',
          // 竖直准星线为实线
          lineDash: [0],
        },
      },
    },
  },
  // 缩略轴
  dataZoom: [
    {
      orient: "bottom",
      start: 0,
      // 默认滑块位置100%
      end: 1,
    },
  ],
  // 滚动条
  scrollBar: [
    {
      orient: 'bottom',
      start: 0,
      end: 0.5,
      roam: true
    }
  ],
  // 图例
  legends: [
    {
      visible: true,
      // 横向当前行列的对齐方式
      position: "middle",
      // 纵向图例位置
      orient: "top",
    },
  ],
};

const root = document.getElementById(CONTAINER_ID);
const { VChart } = ReactVChart;
const { useState, useRef, useEffect } = React;

const Card = () => {
  const chartRef = useRef(null);
  useEffect(() => {
    window['vchart'] = chartRef;
  }, []);

  const handleSelectDimension = () => {
    if (chartRef.current) {
      chartRef.current.setDimensionIndex('Rouge', {
        showTooltipOption: {
          y: 100
        }
      });
    }
  };

  return (
    <div>
      <VChart ref={chartRef} spec={spec} />
      <button
        style={{ position: 'absolute', top: 0, left: '50%', transform: 'translate(-50%, 0)' }}
        onClick={handleSelectDimension}
      >
        Select 'Rouge'
      </button>
    </div>
  );
};

ReactDom.createRoot(root).render(<Card />);

// release react instance, do not copy
window.customRelease = () => {
  ReactDom.unmountComponentAtNode(root);
};
相关推荐
岁月宁静2 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者3 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~3 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge3 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再3 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴3 小时前
Lua 模块的完整入门指南
前端·lua
浪里行舟4 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1235 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚5 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院5 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js