首页 前端知识 echarts 图表 去掉x轴y轴

echarts 图表 去掉x轴y轴

2024-03-17 00:03:40 前端知识 前端哥 912 809 我要收藏
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'
            }
          }]
        }
      }
    }
  ]
}

在这里插入图片描述

需求 效果实现

在这里插入图片描述

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3914.html
标签
评论
发布的文章

jQuery事件绑定

2024-04-13 09:04:31

Jquery——基础

2024-04-03 12:04:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!