YouTip

ECharts charts are displayed in DOM nodes (containers) with user-specified height and width. Sometimes we want the chart content to be well displayed on both PC and mobile devices, achieving responsive design. To solve this problem, ECharts has improved component positioning settings and implemented adaptive capabilities similar to (#). * * * ## ECharts Component Positioning and Layout Most 'components' and 'series' follow two positioning methods. ### left/right/top/bottom/width/height Positioning Method Among these six values, each can be an 'absolute value' or 'percentage' or 'position description'. * Absolute Value The unit is browser pixels (px), written in `number` form (without unit). For example `{left: 23, height: 400}`. * Percentage Represents the percentage of the DOM container's height or width, written in `string` form. For example `{right: '30%', bottom: '40%'}`. * Position Description * You can set `left: 'center'`, which means horizontal centering. * You can set `top: 'middle'`, which means vertical centering. The concept of these six values is similar to the six values in CSS: * left: Distance from the left boundary of the DOM container. * right: Distance from the right boundary of the DOM container. * top: Distance from the top boundary of the DOM container. * bottom: Distance from the bottom boundary of the DOM container. * width: Width. * height: Height. Horizontally, among left, right, and width, only two values need to have values, because any two values can determine the position and size of the component, for example left and right, or right and width can both determine the position and size of the component. Vertically, top, bottom, and height are similar to the horizontal case and will not be repeated. ### center / radius Positioning Method * `center` Is an array representing `[x, y]`, where `x` and `y` can be 'absolute values' or 'percentages', with the same meaning as described above. * `radius` Is an array representing `[inner radius, outer radius]`, where the inner and outer radii can be 'absolute values' or 'percentages', with the same meaning as described above. Percentage settings are very useful when adaptively sizing the container. ### Horizontal and Vertical ECharts 'elongated' components (such as legend, visualMap, dataZoom, timeline, etc.) mostly provide options for 'horizontal layout' or 'vertical layout'. For example, on narrow mobile screens, 'vertical layout' may be suitable; on PC wide screens, 'horizontal layout' may be suitable. The horizontal/vertical layout settings are generally configured in the component or series using the orient or layout option, set to 'horizontal' or 'vertical'. * * * ## Example In the following example, you can try dragging the circle in the bottom right corner, and the chart will change with the screen size. The legend and series will automatically change their layout position and method. In the example, we use jQuery to load external data. When using it, we need to introduce the jQuery library. ## Example $.when( $.getScript(''), $.getScript('') ).done(function(){ draggable.init( $('div'), myChart, { width: 700, height: 400, throttle: 70 } ); myChart.hideLoading(); option = { baseOption: { title : { text: 'Nightingale Rose Chart', subtext: 'Purely Fictional', x:'center' }, tooltip : { trigger: 'item', formatter: "{a}
{b} : {c} ({d}%)" }, legend: { data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'] }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'Radius Mode', type:'pie', roseType : 'radius', label: { normal: { show: false }, emphasis: { show: true } }, lableLine: { normal: { show: false }, emphasis: { show: true } }, data:[ {value:10, name:'rose1'}, {value:5, name:'rose2'}, {value:15, name:'rose3'}, {value:25, name:'rose4'}, {value:20, name:'rose5'}, {value:35, name:'rose6'}, {value:30, name:'rose7'}, {value:40, name:'rose8'} ] }, { name:'Area Mode', type:'pie', roseType : 'area', data:[ {value:10, name:'rose1'}, {value:5, name:'rose2'}, {value:15, name:'rose3'}, {value:25, name:'rose4'}, {value:20, name:'rose5'}, {value:35, name:'rose6'}, {value:30, name:'rose7'}, {value:40, name:'rose8'} ] } ] }, media: [ { option: { legend: { right: 'center', bottom: 0, orient: 'horizontal' }, series: [ { radius: [20, '50%'], center: ['25%', '50%'] }, { radius: [30, '50%'], center: ['75%', '50%'] } ] } }, { query: { minAspectRatio: 1 }, option: { legend: { right: 'center', bottom: 0, orient: 'horizontal' }, series: [ { radius: [20, '50%'], center: ['25%', '50%'] }, { radius: [30, '50%'], center: ['75%', '50%'] } ] } }, { query: { maxAspectRatio: 1 }, option: { legend: { right: 'center', bottom: 0, orient: 'horizontal' }, series: [ { radius: [20, '50%'], center: ['50%', '30%'] }, { radius: [30, '50%'], center: ['50%', '70%'] } ] } }, { query: { maxWidth: 500 }, option: { legend: { right: 10, top: '15%', orient: 'vertical' }, series: [ { radius: [20, '50%'], center: ['50%', '30%'] }, { radius: [30, '50%'], center: ['50%', '75%'] } ] } } ] }; myChart.setOption(option); }); [Try it »](#) To set Media Query in option, follow this format: option = { baseOption: { // Here is the basic 'atomic option'. title: {...}, legend: {...}, series: [{...}, {...}, ...], ... }, media: [ // Here defines the rules for media query. { query: {...}, // Write the rule here. option: { // Write the option when this rule is satisfied. legend: {...}, ... } }, { query: {...}, // The second rule. option: { // The option corresponding to the second rule. legend: {...}, ... } }, { // This one has no rule, meaning 'default', option: { // i.e., adopt this option when none of the rules are satisfied. legend: {...}, ... } } ]}; In the above example, baseOption and each option