The phenomenon of

Echarts is used in the process of mobile development, because it involves mobile adaptation, so it is necessary to change the chart and legend of Echarts according to the size of the window

But I found that The myCharts() provided by Echarts only makes charts self-adaptive, not legends

demand

At this time, a problem arises. How should I extend this problem? There are two ideas:

General mobile terminal development, because I am now the development of wechat public number, so there is no problem of page zoom

  1. The simple operation is to dynamically calculate the size of the chart box when loading the page and set the legend parameter. This parameter is suitable for the device. Since the size of each page is fixed when loading, as long as it is displayed correctly at this time, it is ok
  2. Another complex point of operation is to achieve page zooming icon, legend adaptive adaptation

implementation

It is the second requirement above that is implemented

Var myChart = echarts.init(dom) console.log(mychart.getoption ()) window.onresize = resize var option // Executes during initialization Function resize() {// Get the box height const legendHeight = dom.offsetheight // Calculate the zoom multiple const multiple = ToFixed (4) // Set the required parameters const legendItemGap = 20 * multiple const legendItemWidth = 4 * multiple  const legendItemHeight = 15 * multiple option = { color: ['#3299fb', '#f8c34a', '#badcfa', '#d6548f', '#fa9414'], tooltip: { trigger: 'item' }, legend: { padding: 0, height: LegendHeight, // the height of the legend box selectedMode: false, // controls whether the display state of the series can be changed by clicking the legendOrient: legendOrient, // the layout orientation of the legend list. Top: 0, // legendLeft: legendLeft, itemGap: legendItemGap, // legendItemGap: itemWidth: legendItemWidth, // legendItemWidth: itemHeight: legendLeft, itemGap: legendItemGap, // legendItemGap: legendItemGap legendItemHeight, formatter: function (name) { return '111' + name } }, series: [ { center: ['25%', '50%'], // center of the circle position control type: 'pie', startAngle: 0, // startAngle radius: ['55%', '95%'], // radius avoidLabelOverlap: false, label: { show: true, position: 'left', overflow: 'breakAll', formatter: '{b}: {c}:{d}%' }, emphasis: { label: { show: true, fontSize: '40', fontWeight: 'bold' } }, labelLine: { show: false }, data: SimulationData}]} // listen to the chart container size and change the chart size mychart.resize () // display chart option&& mychart.setoption (option)} with the configuration items and data just specifiedCopy the code