[{"data":1,"prerenderedAt":314},["ShallowReactive",2],{"article-4":3},{"id":4,"title":5,"body":6,"create":301,"description":302,"extension":303,"labels":304,"locked":306,"meta":307,"navigation":308,"path":309,"seo":310,"stem":311,"update":312,"__hash__":313},"articles/article/4.md","Echarts-坐标轴",{"type":7,"value":8,"toc":296},"minimark",[9,28,32,43,51,98,102,117,156,159,168,211,214,224,244,255,258,268,283,286],[10,11,12,17,18,21,22,24],"p",{},[13,14],"img",{"alt":15,"src":16},"bar_none_axis","https://user-images.githubusercontent.com/108915955/235289375-af18047d-93dc-47b3-9f1a-bb112d98a893.png","\n在一些后台管理系统的数据面板上，我看到过像这种没有坐标轴的图表，那么如何使用 echarts 来实现这种效果？",[19,20],"br",{},"\n首先，看看 echarts 的坐标轴属性，图示如下：",[19,23],{},[13,25],{"alt":26,"src":27},"only_axis_rect","https://user-images.githubusercontent.com/108915955/235289405-5ba74a73-ace3-4cdb-81ec-062b7ef09f29.jpg",[29,30,31],"h3",{"id":31},"详细配置",[10,33,34,35,42],{},"这里只列举出一些常用的属性，其他的可以翻阅 ",[36,37,41],"a",{"href":38,"rel":39},"https://echarts.apache.org/zh/option.html",[40],"nofollow","配置文档","。",[10,44,45,46,50],{},"这些配置里面有一个通用的设置 ",[47,48,49],"strong",{},"lineStyle","：",[52,53,54,73,79],"ul",{},[55,56,57,60,61,65,66,65,69,72],"li",{},[47,58,59],{},"color","：颜色支持 ",[62,63,64],"code",{},"HEX","、",[62,67,68],{},"RGB",[62,70,71],{},"RGBA"," 格式。",[55,74,75,78],{},[47,76,77],{},"width","：线宽。",[55,80,81,50,84,65,87,65,90,93,94,97],{},[47,82,83],{},"type",[62,85,86],{},"\"dashed\"",[62,88,89],{},"\"dotted\"",[62,91,92],{},"\"solid\""," v5.x 支持数字或数字数组来控制虚线类型如 ",[62,95,96],{},"[5,10]"," 会呈现 5 实线 10 虚线的轴线。",[99,100,101],"h4",{"id":101},"轴线",[10,103,104,105,108,109,112,113,116],{},"通过 ",[62,106,107],{},"yAxis"," 或 ",[62,110,111],{},"xAxis"," 下的 ",[62,114,115],{},"axisLine"," 属性配置。",[52,118,119,125,142,152],{},[55,120,121,124],{},[47,122,123],{},"show","(boolean)：显示或隐藏轴线。",[55,126,127,130,131,134,135,138,139,42],{},[47,128,129],{},"symbol","(String|Array)：设置轴线两头是否包含箭头，默认为 ",[62,132,133],{},"\"none\"","，也可以设置为 ",[62,136,137],{},"\"arrow\"","\n这时坐标轴两端都会有箭头出现，想要只有外侧出现箭头，需要设置为 ",[62,140,141],{},"[\"none\",\"arrow\"]",[55,143,144,147,148,151],{},[47,145,146],{},"symbolSize","(Array)：设置箭头宽高，如：",[62,149,150],{},"[10,20]","，index0 表示宽度为 10，index1 表示高度为 20。",[55,153,154],{},[47,155,49],{},[99,157,158],{"id":158},"刻度",[10,160,104,161,108,163,112,165,116],{},[62,162,107],{},[62,164,111],{},[62,166,167],{},"axisTick",[52,169,170,180,186,201,207],{},[55,171,172,175,176,179],{},[47,173,174],{},"alignWithLabel","(boolean)：是否和标签居中对齐，默认为 ",[62,177,178],{},"false","，就是在标签的右侧。",[55,181,182,185],{},[47,183,184],{},"interval","(number)：设置隔几个标签显示一个刻度，会在你设置的数字上 + 1。",[55,187,188,191,192,195,196,198,199,42],{},[47,189,190],{},"inside","(boolean)：刻度线朝向，",[62,193,194],{},"true"," 为朝内，",[62,197,178],{}," 为朝外，默认 ",[62,200,178],{},[55,202,203,206],{},[47,204,205],{},"length","(number)：刻度线长度，可以非常非常长，超过图表。",[55,208,209],{},[47,210,49],{},[99,212,213],{"id":213},"分割线",[10,215,104,216,108,218,112,220,223],{},[62,217,107],{},[62,219,111],{},[62,221,222],{},"splitLine"," 配置",[52,225,226,235,240],{},[55,227,228,230,231,234],{},[47,229,123],{},"(boolean)：是否显示分割线，type 为 ",[62,232,233],{},"category"," 的分割线默认不显示。",[55,236,237,239],{},[47,238,184],{},"(number)：设置隔几个标签显示一个分割线，会在你设置的数字上 + 1。",[55,241,242],{},[47,243,49],{},[10,245,246,247,108,249,112,251,254],{},"分割线数量：",[62,248,107],{},[62,250,111],{},[62,252,253],{},"splitNumber"," 属性设置。",[99,256,257],{"id":257},"轴标签",[10,259,104,260,108,262,112,264,267],{},[62,261,107],{},[62,263,111],{},[62,265,266],{},"axisLabel"," 属性设置：",[52,269,270,275],{},[55,271,272,274],{},[47,273,123],{},"(boolean)：显示或隐藏，默认显示。",[55,276,277,279,280,282],{},[47,278,190],{},"(boolean)：标签位置，默认 ",[62,281,178],{}," 即标签在轴线外。",[10,284,285],{},"所以想实现开头就提到的无座标轴柱状图，我们可以这样设置图表的配置项：",[287,288,294],"pre",{"className":289,"code":291,"language":292,"meta":293},[290],"language-js","let option = {\n  xAxis: {\n    type: 'category',\n    axisLabel:{\n      show: false // 隐藏坐标轴标签\n    },\n    axisLine:{\n      show: false // 隐藏轴线\n    },\n    axisTick:{\n      show: false // 隐藏刻度线\n    },\n    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n  },\n  yAxis: {\n    axisLabel:{\n      show: false\n    },\n    splitLine:{\n      show: false // 隐藏分割线\n    },\n    type: 'value'\n  },\n  series: [\n    {\n      data: [120, 200, 150, 80, 70, 110, 130],\n      type: 'bar'\n    }\n  ]\n};\n","js","",[62,295,291],{"__ignoreMap":293},{"title":293,"searchDepth":297,"depth":297,"links":298},2,[299],{"id":31,"depth":300,"text":31},3,"2023-04-29T07:22:08.000Z","\n在一些后台管理系统的数据面板上，我看到过像这种没有坐标轴的图表，那么如何使用 echarts 来实现这种效果？\n首先，看看 echarts 的坐标轴属性，图示如下：","md",[305],"echarts",false,{},true,"/article/4",{"title":5,"description":302},"article/4","2023-05-15T02:39:45.000Z","lpHEf47qjeK5iSkHP4FRwLXXs4EY0m6yrypNrSr9EcM",1755235549204]