面积图（趋势图）

示例

基础示例

<script setup>
const data = {
  Taylor: 502.84,
  Clark: 205.97,
  Martin: 332.79,
  Perez: 282.55,
  Wilson: 214.02,
}
</script>

<template>
  <div
    v-ec="['lineGradientTrend', data]"
    style="width: 100%; height: 300px;"
  />
</template>

配置过的示例

<script setup>
const data = [
  {
    name: 2021,
    data: {
      Taylor: 502.84,
      Clark: 205.97,
      Martin: 332.79,
      Perez: 282.55,
      Wilson: 214.02,
    },
  },
  {
    name: 2022,
    data: {
      Taylor: 281.55,
      Clark: 398.35,
      Martin: 214.02,
      Perez: 179.55,
      Wilson: 356.14,
    },
  },
]
</script>

<template>
  <div
    v-ec="[
      'lineGradientTrend',
      data,
      {
        backgroundColor: '#0A1612',
        lineColors: ['#C5C1C0', '#F7CE3E'],
        xAxisLabelColor: '#C5C1C0',
      },
      {
        legend: { top: '15px' },
      },
    ]"
    style="width: 100%; height: 300px;"
  />
</template>

参数说明

索引	类型	必填	默认值	说明
0	lineGradientTrend	是	-	-
1	Data	是	-	数据
2	Options	否	defaultOptions	配置参数
3	EcOptions	否	-	ECharts 配置参数

参数默认值

options

const defaultOptions: Options = {
  lineColors: ['#00b3f4', '#00ca95'],
  backgroundColor: '#080b30',
  xAxisLabelColor: '#fff',
}

参数类型

Data

export type NameData = { name: string, data: NumberObject | NumberKeyValuePairArray }[]

export type Data =
  NumberObject |
  NumberKeyValuePairArray |
  NameData

Options

export interface Options {
  lineColors?: string[]
  backgroundColor?: string
  xAxisLabelColor?: string
}

EcOptions

export type EcOptions = Partial<EChartsOption>