echarts自定义样式

自定义图例样式

参考：echarts-legend

legend: [
        {
            data: [
                {
                    name: '正常',
                    icon: 'rect'
                }
            ],
            itemWidth: 16,
            itemHeight: 4,
            top: '6%',
            left: '35%',
            textStyle: {
                color: '#626C78',
                fontSize: 14
            }
        },
        {
            data: [
                {
                    name: '异常',
                    icon: 'rect'
                }
            ],
            itemWidth: 16,
            itemHeight: 4,
            top: '6%',
            left: '50%',
            textStyle: {
                color: '#626C78',
                fontSize: 14
            }
        },
        {
            top: '5.5%',
            left: '65%',
            textStyle: {
                color: '#626C78',
                fontSize: 14
            },
            itemWidth: 16,
            itemHeight: 16,
            data: [
                {
                    name: '安全范围',
                    icon: 'rect'
                }
            ]
        }
    ],

注意：不要在series.itemStyle中设置borderWidth，如果设置这个会造成图例的高亮状态和置灰状态样式大小不一样。

自定义坐标轴指示器样式

一般来说，axisPointer 的具体配置项会配置在各个轴中（如 xAxis.axisPointer）或者 tooltip 中（如 tooltip.axisPointer）。

但是这几个选项只能配置在全局的 axisPointer 中：axisPointer.triggerOn、axisPointer.link。

        axisPointer: {
            show: true,
            type: 'line'  // 指示器类型。
            lineStyle: {
                type: 'solid' // 线的类型
                color: '#000' // 线样式
            },
            z: 1 // 层级
        }

自定义边距

直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。

在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，在 ECharts 3 中可以存在任意个 grid 组件。

grid: {
        containLabel:true, // grid 区域是否包含坐标轴的[刻度标签]
        top:"10%",
        right: 10,
        bottom: 20,
        left:"10%"
      },

containLabel

• containLabel 为 false 的时候：

  • grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。
  • 这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。

• containLabel 为 true 的时候：

  • grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
  • 这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。

自定义提示组件

tooltip: {
        // 触发方式：设置为坐标轴触发提示框
        trigger: 'axis',
        // 设置提示框浮层位置 point: 鼠标位置
        position: function (pos, params, dom, rect, size) {
            return [pos[0] - size.contentSize[0] - 10, pos[1] - size.contentSize[1] - 10];
        },
        padding: 0,
        // 提示框浮层内容格式器: 自定义提示框样式
        formatter: function (params) {
            // params 是 formatter 需要的数据集
            let content = '';
            content += `
            <div style="line-height: 25px; padding:10px 16px">
                <div>宽度：97m:</div>
                <div>高度：97m</div>
            </div>`;

            return content;
        }
    },

position

参考：position

• Array

  通过数组表示提示框浮层的位置，支持数字设置绝对位置，百分比设置相对位置。

  示例:

    // 绝对位置，相对于容器左侧 10px, 上侧 10 px
    position: [10, 10]
    // 相对位置，放置在容器正中间
    position: ['50%', '50%']
  

• Function

  回调函数，格式如下：

    (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array
  

  参数：
  point: 鼠标位置，如 [20, 40]。
  params: 同 formatter 的参数相同。
  dom: tooltip 的 dom 对象。
  rect: 只有鼠标在图形上时有效，是一个用x, y, width, height四个属性表达的图形包围盒。
  size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。

  返回值：
  可以是一个表示 tooltip 位置的数组，数组值可以是绝对的像素值，也可以是相 百分比。
  也可以是一个对象，如：{left: 10, top: 30}，或者 {right: '20%', bottom: 40}。

  如下示例：

    position: function (point, params, dom, rect, size) {
        // 固定在顶部
        return [point[0], '10%'];
    }
  

  或者：

    position: function (pos, params, dom, rect, size) {
        // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
        var obj = {top: 60};
        obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
        return obj;
    }