vue中使用Echarts隐藏x轴,y轴,刻度线,网格等属性展示效果

制作不需坐标轴的echarts图

示例代码 在线测试

option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          show:false,
          //   data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value",
          show:false,
          splitLine: { show: false }, //去除网格线
        //   nameTextStyle: {
        //     color: "#abb8ce"
        //   },
        //   axisLabel: {
        //     color: "#abb8ce"
        //   },
        //   axisTick: {
        //     //y轴刻度线
        //     show: false
        //   },
        //   axisLine: {
        //     //y轴
        //     show: false
        //   }
        },
        series: [
          {
            data:[20,14,6,16,2,30],
            type: "line",
            smooth: true,
            areaStyle: {}
          }
        ],
        grid:{
            // top:"15%", // 与容器顶部的距离
            // bottom:"55%"  // 与容器底部的距离
        }
      };

 

 

posted @   JackieDYH  阅读(128)  评论(0编辑  收藏  举报  
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示