快速上手EChart(Vue项目)

本文是基于 EChart 官方文档进行的简化

快速上手 - 使用手册 - Apache ECharts

ECharts

安装

1
pnpm install echarts --save

导入

全局导入

1
2
// 引入 ECharts 核心模块
import * as echarts from 'echarts/core';

按需导入

1
由于不同图表类型需要导入的东西非常杂乱，以下为导入分类总结

渲染器（必）

1
2
// 引入 Canvas 渲染器
import { CanvasRenderer } from 'echarts/renderers';

图表类型

1
2
3
4
5
6
7
8
// 引入柱状图图表
import { BarChart } from 'echarts/charts';

// 引入折线图图表
import { LineChart } from 'echarts/charts';

// 引入饼图图表
import { PieChart } from 'echarts/charts';

组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 引入标题组件
import { TitleComponent } from 'echarts/components';

// 引入提示框组件
import { TooltipComponent } from 'echarts/components';

// 引入直角坐标系组件（用于柱状图、折线图等）
import { GridComponent } from 'echarts/components';

// 引入数据集组件
import { DatasetComponent } from 'echarts/components';

// 引入内置数据转换器组件
import { TransformComponent } from 'echarts/components';

// 引入图例组件（用于饼图等）
import { LegendComponent } from 'echarts/components';

特性

1
2
3
4
5
// 引入标签自动布局特性
import { LabelLayout } from 'echarts/features';

// 引入全局过渡动画特性
import { UniversalTransition } from 'echarts/features';

注册组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 注册必须的组件和特性
echarts.use([
  TitleComponent,      // 标题组件
  TooltipComponent,    // 提示框组件
  GridComponent,       // 直角坐标系组件
  DatasetComponent,    // 数据集组件
  TransformComponent,  // 内置数据转换器组件
  BarChart,            // 柱状图
  LineChart,           // 折线图
  PieChart,            // 饼图
  LabelLayout,         // 标签自动布局特性
  UniversalTransition, // 全局过渡动画特性
  CanvasRenderer,      // Canvas 渲染器
  LegendComponent,     // 图例组件
]);

完整示例模板
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { onMounted } from 'vue';

// 引入 ECharts 核心模块
import * as echarts from 'echarts/core';

// 引入图表类型
import { BarChart } from 'echarts/charts';        // 柱状图
import { LineChart } from 'echarts/charts';       // 折线图
import { PieChart } from 'echarts/charts';        // 饼图

// 引入组件
import { TitleComponent } from 'echarts/components';      // 标题组件
import { TooltipComponent } from 'echarts/components';    // 提示框组件
import { GridComponent } from 'echarts/components';       // 直角坐标系组件
import { DatasetComponent } from 'echarts/components';    // 数据集组件
import { TransformComponent } from 'echarts/components';  // 内置数据转换器组件
import { LegendComponent } from 'echarts/components';     // 图例组件

// 引入特性
import { LabelLayout } from 'echarts/features';           // 标签自动布局特性
import { UniversalTransition } from 'echarts/features';   // 全局过渡动画特性

// 引入渲染器
import { CanvasRenderer } from 'echarts/renderers';       // Canvas 渲染器

// 注册必须的组件和特性
echarts.use([
  TitleComponent,      // 标题组件
  TooltipComponent,    // 提示框组件
  GridComponent,       // 直角坐标系组件
  DatasetComponent,    // 数据集组件
  TransformComponent,  // 内置数据转换器组件
  BarChart,            // 柱状图
  LineChart,           // 折线图
  PieChart,            // 饼图
  LabelLayout,         // 标签自动布局特性
  UniversalTransition, // 全局过渡动画特性
  CanvasRenderer,      // Canvas 渲染器
  LegendComponent,     // 图例组件
]);

实践

容器

1
2
3
<template>
        <div id="main"></div>
</template>

样式

1
2
3
4
#main {
    width: 600px;
    height: 400px;
}

引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { onMounted } from 'vue'
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts'
// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
} from 'echarts/components'
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'

注册组件

1
2
3
4
5
6
7
8
9
10
11
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer,
])

图表配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('main'))

    // 颜色数组
    let colors = [
        '#5470c6',
        '#91cc75',
        '#fac858',
        '#ee6666',
        '#73c0de',
        '#3ba272',
    ]

    const option = {
        // 标题
        title: {
            text: 'ECharts 入门示例',
        },
        // 提示框
        tooltip: {},

        // x轴
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        // y轴
        yAxis: {
            data: ['0', '50', '100', '150', '200', '250'],
        },

        // 数据系列
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                itemStyle: {
                    color: (params) => colors[params.dataIndex] || '#fac858',
                },
            },
        ],
    }

    //loding预加载
    myChart.showLoading()
    $.get('data.json').done(function () {
        myChart.hideLoading()
        myChart.setOption(option)
    })

    myChart.setOption(option)
})

