Echarts常用配置项梳理

        在 ECharts 中，设置图表的配置项和数据是通过setOption()方法，常用的属性如下：

title属性：标题组件，包含主标题和副标题

        title 属性是一个对象,设置图表的标题时，常用的配置和作用如下[1]

myChart.setOption({
  title: {
    show: true, // 是否显示标题组件
    text: '图表标题',  // 标题的文本内容,支持使用 \n 换行
    subtext: '图表副标题',  // 副标题的文本内容
    left: 'center',   // 离容器左侧的距离，可选值有像素值、百分比、'left'、'center'、'right'，默认值为 'auto'
    top: 'top',  // 离容器上侧的距离，可选值有像素值、百分比、'top'、'middle'、'bottom'，默认值为 'auto'
    textStyle: {  // 标题文本的样式设置，包括字体颜色、字号等。
      color: '#333',
      fontSize: 18,
      fontWeight: 'bold'
    }
  },
  // 其他配置项...
});

legend: 图例组件

        图例组件展现了不同系列的标记(symbol)，颜色和名字；可以通过点击图例控制哪些系列不显示。legend的配置项如下：

myChart.setOption({
  legend: {
    show: true, // 是否显示图例组件
    type: 'scroll',  // 图例的类型。可选值有plain（普通图例，默认）、scroll（可滚动翻页的图例，当图例数量较多时可以使用）
    orient: 'horizontal', // 图例列表的布局朝向，可选值有 'horizontal'和 'vertical'，默认值为 'horizontal'  
    left: 'center',  // left：图例离容器左侧的距离，可选值有像素值、百分比、'left'、'center'、'right'，默认值为 'auto'
    top: 'top',  // 图例离容器上侧的距离，可选值有像素值、百分比、'top'、'middle'、'bottom'，默认值为 'auto'
    data: ['系列一', '系列二', '系列三'],  // 图例的数据数组，每个元素对应一个系列（series）的名称。
    selected: {  // 图例选中状态表,初始选中状态，可以通过设置为 {} 对象来控制，默认值为 {}
      '系列一': true,
      '系列二': false,
      '系列三': true
    },
    textStyle: {
      color: '#333',
      fontSize: 14
    }
  },
  // 其他配置项...
});

注：图例组件中的data也可以赋值为函数形式，这个没用过，参考[2]

grid：设置直角坐标系内绘图网格的相关配置

        直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。曾经在绘制单个柱状图时用来设置图表的位置，当绘制多个图表示是作用应该更大。

xAxis：直角坐标系 grid 中的 x 轴

        x轴和Y轴的相关属性应该是调整最频繁的配置，毕竟每个图表展示的信息和样式都有不同，对坐标轴的样子也有不同要求。xAxis 属性是一个数组，每个元素对应一个X轴的配置。

myChart.setOption({
  xAxis: [{
    show: true,  // 是否显示 x 轴
    position: 'top',   // x轴的位置,默认grid中的第一个x轴在下方（'bottom'），第二个x轴视第一个x轴的位置放在另一侧。
    type: 'category',  // 坐标轴类型,可选值有'value'(数值轴，适用于连续数据)、'category'(类目轴，适用于离散的类目数据)、'time'(时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度)、'log'(对数轴,适用于对数数据)
    data: ['一月', '二月', '三月', '四月', '五月', '六月'], // 类目数据，在类型为 'category' 时有效。用于指定类目轴的内容，通常为一个数组，每个元素表示一个类目。
    min: function (value) {  // 坐标轴刻度最小值,不设置时会自动计算最小值保证坐标轴刻度的均匀分布
        return value.min - 20;
    },
    max: 'dataMax', // 最大值。 'dataMax'，此时取数据在该轴上的最大值作为最大刻度
    axisLabel: {   // 坐标轴刻度标签的相关设置
      show: true, // 是否显示刻度标签
      interval: 'auto', // 坐标轴刻度标签的显示间隔，在类目轴中有效；0强制显示所有标签，1表示间隔一个标签显示，2间隔两个，以此类推
      formatter: function (value, index) {  // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
          return value + 'kg';
      }
    },
    axisLine: {   // 坐标轴轴线相关设置
      lineStyle: {  // 坐标轴线的样式
        color: '#999',
        width: 1
      }
    },
    axisTick: {   // 坐标轴刻度相关设置
      show: false, // 是否显示刻度标签
      inside: false, // 坐标轴刻度是否朝内，默认朝外
      lineStyle: {  // 坐标轴刻度的样式
        color: '#999',
        width: 1
      } 
    },
    splitLine: {   // 坐标轴在grid区域中的分隔线
      show: true,
      lineStyle: {  // 分割线样式
        opacity: 0.5,
        width: 0.5
      }
    }
  }],
  // 其他配置项...
});

yAxis：直角坐标系 grid 中的 y轴（配置项同轴）

series：定义图表中的系列（series）

        series 是一个数组，用于定义图表中的系列; 每个系列定义了图表中的一组数据和样式。可以在 series 数组中添加多个系列对象，每个系列对象可以使用不同的类型。由于系列类型Type有折线、柱状图、饼图等多种，所以series的配置应该是最复杂的属性之一：

series: [
  {
    name: 'Series 1',  // 系列名称，用于tooltip的显示，legend的图例筛选
    type: 'line',  // 系列类型，可以是折线图（'line'）、柱状图（'bar'）、饼图（'pie'）等
    data: [10, 20, 30, 40, 50],  // 系列的数据，可以是一个数组，每个元素对应一个数据点
    itemStyle: {   // 系列的样式配置，可以设置线条颜色、柱状图颜色
      color: ['#255793', '#255793', '#255793', '#255793'],  // 颜色，可以设置为数组
    },
    label: {   // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等;可按需定制如下
      show: true,
      // position: 'insideBottomRight',
      position: ['90%', '-150%'],   // 标签位置
      distance: 8,   // 距离图形元素的距离
      fontSize: 10,  // 标签样式
      color: '#86A2C2',  
      //   offset: [30, 40],
      formatter: (data) => {   // 按需定制文本标签格式
        return data.data + '/' + this.orderCount.startOrderCount[data.dataIndex]
      }
    },
    markLine:{   // 图表标线, 可以定制平均线、最小值到最大值等标注线
      lineStyle:{   // 标线的样式
        color:'rgb(247, 172, 69)',
        cap:'round',
      },
      data:[ // 标线的数据数组。每个数组项可以是一个两个值的数组，分别表示线的起点和终点
        {
          name:'最大值',
          yAxis:maxValueNew,//第一条标线的值
          lineStyle:{
            color:'rgb(238, 102, 102)',//第一条标线的颜色
          },
          label:{
            color:'rgb(238, 102, 102)',//第一条标线的名称颜色
            formatter:'最大值'//第一条标线的名称
          }
        }
      ]
    }
  }
]

        

        实践中图表的样式往往还需要通过更多的配置实现，例如，如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'，这往往在用柱子做背景的时候有用。

type: 'bar',   // 柱状图
barWidth: 8,    // 柱条的宽度，不设时自适应。
barGap: '-100%',  // 不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）
barCategoryGap: '0',  // 同一系列的柱间距离，默认为类目间距的20%，可设固定值

  

        上面提到serise不同的系列类型会有不同的配置，例如，使用饼图type: 'pie'， 可用配置如下。可使用radius设置内外半径，轻松实现环形图；roseType: 'area'设置成玫瑰图；显示有远见的环形图配置属性itemStyle.borderRadius：number即可。

series: [
  {
    name: nameText,
    type: 'pie',
    radius: ['50%', '70%'],   // 饼图的半径；类型：number（外半径值）、string、数组
    avoidLabelOverlap: false,
    // roseType: 'area',   //设置玫瑰图
    itemStyle: {
      // borderRadius: 10,  // 圆角环形图的圆角
      // borderColor: '#fff',
      borderWidth: 2
    },
    label: {
      show: false,
      position: 'center',
      color: '#fff',
    },
    emphasis: {
      label: {
        show: true,
        fontSize: 40,
        fontWeight: 'bold'
      }
    },
    labelLine: {
      show: false
    },
    data: this.subTasks   // 绑定子元素
  }
]

color: 调色盘颜色列表

        使用Echarts时曾发现不设置颜色值时，不同版本绘制的饼图颜色不一致，应该就是调色盘颜色列表不同的原因。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。

['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']

        支持的颜色格式：

• RGB，'rgb(128, 128, 128)'
• 加上 alpha 通道表示不透明度，可以使用 RGBA，'rgba(128, 128, 128, 0.5)'
• 十六进制格式，比如'#ccc'
• 渐变色或者纹理填充[3]

参考文献：

[1] Echarts官方文档 https://echarts.apache.org/zh/option.html#title

[2] Examples - Apache ECharts

[3] Documentation - Apache ECharts