echarts自定义图例

一、echarts自定义图例css

echarts自定义图例css，经常用到的是修改图例的字体大小、颜色、字体样式等，如下面的代码：

//修改图例字体大小
.legend-text {
  font-size: 14px;
}

//修改图例字体颜色
.legend-text {
  fill: #666666;
}

//修改图例字体样式
.legend-text {
  font-family: sans-serif;
}

通过定义样式类来修改图例样式，代码中的`.legend-text`为样式类名，可根据需求自行修改。

二、echarts自定义y轴刻度

在echarts中，默认情况下，y轴刻度是自动生成的，如果数据量过大，可能会出现刻度过多，影响数据的可视性，这时就需要自定义y轴刻度，如下所示：

option: {
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} K' //设置刻度格式
    },
    axisTick: {
      show: false //隐藏刻度
    },
    splitLine: {
      show: false //隐藏网格线
    },
    data: ['0K', '50K', '100K', '150K', '200K'] //设置刻度
  }
}

由于y轴刻度是value类型，所以可通过给定特定的数值来设置刻度，也可通过axisLabel中的formatter属性来设置刻度格式，需要注意的是，如果数据过多，刻度太密会影响可视性，可通过调整刻度间距或删除部分刻度来解决。

三、echarts自定义图例文本加图标

有时候，需要在图例文本中添加特定的图标或符号，可以通过以下代码来实现：

option: {
  legend: {
    data: [{
      name: '男性会员',
      textStyle: {
        fontFamily: 'sans-serif',
        fontSize: '14px',
        color: '#333'
      },
      icon: 'image:///img/male.png' //添加图标
    }, {
      name: '女性会员',
      textStyle: {
        fontFamily: 'sans-serif',
        fontSize: '14px',
        color: '#333'
      },
      icon: 'image:///img/female.png' //添加图标
    }]
  },
}

代码中，`icon`属性的值为添加的图标路径，需先将图标上传至服务器，并替换代码中的路径。

四、echarts自定义图例甘特图

echarts自定义图例甘特图，可以通过以下代码来实现：

option: {
  legend: {
    data: ['任务1', '任务2', '任务3', '任务4'],
    textStyle: {
      fontSize: 14,
      fontWeight: 'bold'
    },
    top: '10'
  },
  xAxis: {
    type: 'time',
    splitLine: {
      show: false
    },
    axisLine: {
      onZero: false
    }
  },
  yAxis: {
    type: 'category',
    data: ['任务1', '任务2', '任务3', '任务4'],
    splitLine: {
      show: false
    },
  },
  series: [{
    type: 'bar',
    name: '任务1',
    stack: '任务',
    itemStyle: {
      normal: {
        color: '#3ba0ff',
        barBorderRadius: [0, 5, 5, 0]
      }
    },
    data: [{
      value: [
        new Date('2022-07-01'),
        new Date('2022-07-07'),
      ],
      itemStyle: {
        normal: {
          color: '#3ba0ff',
          barBorderRadius: [0, 5, 5, 0]
        }
      }
    }]
  }, {
    type: 'bar',
    name: '任务2',
    stack: '任务',
    itemStyle: {
      normal: {
        color: '#6acf63',
        barBorderRadius: [0, 5, 5, 0]
      }
    },
    data: [{
      value: [
        new Date('2022-07-04'),
        new Date('2022-07-08'),
      ],
      itemStyle: {
        normal: {
          color: '#6acf63',
          barBorderRadius: [0, 5, 5, 0]
        }
      }
    }]
  }, {
    type: 'bar',
    name: '任务3',
    stack: '任务',
    itemStyle: {
      normal: {
        color: '#fec42c',
        barBorderRadius: [0, 5, 5, 0]
      }
    },
    data: [{
      value: [
        new Date('2022-07-05'),
        new Date('2022-07-10'),
      ],
      itemStyle: {
        normal: {
          color: '#fec42c',
          barBorderRadius: [0, 5, 5, 0]
        }
      }
    }]
  }, {
    type: 'bar',
    name: '任务4',
    stack: '任务',
    itemStyle: {
      normal: {
        color: '#f74e41',
        barBorderRadius: [0, 5, 5, 0]
      }
    },
    data: [{
      value: [
        new Date('2022-07-03'),
        new Date('2022-07-06'),
      ],
      itemStyle: {
        normal: {
          color: '#f74e41',
          barBorderRadius: [0, 5, 5, 0]
        }
      }
    }]
  }]
}