拆分组件

series / 图表

1
2
3
4
5
6
7
8
9
10
series: [
    {
        name: '销量',//单位量
        type: 'bar',//图表类型
        data: [5, 20, 36, 10, 10, 20],//图表数据
        itemStyle: {//样式配置
            color: (params) => option.color[params.dataIndex] || '#fac858', // 使用全局颜色
        },
    },
],

type / 类型
柱状图（bar）

需求

  • 坐标轴：需要 xAxis 和 yAxis 配置。
  • 数据格式：数据通常是简单的数值数组或对象数组。
  • 其他配置：可以添加 tooltip、title、legend 等组件来增强图表的可读性和交互性。

配置示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
const option = {
  title: {
    text: 'ECharts 销量统计',
    subtext: '示例数据',
    left: 'center',
  },
  tooltip: {
    trigger: 'axis', // 触发类型为坐标轴触发
  },
  xAxis: {
    type: 'category', // 类目轴
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], // x轴数据
    axisLabel: {
      color: '#333', // 标签颜色
      fontSize: 14,  // 标签字体大小
    },
    axisLine: {
      lineStyle: {
        color: '#ccc', // 轴线颜色
      },
    },
    axisTick: {
      show: false, // 是否显示刻度线
    },
  },
  yAxis: {
    type: 'value', // 数值轴
    axisLabel: {
      color: '#333', // 标签颜色
      formatter: '{value} 件', // 标签格式化
    },
    axisLine: {
      show: false, // 是否显示轴线
    },
    splitLine: {
      lineStyle: {
        type: 'dashed', // 分割线样式
        color: '#eee',  // 分割线颜色
      },
    },
  },
  series: [
    {
      name: '销量',
      type: 'bar', // 柱状图
      data: [5, 20, 36, 10, 10, 20], // 数据
      itemStyle: {
        color: (params) => ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'][params.dataIndex] || '#fac858',
      },
    },
  ],
};

折线图（line）

需求

  • 坐标轴：需要 xAxis 和 yAxis 配置。
  • 数据格式：数据通常是简单的数值数组或对象数组。
  • 其他配置：可以添加 tooltip、title、legend 等组件来增强图表的可读性和交互性。

配置示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
const option = {
  title: {
    text: 'ECharts 销量趋势',
    subtext: '示例数据',
    left: 'center',
  },
  tooltip: {
    trigger: 'axis', // 触发类型为坐标轴触发
  },
  xAxis: {
    type: 'category', // 类目轴
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], // x轴数据
    axisLabel: {
      color: '#333', // 标签颜色
      fontSize: 14,  // 标签字体大小
    },
    axisLine: {
      lineStyle: {
        color: '#ccc', // 轴线颜色
      },
    },
    axisTick: {
      show: false, // 是否显示刻度线
    },
  },
  yAxis: {
    type: 'value', // 数值轴
    axisLabel: {
      color: '#333', // 标签颜色
      formatter: '{value} 件', // 标签格式化
    },
    axisLine: {
      show: false, // 是否显示轴线
    },
    splitLine: {
      lineStyle: {
        type: 'dashed', // 分割线样式
        color: '#eee',  // 分割线颜色
      },
    },
  },
  series: [
    {
      name: '销量',
      type: 'line', // 折线图
      data: [5, 20, 36, 10, 10, 20], // 数据
      smooth: true, // 平滑曲线
      itemStyle: {
        color: '#5470c6', // 线条颜色
      },
    },
  ],
};

饼图（pie）

需求

  • 坐标轴：不需要 xAxis 和 yAxis，因为饼图是基于圆形的。
  • 数据格式：数据通常是包含 value 和 name 的对象数组。
  • 其他配置：可以添加 tooltip、title、legend 等组件来增强图表的可读性和交互性。

配置示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const option = {
  title: {
    text: 'ECharts 销量分布',
    subtext: '示例数据',
    left: 'center',
  },
  tooltip: {
    trigger: 'item', // 触发类型为单个数据点触发
  },
  legend: {
    orient: 'vertical', // 图例方向
    left: 'left',       // 图例位置
  },
  series: [
    {
      name: '销量',
      type: 'pie', // 饼图
      radius: '50%', // 饼图的半径
      data: [
        { value: 5, name: '衬衫' },
        { value: 20, name: '羊毛衫' },
        { value: 36, name: '雪纺衫' },
        { value: 10, name: '裤子' },
        { value: 10, name: '高跟鞋' },
        { value: 20, name: '袜子' },
      ], // 数据
      itemStyle: {
        color: (params) => ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'][params.dataIndex] || '#fac858',
      },
    },
  ],
};

