Simple Line Chart

Examples

Basic Example

<script setup>
const data = {
  Taylor: 81,
  Clark: 78,
  Martin: 75,
  Perez: 80,
  Lewis: 86,
  Wilson: 81,
  Jackson: 87,
}
</script>

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

Configured Example

<script setup>
const data = [
  {
    name: 2021,
    data: {
      Taylor: 71,
      Clark: 68,
      Martin: 57,
      Perez: 90,
      Lewis: 68,
    },
  },
  {
    name: 2022,
    data: {
      Taylor: 101,
      Clark: 78,
      Martin: 75,
      Perez: 80,
      Lewis: 86,
    },
  },
  {
    name: 2023,
    data: {
      Taylor: 88,
      Clark: 98,
      Martin: 57,
      Perez: 50,
      Lewis: 76,
    },
  },
]
</script>

<template>
  <div
    v-ec="[
      'lineSimple',
      data,
      {
        itemColor: ['#DC3545', '#FFC107', '#0D6EFD'],
      },
    ]"
    style="width: 100%; height: 300px; padding-top: 15px;"
  />
</template>

Parameter Descriptions

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

Default Parameter Values

options

const defaultOptions: Options = {
  itemColor: 'auto',
}

Parameter Types

Data

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

export type Data =
  NumberObject |
  NumberKeyValuePairArray |
  NameData

Options

export interface Options {
  /**
   * The color of the bar. If `data` passes in an array,
   * different colors can also be defined here by passing in an array.
   *
   * @see https://echarts.apache.org/option.html#series-line.itemStyle.color
   */
  itemColor?: string | string[]
}

EcOptions

export type EcOptions = Partial<EChartsOption>