上一个博客介绍了详细介绍了Echarts提供的图表类型及其适用场景，vue3中安装和使用Echarts，以及自定义图表和处理事件等内容，在上一个博客中我也提到过，Echarts中的配置项非常多，今天我们就来详细的聊一聊Echart是中的配置项。 我把Echarts的配置项分为如下五类：即 基本配置项、数据系列配置项 、样式配置项 、交互配置项和高级配置项。我们一个一个来介绍
基本配置项
我把Echarts中常用的标题、图例、提示框、工具栏等配置项归类到Echarts 图表的基本配置项。各个配置项主要的配置参数如下：
title配置
title配置项是Echarts中的 title 标题组件，它包含主标题和副标题。其常用的配置项有下面几个
text：标题文本内容。
show：是否显示标题组件，默认为true。
subtext：副标题文本内容。
left：标题组件离容器左侧的距离。
top：标题组件离容器上侧的距离。
textStyle：标题文本样式配置项，包括颜色、字体大小等。
link：主标题文本超链接,默认值true 。
target: 指定窗口打开主标题超链接，支持’self’ | ‘blank’，不指定等同为’blank’（新窗口）。
subtext: ‘副标题’, //副标题文本，'n’指定换行。
sublink: 副标题文本超链接。
subtarget: 指定窗口打开副标题超链接，支持’self’ | ‘blank’，不指定等同为’blank’（新窗口）。
backgroundColor: 标题背景颜色，默认’rgba(0,0,0,0)'透明。
borderWidth: 标题边框线宽，单位px，默认为0（无边框）。
borderColor: 标题边框颜色,默认’#ccc’。
padding: 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距 。
itemGap: 主副标题纵向间隔，单位px，默认为10。
textStyle：主标题文本样式，是一个对象，该对象包含下面的属性。
textStyle:{
color: 副标题文字的颜色。
fontStyle: 副标题文字字体的风格。 'normal' 'italic' 'oblique'
fontWeight: 副标题文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 500|600。
fontSize: 字体大小
lineHeight: 行高
textBorderColor: 文字本身的描边颜色。
textBorderWidth: 文字本身的描边宽度。
textShadowColor: 文字本身的阴影颜色。
textShadowBlur: 文字本身的阴影长度。
textShadowOffsetX: 文字本身的阴影 X 偏移。
textShadowOffsetY: 文字本身的阴影 Y 偏移。
}subtextStyle：副标题样式，是一个对象，里面配置项和上面的textStyle里面的配置项相同。
标题配置项示例代码：
代码语言：javascript复制<template>
<div ref="chart" style="width: 50%;height: 400px;"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import {
ref,onMounted,reactive } from 'vue'
const chart = ref(null)
const chartData = [
{
name: 'Mon', value: 320},
{
name: 'Tue', value: 932},
{
name: 'Wed', value: 901},
{
name: 'Thu', value: 934},
{
name: 'Fri', value: 1290},
{
name: 'Sat', value: 1330},
{
name: 'Sun', value: 1320}
]
onMounted(() => {
const myChart = echarts.init(chart.value)
const option = {
title: {
text: '柱状图示例',
subtext: '这是一个副标题',
left: 'center',
top: 'top',
textStyle: {
color: '#333',
fontSize: 16,
fontWeight: 'bold',
},
},
// 其他配置项代码
}
myChart.setOption(option)
})
</script> legend配置项
legend是Echarts的图例组件，可以通过 legend 配置项对图例进行设置，常用的配置项包括：
data：图例数据，可以是一个数组或者对象。left：图例组件离容器左侧的距离。值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’top：图例组件离容器上侧的距离。textStyle：图例文本样式配置项，包括颜色、字体大小等。show: 是否显示。icon: 图例样式。bottom: 组件离容器底部的距离。right: 组件离容器右侧的距离。padding: 图例内边距。itemWidth: 图例标记的图形宽度。itemGap: 图例每项之间的间隔。itemHeight: 图例标记的图形高度。itemStyle：图例的图形样式，是一个对象。其属性的取值为 ‘inherit’ 时，表示继承系列中的属性值。lineStyle：图例图形中线的样式，用于诸如折线图图例横线的样式设置。其属性的取值为 ‘inherit’ 时，表示继承系列中的属性值。selectedMode: 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。inactiveColor: 图例关闭时的颜色。
图例配置项示例代码
代码语言：javascript复制legend: {
data: ['数据1', '数据2', '数据3'],
left: 'center',
top: 'bottom',
textStyle: 
