echarts如何优雅的去掉x轴y轴

韭伍後

已于 2022-07-12 12:13:11 修改

阅读量5.8k

点赞数 2

分类专栏： echarts 文章标签： echarts

于 2022-07-12 11:31:29 首次发布

本文链接：https://blog.csdn.net/cai_niao5623/article/details/125739768

版权

echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

option_column: {
  color: ['#9D509F'],
  grid: {
    left: '0',
    right: '0',
    bottom: '0',
    top: '0',
    // grid 区域是否包含坐标轴的刻度标签
    containLabel: false
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      show: true
    }
  ],
  yAxis: [
    {
      show: false,
      axisLine:{
            show:false
        },
        axisTick:{
            show:false
        },
        splitLine:{
            show:false
        }
    }
  ],
  series: [
    {
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: '#9D509F'
      },
      emphasis: {
        focus: 'series'
      },
      data: [140, 232, 101, 264, 90, 340, 250]
    },
  ]
}

---------------------------------------------------------------------------------------------------------------------

option_column: {
  grid: {
    left: '0',
    right: '0',
    bottom: '0',
    top: '0',
    // grid 区域是否包含坐标轴的刻度标签
    containLabel: false
  },
  xAxis: {
    show: false,
    type: 'category',
    data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14']
  },
  yAxis: {
    show: false,
    type: 'value'
  },
  series: [
    {
      itemStyle: {
        color: '#2D8BD2'
      },
      data: [120, 160, 150, 80, 70, 110, 130,200,300,250,120,50,180,30],
      type: 'bar',
      // 柱状图宽度
      // barWidth: 10
    }
  ]
}

--------------------------------------------------------------------------------------------------------------------

option_column: {
  grid: {
    left: '0',
    right: '0',
    bottom: '0',
    top: '0',
    containLabel: false
  },
  xAxis: {
    show: false,
    type: 'value',
    boundaryGap: false
  },
  yAxis: {
    show: false,
    type: 'category',
    data: ['Brazil']
  },
  series: [
    {
      type: 'bar',
      data: [18203],
      stack: 'sear',
      itemStyle: {
        color: '#39C44A'
      },
      barWidth: 10
    },
    {
      type: 'bar',
      data: [6000],
      stack: 'sear',
      itemStyle: {
        color: '#EEEEEE'
      },
      barWidth: 10
    },
    {
      type: 'custom',
      stack: '总量',
      data: [100],
      renderItem: (params, api) => {
        const value = api.value(0)
        const endPoint = api.coord([value, 0])

        return {
          type: 'group',
          position: endPoint,
          children: [{
            type: 'path',
            shape: {
              d: 'M1024 255.996 511.971 767.909 0 255.996 1024 255.996z',
              x: 310,
              y: -20,
              width: 10,
              height: 10,
              layout: 'cover'
            },
            style: {
              fill: '#45c946'
            }
          }, {
            type: 'path',
            shape: {
              d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z',
              x: 310,
              y: 10,
              width: 10,
              height: 10,
              layout: 'cover'
            },
            style: {
              fill: '#45c946'
            }
          }]
        }
      }
    }
  ]
}