赞助商成为赞助商

区域图 Vue 组件

Framework7 附带一个简单的区域图组件。它能产生美观的、完全响应式的 SVG 图表。

面积图组件

包含以下组件

面积图属性

属性类型默认描述
width数字640生成的 SVG 图像宽度（以像素为单位）
height数字320生成的 SVG 图像高度（以像素为单位）
datasets数组[]图表数据集。datasets 数组中的每个对象都具有以下属性
/** Dataset value */
values: number[];
/** Dataset HEX color */
color?: string;
/** Dataset label */
label?: string;
line-chart布尔值false启用线形图（代替面积图）
axis布尔值false启用图表水平（X）轴
axis-labels数组[]图表水平（X）轴标签。应该与数据集值的数量相同
工具提示布尔值false将工具提示置于悬停处
说明布尔值false启用图表说明
切换数据集布尔值false启用此功能后，它会在点击说明项时切换数据集
最大轴标签数字8在轴上可见的轴标签（刻度）的最大数量
格式化轴标签function(label)自定义呈现函数以格式化轴标签文本
格式化说明标签function(label)自定义呈现函数以格式化说明标签文本
格式化工具提示function(data)自定义呈现函数，必须返回工具提示的 HTML 内容。接收到的数据data对象具有以下属性
index: number;
total: number;
datasets: {
  color?: string;
  label: any;
  value: number;
}
格式化工具提示轴标签function(label)自定义呈现函数，用于格式化工具提示中的轴标签文本
格式化工具提示总计function(total)自定义呈现函数，用于格式化工具提示中的总计值文本
格式化工具提示数据集function(label, value, color)自定义呈现函数，用于格式化工具提示中的数据集文本

面积图事件

事件参数描述
选择(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>
改进此文档
此页面