通过设置x轴为时间类型，y轴为分类类型，并设置各条甘特条目的起始时间和结束时间来实现自定义图例甘特图的绘制。

五、echarts自定义图例文字

自定义图例文字，可以通过以下代码实现：

option: {
  legend: {
    data: [
      {name:'苹果'},
      {name:'梨'},
      {name:'桔子'}
    ],
    formatter: function (name) {
      if (name ==='苹果') {
        return 'This is an apple'
      } else if (name === '梨') {
        return 'This is a pear'
      } else {
        return 'This is an orange'
      }
    }
  },

通过给定各个图例的名称，并在formatter中设置各个图例对应的自定义文字即可实现自定义图例文字的绘制。

六、echarts自定义图例排列

echarts自定义图例排列方式，默认是横向排列，可通过以下代码设置为纵向排列：

option: {
  legend: {
    data: ['苹果', '梨', '桔子'],
    orient: 'vertical' //纵向排列
  }
}

通过将orient属性的值设置为‘vertical’即可实现纵向排列的自定义图例。

七、echarts自定义图例带合计

echarts自定义图例带合计，可通过以下代码实现：

option: {
  legend: {
    data: ['苹果', '梨', '桔子', {
      name: '合计',
      itemStyle: {
        normal: {
          color: '#f74e41'
        }
      }
    }],
    top: 20
  },
  series: [{
    type: 'pie',
    data: [{
      name: '苹果',
      value: 12
    }, {
      name: '梨',
      value: 13
    }, {
      name: '桔子',
      value: 15
    }],
   label: {
      show: false
    }
  }, {
    type: 'pie',
    center: ['75%', '50%'],
    radius: [0, '40%'],
    data: [{
      name: '苹果',
      value: 12
    }, {
      name: '梨',
      value: 13
    }, {
      name: '桔子',
      value: 15
    }],
    label: {
      show: false
    }
  }]
}

通过在legend中添加一个名称为‘合计’的图例，并设置该图例的颜色，可在图例中添加合计项，同时，通过在series中添加第二个饼图来绘制合计部分的饼图，并设置其在界面中的位置。

八、echarts自定义图例含合计

除了在图例中添加合计项外，也可以通过在饼图中添加合计项的方式来绘制自定义图例，具体实现代码如下：

option: {
  legend: {
    data: ['苹果', '梨', '桔子'],
    top: 20
  },
  series: [{
    type: 'pie',
    data: [{
      name: '苹果',
      value: 12
    }, {
      name: '梨',
      value: 13
    }, {
      name: '桔子',
      value: 15
    }, {
      name: '合计',
      value: 40,
      itemStyle: {
        normal: {
          color: '#f74e41'
        }
      }
    }],
    label: {
      show: false
    }
  }]
}

通过在series中添加名称为‘合计’的数据项，并设置其颜色，即可在饼图中添加合计项，从而实现自定义图例。

九、echarts图例样式

echarts图例样式，可以通过以下代码实现：

option: {
  legend: {
    data: ['苹果', '梨', '桔子'],
    textStyle: {
      fontWeight: 'bold',
      fontSize: 16,
      lineHeight: 40
    },
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderRadius: 5,
    padding: 10
  },
}

通过设置textStyle属性来修改文字样式，设置backgroundColor属性来修改图例背景颜色，设置borderRadius属性来修改图例圆角，设置padding属性来控制图例内部的间距。

十、echarts图例位置设置

echarts图例位置设置，可以通过以下代码实现：

option: {
  legend: {
    data: ['苹果', '梨', '桔子'],
    orient: 'vertical',
    left: 10, //图例距离左边距离
    top: 20, //图例距离上方距离
    align: 'auto' //图例水平对齐方式
  },
}

通过设置left和top属性来控制图例与界面左上角的距离，align属性来控制图例的水平对齐方式，可根据自身需求自行调整。