以下是一份较为全面的 ECharts 使用指南，包含安装、基本使用步骤、常见图表示例以及配置项说明等内容。
1. 安装 ECharts
可以通过 npm 或 yarn 进行安装，在项目根目录下执行以下命令：
# 使用 npm 安装
npm install echarts --save
# 使用 yarn 安装
yarn add echarts
2. 基本使用步骤
2.1 引入 ECharts
在 Vue 组件中引入 ECharts：
<template>
<div id="main" style="width: 600px;height:400px;"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
onMounted(() => {
// 后续代码将在这里编写
});
</script>
2.2 初始化 ECharts 实例
在 onMounted 钩子函数中，基于准备好的 DOM 元素初始化 ECharts 实例：
onMounted(() => {
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('main'));
// 后续代码将在这里编写
});
2.3 配置图表选项
ECharts 通过一个配置对象来定义图表的各种属性和数据，例如绘制一个简单的折线图：
onMounted(() => {
const myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}
]
};
// 后续代码将在这里编写
});
2.4 渲染图表
使用 setOption 方法将配置项应用到 ECharts 实例上，从而渲染出图表：
onMounted(() => {
const myChart = echarts.init(document.getElementById('main'));
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});
3. 常见图表示例
3.1 柱状图
const option = {
xAxis: {
type: 'category',
data: ['Apple', 'Banana', 'Cherry', 'Date']
},
yAxis: {
type: 'value'
},
series: [
{
data: [5, 20, 36, 10],
type: 'bar'
}
]
};
3.2 饼图
const option = {
series: [
{
type: 'pie',
radius: '50%',
data: [
{
value: 335, name: '直接访问' },
{
value: 310, name: '邮件营销' },
{
value: 234, name: '联盟广告' },
{
value: 135, name: '视频广告' }
]
}
]
};
3.3 散点图
const option = {
xAxis: {
},
yAxis: {
},
series: [
{
symbolSize: 20,
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81]
],
type: 'scatter'
}
]
};
4. 配置项说明
4.1 title
用于设置图表的标题：
const option = {
title: {
text: 'ECharts 示例标题',
subtext: '副标题信息'
},
// 其他配置项...
};
4.2 tooltip
用于设置鼠标悬停时显示的提示框：
const option = {
tooltip: {
trigger: 'axis' // 触发类型，'axis' 表示坐标轴触发
},
// 其他配置项...
};
4.3 legend
用于设置图例，显示不同系列的名称：
const option = {
legend: {
data: ['销量']
},
// 其他配置项...
};
4.4 xAxis 和 yAxis
分别用于设置 x 轴和 y 轴的属性：
const option = {
xAxis: {
type: 'category', // 坐标轴类型，'category' 表示类目轴
data: ['周一', '周二', '周三']
},
yAxis: {
type: 'value' // 坐标轴类型，'value' 表示数值轴
},
// 其他配置项...
};
4.5 series
用于定义图表的数据系列：
const option = {
series: [
{
name: '销量',
type: 'bar', // 图表类型，'bar' 表示柱状图
data: [10, 20, 30]
}
]
};
5. 响应式处理
当容器大小改变时，需要重新调整图表大小，可以使用 window.addEventListener 监听窗口大小变化事件：
onMounted(() => {
const myChart = echarts.init(document.getElementById('main'));
const option = {
// 配置项...
};
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize();
});
});
6. 资源与进一步学习
- 官方文档：ECharts 官方提供了详细的文档，包含配置项手册、示例代码等，地址为 https://echarts.apache.org/zh/index.html。
- 示例库：官方示例库中有大量的图表示例，可以参考学习不同类型图表的配置方法，地址为 https://echarts.apache.org/examples/zh/index.html。