区域图演示

区域图演示https://yundie.xyz/x-charts-demo/index.html?type=area

参考配置

基础区域图

<template>
  <view class="container">
    <t-xcharts
      ref="chart"
      :option="chartOption"
    ></t-xcharts>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const chartOption = ref({
  type: 'area',
  animation: true,
  dataLabel: true,
  xAxis: {
    disableGrid: true
  },
  yAxis: {
    data: [{
      min: 0,
      max: 100
    }]
  },
  series: [{
    name: '访问量',
    data: [35, 20, 25, 45, 37, 43, 34],
    color: '#2979ff'
  }],
  categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
});
</script>

配置说明

type

图表类型，设置为 'area' 表示区域图。

区域图是折线图的变体，填充折线下方的区域，强调数据量级。配置方式与折线图类似。