HTML代碼：?

<div id="lineChart" style="height: 400px;width:600px;background:white;margin:20px 0 0;"></div>

JavaScript代碼：?

// 繪制圖表，準(zhǔn)備數(shù)據(jù)var lineChart = {dataZoom: {type:'inside',//slider//orient:'horizontal'//vertical},toolbox: {show: true,feature: {dataZoom: {yAxisIndex:'none'}}},title: {text: '折線(xiàn)圖'},tooltip: {trigger: 'axis'},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'}]};//初始化echarts實(shí)例var myLineChart = echarts.init(document.getElementById('lineChart'));//使用制定的配置項(xiàng)和數(shù)據(jù)顯示圖表myLineChart.setOption(lineChart);

?

總結(jié)

以上是生活随笔為你收集整理的基于Echarts的HTML5 Canvas折线图DEMO演示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。