区域图 Vue 组件

Framework7 带有简单的区域图组件。它生成美观的完全响应式 SVG 图表。

区域图组件

包含以下组件：

f7-area-chart

区域图属性

属性	类型	默认	描述
宽度	数字	640	生成的 SVG 图像宽度（以像素为单位）
高度	数字	320	生成的 SVG 图像高度（以像素为单位）
datasets	数组	[]	图表数据集。数组中的每个对象具有以下属性：`datasets`array `/** Dataset value / values: number[]; /* Dataset HEX color / color?: string; /* Dataset label */ label?: string;`
line-chart	布尔值	false	启用线图（而不是区域图）
axis	布尔值	false	启用图表水平（X）轴
轴标签	数组	[]	图表水平（X）轴标签。应与数据集值具有相同数量的项目
提示	布尔值	false	启用悬停提示
legend	布尔值	false	启用图表图例
切换数据集	布尔值	false	当启用时，它将在图例项目点击时切换数据集
最大轴标签数	数字	8	轴标签（刻度）的最大数量，可在轴上可见
格式化轴标签	function(label)		自定义渲染函数以格式化轴标签文本
格式化图例标签	function(label)		自定义渲染函数以格式化图例标签文本
format-tooltip	function(data)		自定义渲染函数，必须返回提示的 HTML 内容。接收`data`object `index: number; total: number; datasets: { color?: string; label: any; value: number; }`
格式化工具提示轴标签	function(label)		自定义渲染函数以格式化工具提示中的轴标签文本
格式化工具提示总数	function(total)		自定义渲染函数以格式化工具提示中的总值文本
格式化工具提示数据集	function(label, value, color)		自定义渲染函数以格式化工具提示中的数据集文本

区域图事件

事件	参数	描述
select	(index)	当启用提示时，事件将在图表悬停时触发

示例

area-chart.vue

<template>
  <f7-page>
    <f7-navbar title="Area Chart" />
    <f7-block strong-ios outline-ios>
      <p>Framework7 comes with simple to use and fully responsive Area Chart component.</p>
      <p>
        Area Chart generates SVG layout which makes it also compatible with SSR (server side
        rendering).
      </p>
    </f7-block>
    <f7-block-title>Simple Area Chart</f7-block-title>
    <f7-block strong-ios outline-ios>
      <f7-area-chart
        :datasets="[
          {
            color: '#f00',
            values: [0, 100, 250, 300, 175, 400],
          },
          {
            color: '#00f',
            values: [100, 75, 133, 237, 40, 200],
          },
          {
            color: '#ff0',
            values: [100, 300, 127, 40, 250, 80],
          },
        ]"
      />
    </f7-block>
    <f7-block-title>Area Chart With Tooltip</f7-block-title>
    <f7-block strong-ios outline-ios>
      <f7-area-chart
        tooltip
        :datasets="[
          {
            label: 'Red data',
            color: '#f00',
            values: [100, 75, 133, 237, 40, 200],
          },
          {
            label: 'Blue data',
            color: '#00f',
            values: [100, 300, 127, 40, 250, 80],
          },
          {
            label: 'Yellow data',
            color: '#ff0',
            values: [0, 100, 250, 300, 175, 400],
          },
        ]"
      />
    </f7-block>
    <f7-block-title>Area Chart With Axis</f7-block-title>
    <f7-block strong-ios outline-ios>
      <f7-area-chart
        tooltip
        axis
        :axis-labels="dates"
        :format-axis-label="(date) => axisDateFormat.format(date)"
        :format-tooltip-axis-label="(date) => tooltipDateFormat.format(date)"
        :datasets="[
          {
            label: 'Green data',
            color: '#0f0',
            values: [100, 75, 133, 237],
          },
          {
            label: 'Red data',
            color: '#f00',
            values: [100, 300, 127, 47],
          },
          {
            label: 'Yellow data',
            color: '#ff0',
            values: [0, 100, 250, 307],
          },
        ]"
      />
    </f7-block>
    <f7-block-title>Area Chart With Legend</f7-block-title>
    <f7-block strong-ios outline-ios>
      <f7-area-chart
        tooltip
        axis
        :axis-labels="dates"
        legend
        toggle-datasets
        :format-axis-label="(date) => axisDateFormat.format(date)"
        :format-tooltip-axis-label="(date) => tooltipDateFormat.format(date)"
        :datasets="[
          {
            label: 'Red data',
            color: '#f00',
            values: [100, 300, 127, 47],
          },
          {
            label: 'Blue data',
            color: '#00f',
            values: [100, 75, 133, 237],
          },
          {
            label: 'Yellow data',
            color: '#ff0',
            values: [0, 100, 250, 307],
          },
        ]"
      />
    </f7-block>
    <f7-block-title>Lines Chart</f7-block-title>
    <f7-block strong-ios outline-ios>
      <f7-area-chart
        tooltip
        axis
        :axis-labels="dates"
        legend
        toggle-datasets
        line-chart
        :format-axis-label="(date) => axisDateFormat.format(date)"
        :format-tooltip-axis-label="(date) => tooltipDateFormat.format(date)"
        :datasets="[
          {
            label: 'Red data',
            color: '#f00',
            values: [0, 300, 127, 47],
          },
          {
            label: 'Blue data',
            color: '#00f',
            values: [0, 75, 133, 237],
          },
          {
            label: 'Green data',
            color: '#0f0',
            values: [0, 100, 250, 307],
          },
        ]"
      />
    </f7-block>
  </f7-page>
</template>
<script>
import { f7Page, f7Navbar, f7BlockTitle, f7Block, f7AreaChart } from 'framework7-vue';

export default {
  components: {
    f7Page,
    f7Navbar,
    f7BlockTitle,
    f7Block,
    f7AreaChart,
  },
  setup() {
    // helpers data for axis
    const dates = [];
    const today = new Date();
    const year = today.getFullYear();
    const month = today.getMonth();
    for (let i = 0; i < 4; i += 1) {
      dates.push(new Date(year, month - (3 - i)));
    }
    const axisDateFormat = Intl.DateTimeFormat(undefined, { month: 'short', year: 'numeric' });
    const tooltipDateFormat = Intl.DateTimeFormat(undefined, { month: 'long', year: 'numeric' });
    return {
      dates,
      axisDateFormat,
      tooltipDateFormat,
    };
  },
};
</script>

改进此文档

在本页上

区域图组件
区域图属性
区域图事件
示例