Echarts图例(lenend)形状设置

61 阅读1分钟

eacharts的图例可以设置多种形状,通过配置lenend中的icon进行设置。

图例项的 icon ECharts 提供的标记类型包括

'circle''rect''roundRect''triangle''diamond''pin''arrow''none'

  1. 'circle'(默认): 表示图例项的形状为圆形。
  2. 'rect': 表示图例项的形状为矩形。
  3. 'roundRect': 表示图例项的形状为圆角矩形。
  4. 'triangle': 表示图例项的形状为三角形。
  5. 'diamond': 表示图例项的形状为菱形。
  6. 'pin': 表示图例项的形状为图钉。
  7. 'arrow': 表示图例项的形状为箭头。
  8. 'none': 表示图例项不显示具体的形状,通常用于自定义图例。
legend: {
    show: true,
    orient: 'vertical',
    icon: 'rect', //方形
    itemWidth: 20,
    itemHeight: 20,
 }
legend: {
    show: true,
    orient: 'vertical',
    icon: 'circle', //圆形
    itemWidth: 20,
    itemHeight: 20,
 }
legend: {
    show: true,
    orient: 'vertical',
    icon: 'roundRect', //圆角矩形
    itemWidth: 20,
    itemHeight: 20,
 }
legend: {
    show: true,
    orient: 'vertical',
    icon: 'triangle', //三角形
    itemWidth: 20,
    itemHeight: 20,
 }
legend: {
    show: true,
    orient: 'vertical',
    icon: 'triangle', //菱形
    itemWidth: 20,
    itemHeight: 20,
 }
legend: {
    show: true,
    orient: 'vertical',
    icon: 'pin', //图钉
    itemWidth: 20,
    itemHeight: 20,
 }
legend: {
    show: true,
    orient: 'vertical',
    icon: 'arrow', //箭头
    itemWidth: 20,
    itemHeight: 20,
 }
legend: {
    show: true,
    orient: 'vertical',
    icon: 'none', //通常用于自定义
    itemWidth: 20,
    itemHeight: 20,
 }