淘先锋技术网

首页 1 2 3 4 5 6 7

ECharts 的参数设置非常多,这里列出了一些比较常用的:

1.title

用于设置图表标题,包括主标题和副标题。

title: {
  text: '标题',
  subtext: '副标题',
  left: 'center' // 标题位置,默认居中
}

2.tooltip

用于显示数据提示框。

tooltip: {
  trigger: 'axis', // 触发类型,还可以是 'item'
  axisPointer: {
    type: 'shadow' // 坐标轴指示器类型,还可以是 'line' 和 'cross'
  }
}

3.legend

用于设置图例。

legend: {
  data: ['数据1', '数据2'], // 图例数据
  selectedMode: 'single', // 是否支持选中模式,还可以是 'multiple' 和 'false'
  orient: 'horizontal', // 图例方向,默认水平
  top: 'top', // 图例位置,默认上方
  textStyle: {
    color: '#333' // 图例文字颜色
  }
}

4.xAxis和yAxis

分别用于设置 x 轴和 y 轴。

xAxis: {
  type: 'category', // 坐标轴类型,还可以是 'value'、'time'、'log' 等
  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] // 坐标轴数据
},
yAxis: {
  type: 'value', // 坐标轴类型,还可以是 'category'、'time'、'log' 等
  min: 0, // 坐标轴最小值,默认自适应
  max: 100, // 坐标轴最大值,默认自适应
  splitNumber: 5, // 坐标轴分割段数,默认为5
  axisLine: {
    show: false // 是否显示坐标轴线,默认显示
  },
  axisTick: {
    show: false // 是否显示坐标轴刻度,默认显示
  },
  axisLabel: {
    textStyle: {
      color: '#333' // 坐标轴文字颜色
    }
  }
}

5.series

用于设置数据系列。

series: [{
  name: '数据1', // 数据系列名称
  type: 'line', // 图表类型,还可以是 'bar'、'scatter'、'pie' 等
  data: [10, 20, 30, 40, 50, 60, 70], // 数据系列
  lineStyle: {
    normal: {
      color: '#f00' // 折线颜色
    }
  },
  itemStyle: {
    normal: {
      color: '#f00' // 点颜色
    }
  },
  label: {
    normal: {
      show: true, // 是否显示标签,默认不显示
      position: 'top' // 标签位置,默认上方
    }
  }
}]