超详细echarts参数设置

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' // 标签位置,默认上方
    }
  }
}]

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值