echarts柱状图&&折线图常用配置

73 阅读1分钟

一、 图例 legend

1.1 字体相关设置

legend: {
  data: ['2023上半年', '2022上半年', '名义增长率'], // 默认可以不设置
  top: "24px", // 设置位置
  left: "50%",
  textStyle: {
    color: 'red', // 默认黑色
    fontSize: '18px' // 字体大小
  }
},

1.2 icon样式设置

Echarts提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

legend: {
  icon: 'pin'
}

可通过('image://...')设置图片
可通过('path://...')设置任意的矢量路径

二、 x轴 xAxis

2.1 是否显示&&值设置

xAxis: {
  show: true, // boolean
  data: ['北京','上海','深圳'] // Array
}

2.2 坐标轴刻度 xAxis.axisLabel

坐标轴刻度标签的显示间隔

设置为0时,强制显示所有标签 xAxis.axisLabel.interval = 0

刻度标签与轴线之间的距离

xAxis.axisLabel.margin = 8

xAxis: {
  axisLabel: {
    show: true, // 不设置默认展示
    interval: 0,
    margin: 8, // 不设置默认8 number
    color: 'red', // 字体颜色
    fontSize: '18' // 字体18px
  }
}

2.3 x坐标轴轴线 xAxis.axisLine

xAxis: {
  axisLine: {
    show: true,
    lineStyle: {
      color: '#222',  // x轴颜色
      width: 1 // x轴线粗细
    }
  }
}

2.4 坐标轴刻度 xAxis.axisTick

xAxis: {
  axisTick: {
    show: true, // 是否显示坐标轴刻度
    // 在 boundaryGap 为 true 的时候有效,可以保证刻度线和标签对齐
    alignWithLabel: true
  }
}