欢迎光临散文网 会员登陆 & 注册

Echarts 柱状图隐藏显示刻度之类的

2023-06-09 23:25 作者:前端工程师小银丶  | 我要投稿

option = {

  tooltip: {

    trigger: 'axis', // 提示框触发类型,鼠标移动到轴上时触发显示提示框

    axisPointer: {

      type: 'shadow' // 坐标轴指示器类型为阴影指示器

    }

  },

  legend: {

    data: ['Income'] // 图例(图例是用来解释图表的符号和颜色的)数据,这里只有一个名称为 'Income' 的图例

  },

  grid: {

    left: '3%', // 图表距离容器左边的距离

    right: '4%', // 图表距离容器右边的距离

    bottom: '3%', // 图表距离容器底部的距离

    containLabel: true // grid 区域是否包含坐标轴的刻度标签,默认为 false,这里设置为 true 表示包含

  },

  xAxis: [

    {

      type: 'value', // x 轴为数值轴

      show:false, // 是否显示 x 轴

    }

  ],

  yAxis: [

    {

      type: 'category', // y 轴为类目轴

      axisTick: {

        show: false // 是否显示刻度线

      },

      axisLabel:{

        show:false // 是否显示刻度标签

      },

      axisLine:{show:false}, // 是否显示坐标轴轴线

      splitLine:{show:false}  // 是否显示分割线

    }

  ],

  series: [

    {

      name: 'Income', // 数据系列的名称

      type: 'bar', // 柱状图

      stack: 'Total', // 同类别的数据堆叠在一起

      barWidth: 20, // 柱状图的宽度

      label: {

        show: true, // 是否显示标签

        position:'right', // 标签位置在柱形的右侧

        formatter: '{c}%' // 标签的内容格式,这里显示数据值并添加百分号

      },

      emphasis: {

        focus: 'series' // 高亮显示系列

      },

      data: [8, 9, 12, 15, 18, 20, 22] // 数据已转换为百分比

    },

    

  ]

};


Echarts 柱状图隐藏显示刻度之类的的评论 (共 条)

分享到微博请遵守国家法律