散点图（scatter）

需求

  • 坐标轴：需要 xAxis 和 yAxis 配置。
  • 数据格式：数据通常是二维数组，每个数据点包含两个值 [x, y]。
  • 其他配置：可以添加 tooltip、title、legend 等组件来增强图表的可读性和交互性。

配置示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
const option = {
  title: {
    text: 'ECharts 散点图示例',
    subtext: '随机生成的数据',
    left: 'center',
  },
  tooltip: {
    trigger: 'item', // 触发类型为单个数据点触发
  },
  xAxis: {
    type: 'value', // 数值轴
    name: 'X轴',
    axisLabel: {
      color: '#333', // 标签颜色
      fontSize: 14,  // 标签字体大小
    },
    axisLine: {
      lineStyle: {
        color: '#ccc', // 轴线颜色
      },
    },
  },
  yAxis: {
    type: 'value', // 数值轴
    name: 'Y轴',
    axisLabel: {
      color: '#333', // 标签颜色
      fontSize: 14,  // 标签字体大小
    },
    axisLine: {
      lineStyle: {
        color: '#ccc', // 轴线颜色
      },
    },
  },
  series: [
    {
      name: '散点',
      type: 'scatter', // 散点图
      data: [
        [10, 20],
        [20, 30],
        [30, 40],
        [40, 50],
        [50, 60],
        [60, 70],
      ], // 数据
      symbolSize: 20, // 散点大小
      itemStyle: {
        color: '#5470c6', // 散点颜色
      },
    },
  ],
};

itemStyle / 样式

！注意：颜色的配置只能在

1.series 外（全局）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const option = {
  // ... 其他配置
  color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'], // 全局颜色
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20],
      itemStyle: {
        color: (params) => option.color[params.dataIndex] || '#fac858', // 使用全局颜色
      },
    },
  ],
  // ... 其他配置
}

2.itemStyle 内部（局部）

1
2
3
4
5
6
7
8
9
10
11
12
13
series: [
  {
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20],
    itemStyle: {
      color: (params) => {
        const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'];
        return colors[params.dataIndex] || '#fac858'; // 直接使用本地定义的 colors 数组
      },
    },
  },
]

不能在 series 中配置颜色数组

渐变色（内部配置）

1
2
3
4
5
6
7
8
9
itemStyle: {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#5470c6' },
        { offset: 0.2, color: '#91cc75' },
        { offset: 0.5, color: '#91cc75' },
        { offset: 0.7, color: '#fac858' },
        { offset: 1, color: '#91cc75' },
    ]),
},

title | 标题

自定义标题

1
2
3
4
5
6
7
8
9
title: {
    text: 'ECharts 销量统计',
    subtext: '示例数据',
    left: 'center',
    textStyle: {
       fontSize: 20,
       color: '#333',
    },
},

color | 颜色

1
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'], // 全局颜色

tooltip | 提示框

自定义提示框

1
2
3
4
5
6
7
8
9
tooltip: {
  trigger: 'axis', // 触发类型，可以是 'item' 或 'axis'
  axisPointer: {
    type: 'shadow', // 默认为 'line'，也可以是 'shadow' 或 'cross'
  },
  formatter: function (params) {
    return `${params[0].name}: ${params[0].value}`;
  },
},

x/yAxis | 坐标轴

适用于

1
2
柱状图 bar
折线图 line

坐标轴样式

自定义 x 轴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
xAxis: {
  type: 'category',
  data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
  axisLabel: {
    color: '#333', // 标签颜色
    fontSize: 14,  // 标签字体大小
  },
  axisLine: {
    lineStyle: {
      color: '#ccc', // 轴线颜色
    },
  },
  axisTick: {
    show: false, // 是否显示刻度线
  },
},

自定义 y 轴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
yAxis: {
  type: 'value',
  axisLabel: {
    color: '#333', // 标签颜色
    formatter: '{value} 件', // 标签格式化
  },
  axisLine: {
    show: false, // 是否显示轴线
  },
  splitLine: {
    lineStyle: {
      type: 'dashed', // 分割线样式
      color: '#eee',  // 分割线颜色
    },
  },
},

animation | 动画

动画样式

1
2
3
animation: true, // 是否开启动画
animationDuration: 1000, // 动画持续时间
animationEasing: 'elasticOut', // 动画缓动效果

其他配置

loding | 预加载

1
pnpm i --save-dev @types/jquery

1
2
3
4
5
myChart.showLoading()
$.get('data.json').done(function (data) {
    myChart.hideLoading()
    myChart.setOption(option)
})