Echarts line chart dynamic X axis and data, echarts line chart
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> ECharts </title>
</Head>
<Body>
<! -- Step: 1 Prepare a dom for ECharts which (must) has size (width & hight) -->
<! -- Step: 1 prepare a Dom with the size (width and height) for ECharts -->
<Input type = "button" value = "test" onclick = "test ()"/>
<Div id = "main" style = "height: 500px; border: 1px solid # ccc; padding: 10px;"> </div>
<! -- Step: 2 Import echarts-all.js -->
<! -- Step: 2 introduce echarts-all.js -->
<Script src = "js/echarts-all.js"> </script>
<Script type = "text/javascript">
// Step: 3 echarts & zrender as a Global Interface by the echarts-plain.js.
// Step: 3 echarts and zrender are written as global interfaces by echarts-plain.js
Var myChart = echarts. init (document. getElementById ('main '));
MyChart. setOption ({
Tooltip :{
Trigger: 'axis'
},
Toolbox :{
Show: true,
Feature :{
Mark: {show: true },
DataView: {show: true, readOnly: false },
MagicType: {show: true, type: ['line', 'bar']},
Restore: {show: true },
SaveAsImage: {show: true}
}
},
XAxis :[
{
Type: 'category ',
Data: ['August 11', 'August 11', 'August 11', 'August 11', 'August 11', 'August 11', 'August 11', 'August 11 ', 'octoken', 'octoken', 'octoken']
}
],
YAxis :[
{
Type: 'value ',
SplitArea: {show: true}
}
],
Series :[
{
Name: 'temperature value ',
Type: 'line ',
Data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4]
}
]
});
Var now = + new Date (1997, 9, 3 );
Var oneMinutes = 60*1000*15;
Var value = Math. random () * 1000;
Function test (){
Var dates = [];
Var datas = [];
For (var I = 0; I <24*4; I ++ ){
Now = new Date (+ now + oneMinutes );
Dates. push (now. getHours () + ":" + now. getMinutes ());
Value = value + Math. random () * 21-10;
Datas. push (value );
}
MyChart. setOption ({
XAxis :[
{
Type: 'category ',
Data: dates
}
],
Series :[
{
Name: 'evaporation ',
Type: 'line ',
Data: datas
}
]
});
}
</Script>
</Body>
</Html>
Run
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
