When I drew the echarts table with Vue recently, I found that the size of the table did not change when I dragged it from the notebook to the monitor. It cannot adapt to the resolution of the screen. It does not meet the requirements.

$nextTick(() => {// initialize echarts instance this.mychart = Echarts.init (document.getelementById ('main')) // Use data to display chart this.mychart.setoption (this.option)})}, Mounted (){let _this=this; // Mounted (){let _this=this; window.onresize =() =>{ return (()=>{ _this.myChart.resize(); }}}) (),Copy the code

The chart configuration parameters in data are set according to your own requirements:

Data () {return {myChart: null, option: {tooltip: {trigger: 'axis',}, legend: {data: [' remaining inventory ', 'inventory usage '],}, xAxis: [{type: 'category', // date data: [],},], yAxis: [{type: 'value', name: 'inventory ', interval: 10000, axisLabel: {formatter: '{value} CPM',},}, {type: 'value', name: 'usage ', interval: 25, axisLabel: {formatter: '{value} CPM',},}, {type: 'value', name:' usage ', interval: 25, axisLabel: {value} CPM: '{value} %'},},], series: [{name: 'remnant inventory, type:' bar 'data: [], / / surplus inventory itemStyle: {normal: {color: '#ff9524',},},}, {name: 'inventory usage ', type: 'line', yAxisIndex: 1, data: [], // Usage itemStyle: {normal: {color: {color: 'rgba(249,18,8,0.98)',},},},},}Copy the code