深入 echarts 如何设置渐变色？echarts 如何设置圆角？echarts 如何设置自定义 Label?

echarts 如何设置渐变色，顺带介绍如何设置圆角

在 echarts 如果要设置渐变色，我们要用到一个 API echarts.graphic.LinearGradient，使用这个 API，我们可以设置任何图形的渐变色。下面让我们看一下这个 API 在 zrender 的源码 https://github.com/ecomfe/zrender/blob/master/src/graphic/LinearGradient.js 中是如何定义的，来深入了解一下其究竞。

import * as zrUtil from '../core/util';
import Gradient from './Gradient';

/**
 * x, y, x2, y2 are all percent from 0 to 1 // 可以知道，其参数都是按比例来设置的，
 * @param {number} [x=0] // 渐变色开始的坐标 x 的位置
 * @param {number} [y=0] // 渐变色开始的坐标 y 的位置
 * @param {number} [x2=1] // 渐变色结束的坐标 x2 的位置
 * @param {number} [y2=0] // 渐变色结束的坐标 x2 的位置
 * @param {Array.<Object>} colorStops // 渐变色主要设置，用数组来设，格式：[{ offset: 0, color: '#FEDC54' }, { offset: 1, color: '#FEA250' }]
 * @param {boolean} [globalCoord=false] // 坐标是还是相对于全局？
 */
var LinearGradient = function (x, y, x2, y2, colorStops, globalCoord) {
    // Should do nothing more in this constructor. Because gradient can be
    // declard by `color: {type: 'linear', colorStops: ...}`, where
    // this constructor will not be called.

    this.x = x == null ? 0 : x;

    this.y = y == null ? 0 : y;

    this.x2 = x2 == null ? 1 : x2;

    this.y2 = y2 == null ? 0 : y2;

    // Can be cloned
    this.type = 'linear'; // 线性渐变

    // If use global coord
    this.global = globalCoord || false;

    Gradient.call(this, colorStops);
};

LinearGradient.prototype = {

    constructor: LinearGradient
};

zrUtil.inherits(LinearGradient, Gradient); // LinearGradient 继承于 Gradient

export default LinearGradient;

虽然，在 echarts API https://www.echartsjs.com/zh/api.html#echarts 中找不到对于 LinearGradient 的详细介绍，但通过上面的源码，我们大概知道每个参数的用法，下面我们就可以针对性的用起来了，比如：我们定义了 3 种渐变颜色来设置柱状图的 itemStyle ，顺带介绍如何设置圆角，如下：

import echarts from 'echarts'

const colorList = [
  new echarts.graphic.LinearGradient(
    0, 0, 0, 1,
    [
      { offset: 0, color: '#FEDC54' },
      { offset: 1, color: '#FEA250' }
    ]
  ),
  new echarts.graphic.LinearGradient(
    0, 0, 0, 1,
    [
      { offset: 0, color: '#02BEB2' },
      { offset: 1, color: '#05DAD1' }
    ]
  ),
  new echarts.graphic.LinearGradient(
    0, 0, 0, 1,
    [
      { offset: 0, color: '#F15443' },
      { offset: 1, color: '#FE904B' }
    ]
  )
]
// ...
{
  itemStyle: {
    normal: {
      color: function (params) { // echarts 如何设置渐变色，总共有 3 个柱，每个柱都有不同的渐变色，如果超过 3 个柱，下面要稍改一下
        return colorList[params.dataIndex]
      },
      barBorderRadius: [10, 10, 0, 0] // echarts 如何设置圆角，与设置 border-radius 类似
    }
  }
}
// ...

echarts 如何设置自定义 Label

通过 API https://www.echartsjs.com/zh/option.html#xAxis.axisLabel.formatter 我们可以设置通用的 label 文字样式，但如果想要对 label 里面的内容拆分来单独设置样式，可以使用 formatter。这里要结合 rich 来使用。

    const rich = {
      b: {
        fontSize: 18,
        fontWeight: 'bold'
      },
      n: {
        fontSize: 14,
      }
    }
	// ...
	{
        label: {
          show: true,
          position: 'top',
          formatter: '{b|{@quantity}} {n|人}', // 设里分别给 @quantity　与 '人' 设置了上面定义了的 b 与 n 两种样式
          rich // 把上面定义的两种样式引入进来使用
        }
	}
	// ...

当然官方还有个经典例子，把 formatter 设置为函数，就是格式化时间的用法，如下：

// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
    // 格式化成 月/日，只在第一个刻度显示年份
    var date = new Date(value);
    var texts = [(date.getMonth() + 1), date.getDate()];
    if (index === 0) {
        texts.unshift(date.getYear());
    }
    return texts.join('/');
}