1. When the window is resized found, Echarts FIG inserted into the page is not updated in real time. as follows:
Original:
2. When the browser after narrowing phenomenon :( apparently did not realize the adaptive)
3. Successful sample code:
echarts.init myChart4 = var (document.getElementById ( 'View4'));
// the specified data and the chart CI
var = {Option4
title: {
Show: to true,
text: '┃ trends',
// subtext:' testing ', @ subtitle
left: 70,
// the borderColor:' Red ', border color //
// borderWidth: 1, // width of the border
},
// assembly kit
Toolbox: {
Show: to true,
Feature: {
DataView: {
Show: to true
},
Restore: {
Show: to true
},
dataZoom: {// core code
Show: to true
},
saveAsImage: {
Show: to true
},
magicType: {
type: [ 'Line', 'bar']
}
}
},
ToolTip: {
trigger: 'axis' // pop assembly
},
Legend: {
Data: [ 'Comments amount (QTY)']
},
XAXIS: {
Data: [ "00:00", "03:00", "06:00 "," 09:00 "," 12:00 "," 15:00 "," 18:00 "," 21:00 "]
},
YAXIS: {
},
Series: [{
name: 'comments amount (QTY ) ',
type:' Line ',
Data: [15, 20 is, 25, 18 is,. 17, 21,12,18],
markPoint: {// set the maximum and minimum display
Data: [
{type:' max ' , name: 'maximum', SymbolSize: '35 '},
{type:' min ', name:' minimum ', SymbolSize: '35'}
]
},
ItemStyle: {
Normal: {
Color: '# 5CACEE'
}
}
markLine: {// shows the average level
Data: [
{type: 'Average', name: 'average'}
]
}
}]
};
// just use the specified configuration data items and display the chart.
myChart4.setOption (Option4);
// global settings Echrts - graph changes according to the size of the window
window.onresize = function () {
myChart1.resize ();
myChart2.resize ();
myChart3.resize ();
myChart4.resize () ;
}
4. core code:
// Global Settings Echrts - depending on the size of the chart window changes
window.onresize = function(){
myChart1.resize();
myChart2.resize();
myChart3.resize();
myChart4.resize();
}