Area Chart (Trend Chart)

Examples

Basic Example

<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>

Configured Example

<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>

Parameter Descriptions

Index	Type	Required	Default Value	Description
0	lineGradientTrend	Yes	-	-
1	Data	Yes	-	Data
2	Options	No	defaultOptions	Configuration Parameters
3	EcOptions	No	-	ECharts Configuration Parameters

Default Parameter Values

options

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

Parameter Types

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>