以下是一份较为全面的 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 实例：
javascript">onMounted(() => {// 基于准备好的dom，初始化echarts实例const myChart = echarts.init(document.getElementById('main'));// 后续代码将在这里编写
});
2.3 配置图表选项
ECharts 通过一个配置对象来定义图表的各种属性和数据，例如绘制一个简单的折线图：
javascript">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 实例上，从而渲染出图表：
javascript">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 柱状图
javascript">const option = {xAxis: {type: 'category',data: ['Apple', 'Banana', 'Cherry', 'Date']},yAxis: {type: 'value'},series: [{data: [5, 20, 36, 10],type: 'bar'}]
};
3.2 饼图
javascript">const option = {series: [{type: 'pie',radius: '50%',data: [{ value: 335, name: '直接访问' },{ value: 310, name: '邮件营销' },{ value: 234, name: '联盟广告' },{ value: 135, name: '视频广告' }]}]
};
3.3 散点图
javascript">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
用于设置图表的标题：
javascript">const option = {title: {text: 'ECharts 示例标题',subtext: '副标题信息'},// 其他配置项...
};
4.2 tooltip
用于设置鼠标悬停时显示的提示框：
javascript">const option = {tooltip: {trigger: 'axis' // 触发类型，'axis' 表示坐标轴触发},// 其他配置项...
};
4.3 legend
用于设置图例，显示不同系列的名称：
javascript">const option = {legend: {data: ['销量']},// 其他配置项...
};
4.4 xAxis 和 yAxis
分别用于设置 x 轴和 y 轴的属性：
javascript">const option = {xAxis: {type: 'category', // 坐标轴类型，'category' 表示类目轴data: ['周一', '周二', '周三']},yAxis: {type: 'value' // 坐标轴类型，'value' 表示数值轴},// 其他配置项...
};
4.5 series
用于定义图表的数据系列：
javascript">const option = {series: [{name: '销量',type: 'bar', // 图表类型，'bar' 表示柱状图data: [10, 20, 30]}]
};
5. 响应式处理
当容器大小改变时，需要重新调整图表大小，可以使用 window.addEventListener 监听窗口大小变化事件：
javascript">onMounted(() => {const myChart = echarts.init(document.getElementById('main'));const option = {// 配置项...};myChart.setOption(option);window.addEventListener('resize', () => {myChart.resize();});
});
