| __NUXT_JSONP__("/en/concepts/axis", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I){return {data:[{article:{slug:v,toc:[{id:w,depth:p,text:x},{id:y,depth:p,text:z},{id:A,depth:p,text:B},{id:C,depth:p,text:D},{id:E,depth:p,text:F}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:v},children:[{type:b,tag:f,props:{href:"#axis",ariaHidden:k,tabIndex:l},children:[{type:b,tag:m,props:{className:[n,o]},children:[]}]},{type:a,value:"Axis"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"The x\u002Fy-axis in the Cartesian coordinate system."}]},{type:a,value:c},{type:b,tag:q,props:{id:w},children:[{type:b,tag:f,props:{href:"#x-axis-y-axis",ariaHidden:k,tabIndex:l},children:[{type:b,tag:m,props:{className:[n,o]},children:[]}]},{type:a,value:x}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Both x-axis and y-axis included axis line, tick, label and title. Some chart will use the grid to assist the data viewing and calculating."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:b,tag:"img",props:{"max-width":"830",width:G,height:G,src:"images\u002Fdesign\u002Faxis\u002Fcharts_axis_img02.jpg"},children:[]},{type:a,value:c}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"A normal 2D coordinate system has x-axis and y-axis. X-axis located at the bottom while y-axis at the left side in common. The Config is shown below:"}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"option = {\n xAxis: {\n \u002F\u002F ...\n },\n yAxis: {\n \u002F\u002F ...\n }\n \u002F\u002F ...\n};\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"The x-axis is usually used to declare the number of categories which was also called the aspects of observing the data: \"Sales Time\", \"Sales Location\" and \"product name\", etc.. The y-axis usually used to indicate the numerical value of categories. These data are used to examine the quantitative value of a certain type of data or some indicator you need to analyze, such as \"Sales Quantity\" and \"Sales Price\"."}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"option = {\n xAxis: {\n type: 'time',\n name: 'Sales Time'\n \u002F\u002F ...\n },\n yAxis: {\n type: 'value',\n name: 'Sales Quantity'\n \u002F\u002F ...\n }\n \u002F\u002F ...\n};\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"When x-axis has a large span, we can use the zoom method to display part of the data in the chart."}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"option = {\n xAxis: {\n type: 'time',\n name: 'Sales Time'\n \u002F\u002F ...\n },\n yAxis: {\n type: 'value',\n name: 'Sales Quantity'\n \u002F\u002F ...\n },\n dataZoom: []\n \u002F\u002F ...\n};\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"In two-dimensional data, there can be more than two axes. There are usually two x or y axes at the same time in ECharts. You can change the config "},{type:b,tag:f,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#xAxis.offset",rel:[r,s,t],target:u},children:[{type:a,value:"offset"}]},{type:a,value:" to avoid overlaps of axes at the same place. X-axes can be displayed at the top and bottom, y-axes at left and right."}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"option = {\n xAxis: {\n type: 'time',\n name: 'Sales Time'\n \u002F\u002F ...\n },\n yAxis: [\n {\n type: 'value',\n name: 'Sales Quantity'\n \u002F\u002F ...\n },\n {\n type: 'value',\n name: 'Sales Price'\n \u002F\u002F ...\n }\n ]\n \u002F\u002F ...\n};\n"}]}]},{type:a,value:c},{type:b,tag:q,props:{id:y},children:[{type:b,tag:f,props:{href:"#axis-line",ariaHidden:k,tabIndex:l},children:[{type:b,tag:m,props:{className:[n,o]},children:[]}]},{type:a,value:z}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"ECharts provide the config of "},{type:b,tag:f,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#xAxis.axisLine",rel:[r,s,t],target:u},children:[{type:a,value:"axisLine"}]},{type:a,value:". You can change the setting according to the demand, such as the arrow on two sides and the style of axes."}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"option = {\n xAxis: {\n axisLine: {\n symbol: 'arrow',\n lineStyle: {\n type: 'dashed'\n \u002F\u002F ...\n }\n }\n \u002F\u002F ...\n },\n yAxis: {\n axisLine: {\n symbol: 'arrow',\n lineStyle: {\n type: 'dashed'\n \u002F\u002F ...\n }\n }\n }\n \u002F\u002F ...\n};\n"}]}]},{type:a,value:c},{type:b,tag:q,props:{id:A},children:[{type:b,tag:f,props:{href:"#tick",ariaHidden:k,tabIndex:l},children:[{type:b,tag:m,props:{className:[n,o]},children:[]}]},{type:a,value:B}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:H},{type:b,tag:f,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#xAxis.axisTick",rel:[r,s,t],target:u},children:[{type:a,value:"axisTick"}]},{type:a,value:". You can change the setting according to the demand, such as the length of ticks, and the style of ticks."}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"option = {\n xAxis: {\n axisTick: {\n length: 6,\n lineStyle: {\n type: 'dashed'\n \u002F\u002F ...\n }\n }\n \u002F\u002F ...\n },\n yAxis: {\n axisTick: {\n length: 6,\n lineStyle: {\n type: 'dashed'\n \u002F\u002F ...\n }\n }\n }\n \u002F\u002F ...\n};\n"}]}]},{type:a,value:c},{type:b,tag:q,props:{id:C},children:[{type:b,tag:f,props:{href:"#label",ariaHidden:k,tabIndex:l},children:[{type:b,tag:m,props:{className:[n,o]},children:[]}]},{type:a,value:D}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:H},{type:b,tag:f,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#xAxis.axisLabel",rel:[r,s,t],target:u},children:[{type:a,value:"axisLabel"}]},{type:a,value:". You can change the setting according to the demand, such as the text alignment and the customized label content."}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:j,props:{lang:i,"line-highlights":d,"file-name":d},children:[{type:a,value:"option = {\n xAxis: {\n axisLabel: {\n formatter: '{value} kg',\n align: 'center'\n \u002F\u002F ...\n }\n \u002F\u002F ...\n },\n yAxis: {\n axisLabel: {\n formatter: '{value} ¥',\n align: 'center'\n \u002F\u002F ...\n }\n }\n \u002F\u002F ...\n};\n"}]}]},{type:a,value:c},{type:b,tag:q,props:{id:E},children:[{type:b,tag:f,props:{href:"#example",ariaHidden:k,tabIndex:l},children:[{type:b,tag:m,props:{className:[n,o]},children:[]}]},{type:a,value:F}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"The y-axis on the left side represents the monthly average temperature in Tokyo, the y-axis on the right side represents the precipitation of Tokyo. The x-axis represents the time. It reflects the trend and relation between the average temperature and precipitation."}]},{type:a,value:c},{type:b,tag:g,props:{className:[h]},children:[{type:b,tag:"md-live",props:{lang:i,layout:"tb"},children:[{type:a,value:"option = {\n tooltip: {\n trigger: 'axis',\n axisPointer: { type: 'cross' }\n },\n legend: {},\n xAxis: [\n {\n type: 'category',\n axisTick: {\n alignWithLabel: true\n },\n axisLabel: {\n rotate: 30\n },\n data: [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December'\n ]\n }\n ],\n yAxis: [\n {\n type: 'value',\n name: 'Precipitation',\n min: 0,\n max: 250,\n position: 'right',\n axisLabel: {\n formatter: '{value} ml'\n }\n },\n {\n type: 'value',\n name: 'Temperature',\n min: 0,\n max: 25,\n position: 'left',\n axisLabel: {\n formatter: '{value} °C'\n }\n }\n ],\n series: [\n {\n name: 'Precipitation',\n type: 'bar',\n yAxisIndex: 0,\n data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]\n },\n {\n name: 'Temperature',\n type: 'line',\n smooth: true,\n yAxisIndex: 1,\n data: [\n 6.0,\n 10.2,\n 10.3,\n 11.5,\n 10.3,\n 13.2,\n 14.3,\n 16.4,\n 18.0,\n 16.5,\n 12.0,\n 5.2\n ]\n }\n ]\n};\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"These are the concise intro of the usage of axis config. Check more details at: "},{type:b,tag:f,props:{href:"https:\u002F\u002Fecharts.apache.org\u002Foption.html#xAxis",rel:[r,s,t],target:u},children:[{type:a,value:"Official Website"}]},{type:a,value:"."}]}]},dir:"\u002Fen\u002Fconcepts",path:"\u002Fen\u002Fconcepts\u002Faxis",extension:".md",createdAt:I,updatedAt:I},postPath:"en\u002Fconcepts\u002Faxis"}],fetch:{},mutations:[]}}("text","element","\n","","p","a","div","nuxt-content-highlight","js","md-code-block","true",-1,"span","icon","icon-link",2,"h2","nofollow","noopener","noreferrer","_blank","axis","x-axis-y-axis","x-axis, y-axis","axis-line","Axis Line","tick","Tick","label","Label","example","Example","100%","ECharts provide the config ","2021-08-02T05:33:02.867Z"))); |