详解Echarts中的配置项

上一个博客介绍了详细介绍了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里面的配置项相同。

标题配置项示例代码：

<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: 图例关闭时的颜色。

图例配置项示例代码

legend: {
   
    data: ['数据1', '数据2', '数据3'],
    left: 'center',
    top: 'bottom',
    textStyle: