ECharts 是一个功能强大、灵活多样的数据可视化库，提供了丰富的配置选项和 API 接口。
以下是一些常用的 ECharts 属性：

常用属性

title：图表标题，可以设置主标题和副标题。

tooltip：提示框组件，用于展示鼠标悬停在数据点上时的信息。

legend：图例组件，用于展示不同系列的名称和颜色。

xAxis 和 yAxis：坐标轴组件，用于展示数据的数值范围和刻度。

series：系列列表，用于展示图表的数据内容。

grid：直角坐标系内绘图网格，可以设置图表的位置、大小和边距等。

toolbox：工具箱，提供了一些常用的工具和功能，如下载、缩放等。

dataZoom：数据区域缩放组件，用于对图表进行局部放大和缩小。

visualMap：视觉映射组件，用于将数据映射到不同的视觉元素，如颜色、大小等。

backgroundColor：图表背景色。

animation：动画效果配置，可以控制图表的动画效果、时长和延迟等。

color：图表的颜色主题，可以使用预定义的颜色主题或自定义颜色。

具体配置

xAxis，yAxis

简介

xAxis. type = 'category' string 坐标轴类型。
可选：
● 'value' 数值轴，适用于连续数据。
● 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
● 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
● 'log' 对数轴。适用于对数数据。

xAxis 的 axisLabel 设置最大长度，超出换行

var maxLength = 10 //每项显示文字个数

xAxis:{
  type: 'category',
  data: xAxisData,
  axisLabel: {
    show: true,
    interval: 0,
    formatter: function (value) {
        if (!xAxis_axisLabel_max) return value + '\n'
        var ret = '' //拼接加\n返回的类目项
        var valLength = value.length //X轴类目项的文字个数
        var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
        if (rowN > 1) {
            //如果类目项的文字大于4,
            for (var i = 0; i < rowN; i++) {
                var temp = '' //每次截取的字符串
                var start = i * maxLength //开始截取的位置
                var end = start + maxLength //结束截取的位置
                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                temp = value.substring(start, end) + '\n'
                ret += temp //凭借最终的字符串
            }
            return ret
        } else {
            return value
        }
    },
    textStyle: {
        // color: '#9bd8ed', //X轴文字颜色
        padding: [0, 0, 0, 0],
        fontSize: 12,
    },
},
}

color

渐变色

// 渐变色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  {
    offset: 0,
    color: 'red',
  },
  {
    offset: 1,
    color: 'green',
  },
]);

具体 option 示例

{
  // 设置无背景色
  backgroundColor: '',
  // 标题
  title: { text: '' },
  // 提示框
  tooltip: {
    trigger: 'axis',
    formatter(params) {
      var relVal = params[0].axisValueLabel;
      for (var i = 0, l = params.length; i < l; i++) {
        //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
        relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + parseFloat(params[i].value[1]).toFixed(2)
      }
      return relVal;
    },
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  // 直角坐标系内绘图网格，可以设置图表的位置、大小和边距等。
  grid: {
    left: '5%',
    right: '8%',
    bottom: '5%',
    top: '20%',
    containLabel: true,
  },
  // 图例组件，用于展示不同系列的名称和颜色。
  legend: {
    right: 10,
    top: 12,
    textStyle: {
      color: "#fff"
    },
    itemWidth: 12,
    itemHeight: 10,
  },
  // 坐标轴组件，用于展示数据的数值范围和刻度。
  // x轴
  xAxis: {
    type: 'time',
    boundaryGap: false,
    axisLabel: {
      formatter: function (value) {
        return parseTime(value, '{h}:{m}');
      },
      color: "#FFF",
      fontSize: 7,
    },
    nameTextStyle: {
      color: '#d4ffff'
    },
    axisLine: {
      lineStyle: {
        color: '#0B4CA9'
      }
    },
  },
  // y轴
  yAxis: {
    type: 'value',
    scale: true,
    axisLabel: {
      fontSize: 7,
      fontFamily: 'Microsoft YaHei',
      color: '#d4ffff',
    },
    nameTextStyle: {
      color: '#d4ffff'
    },
    position: 'left',
    axisLine: {
      lineStyle: {
        color: '#0B4CA9'
      }
    },
    splitLine: {
      lineStyle: {
        color: "#0B4CA9",
      }
    }
  },
  // 系列列表，用于展示图表的数据内容。
  series: []
}