ECharts

• 使用 echarts 与 vue-echarts

通用组件与数据

这是以下示例需要的通用父组件与数据

点击查看 VChart.vue 通用组件

<script lang="ts" setup>
import { BarChart, LineChart, PieChart } from 'echarts/charts'
import {
  DatasetComponent,
  GridComponent,
  LegendComponent,
  TitleComponent,
  TooltipComponent,
} from 'echarts/components'
import { use } from 'echarts/core'
import { SVGRenderer } from 'echarts/renderers'
import { PropType } from 'vue'
import VChart from 'vue-echarts'
// 系列类型的定义后缀都为 SeriesOption
import type {
  BarSeriesOption,
  LineSeriesOption,
  PieSeriesOption,
} from 'echarts/charts'
// 组件类型的定义后缀都为 ComponentOption
import type {
  DatasetComponentOption,
  GridComponentOption,
  LegendComponentOption,
  TitleComponentOption,
  TooltipComponentOption,
} from 'echarts/components'
import type {
  ComposeOption,
} from 'echarts/core'

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
export type ECOption = ComposeOption<
  | TitleComponentOption
  | TooltipComponentOption
  | LegendComponentOption
  | DatasetComponentOption
  | PieSeriesOption
  | BarSeriesOption
  | LineSeriesOption
  | GridComponentOption
>
defineProps({
  option: {
    type: Object as PropType<ECOption>,
    required: true,
  },
})

use([
  SVGRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  BarChart,
  LineChart,
  DatasetComponent,
  GridComponent,
])
</script>

<template>
  <VChart
    :option="option" :style="{
      height: '22.5rem',
    }"
  />
</template>

点击查看 dataset 数据

export const source = [
  ['搜索引擎', '直接访问', '邮件', '联盟广告', '视频广告', '搜索广告'],
  ['谷歌', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
  ['必应', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
  ['百度', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
  ['雅虎', 25.2, 37.1, 41.2, 18, 33.9, 49.1],
  ['搜狗', 30.2, 42.1, 45.2, 20, 38.9, 52.1],
  ['360搜索', 28.2, 39.1, 43.2, 19, 36.9, 50.1],
  ['神马', 27.2, 38.1, 42.2, 18.5, 35.9, 49.5],
  ['必应中国', 26.2, 37.1, 41.2, 18, 34.9, 48.1],
  ['搜搜', 25.2, 36.1, 40.2, 17.5, 33.9, 47.5],
  ['有道', 24.2, 35.1, 39.2, 17, 32.9, 46.5],
  ['即刻搜索', 23.2, 34.1, 38.2, 16.5, 31.9, 45.5],
]

最简单的数据集

simple.vue

<script lang="ts" setup>
import { source } from './dataset'
import VChart, { type ECOption } from './VChart.vue'

const option = ref({
  legend: {},
  tooltip: {
    trigger: 'axis',
    showContent: false,
  },
  dataset: { source },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    {
      type: 'bar',
      emphasis: { focus: 'series' },
    },
    {
      type: 'bar',
      emphasis: { focus: 'series' },
    },
    {
      type: 'bar',
      emphasis: { focus: 'series' },
    },
    {
      type: 'bar',
      emphasis: { focus: 'series' },
    },
    {
      type: 'bar',
      emphasis: { focus: 'series' },
    },
  ],
} as ECOption)
</script>

<template>
  <VChart :option="option" />
</template>

VChart.vue

<script lang="ts" setup>
import { BarChart, LineChart, PieChart } from 'echarts/charts'
import {
  DatasetComponent,
  GridComponent,
  LegendComponent,
  TitleComponent,
  TooltipComponent,
} from 'echarts/components'
import { use } from 'echarts/core'
import { SVGRenderer } from 'echarts/renderers'
import { PropType } from 'vue'
import VChart from 'vue-echarts'
// 系列类型的定义后缀都为 SeriesOption
import type {
  BarSeriesOption,
  LineSeriesOption,
  PieSeriesOption,
} from 'echarts/charts'
// 组件类型的定义后缀都为 ComponentOption
import type {
  DatasetComponentOption,
  GridComponentOption,
  LegendComponentOption,
  TitleComponentOption,
  TooltipComponentOption,
} from 'echarts/components'
import type {
  ComposeOption,
} from 'echarts/core'

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
export type ECOption = ComposeOption<
  | TitleComponentOption
  | TooltipComponentOption
  | LegendComponentOption
  | DatasetComponentOption
  | PieSeriesOption
  | BarSeriesOption
  | LineSeriesOption
  | GridComponentOption
>
defineProps({
  option: {
    type: Object as PropType<ECOption>,
    required: true,
  },
})

use([
  SVGRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  BarChart,
  LineChart,
  DatasetComponent,
  GridComponent,
])
</script>

<template>
  <VChart
    :option="option" :style="{
      height: '22.5rem',
    }"
  />
</template>

隐藏源代码

设置随机颜色

使用 TinyColor 库生成随机颜色

<script lang="ts" setup>
import { getAnalogousColors } from '@movk-repo/shared/utils'
import { source } from './dataset'
import VChart, { type ECOption } from './VChart.vue'

const option = ref({
  color: getAnalogousColors({
    results: 15,
  }),
  legend: {},
  tooltip: {
    trigger: 'axis',
    showContent: false,
  },
  dataset: { source },
  series: [
    {
      type: 'pie',
      radius: ['25%', '35%'],
      center: ['50%', '60%'],
      emphasis: {
        focus: 'self',
      },
      itemStyle: {
        borderRadius: 2,
        borderColor: '#fff',
        borderWidth: 2,
      },
      label: {
        formatter: '{b}: {@直接访问} ({d}%)',
      },
      encode: {
        itemName: '搜索引擎',
        value: '直接访问',
        tooltip: '直接访问',
      },
    },
  ],
} as ECOption)
</script>

<template>
  <VChart :option="option" />
</template>

隐藏源代码