Echarts官網(wǎng)鏈接

我就是用這個(gè)實(shí)例圖來繪制的，突然感覺echarts用起來好簡單，哈哈

我下載了官方實(shí)例后，進(jìn)行了相應(yīng)的修改，下面是我的代碼：

<div class="row" id="container" style="height: 200px;width: 100%;"> <div><script type="text/javascript">//下面的數(shù)據(jù)是我從數(shù)據(jù)庫中得來的數(shù)據(jù)var x_data = <?php echo json_encode($x_array);?>;var submit_data = <?php echo json_encode($submit_array);?>;var ac_data = <?php echo json_encode($ac_array);?>;var c_data = <?php echo json_encode($c_array);?>;var cpp_data = <?php echo json_encode($cpp_array);?>;var java_data = <?php echo json_encode($java_array);?>;var python_data = <?php echo json_encode($python_array);?>;var dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};option = null;option = {title: {text: '安徽科技學(xué)院在線評測系統(tǒng)近一個(gè)月提交情況'},tooltip: {trigger: 'axis'},//這里的顏色是指legend的顏色color:['#00FFFF','#00FF00','#FFFF00','#FF7D00','#FF33FF','#0000FF'],legend: {data:['提交','正確','C','C++','JAVA','Python']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: x_data},yAxis: {type: 'value'},series: [{ smooth:true,//平滑曲線name:'提交',type:'line',stack: '提交',data:submit_data,lineStyle:{//這里的顏色是每一條曲線的顏色color:'#00FFFF'}},{smooth:true,name:'正確',type:'line',stack: '正確',data:ac_data,lineStyle:{color:'#00FF00'}},{smooth:true,name:'C',type:'line',stack: 'C',data:c_data,lineStyle:{color:'#FFFF00'}},{smooth:true,name:'C++',type:'line',stack: 'C++',data:cpp_data,lineStyle:{color:'#FF7D00'}},{smooth:true,name:'JAVA',type:'line',stack: 'JAVA',data:java_data,lineStyle:{color:'#FF33FF'}},{smooth:true,name:'Python',type:'line',stack: 'Python',data:python_data,lineStyle:{color:'#0000FF'}}]};if (option && typeof option === "object") {window.onresize = myChart.resize;//為了讓echarts表格自適應(yīng)myChart.setOption(option, true);}</script> </div> </div>

legend的顏色和曲線的顏色一一對應(yīng)后，你的圖表就會非常漂亮啦，鼠標(biāo)放到曲線上會顯示具體數(shù)值，鼠標(biāo)放到圖例上會顯示相應(yīng)曲線上的每一點(diǎn)，非常好看，就像點(diǎn)亮的燈泡

總結(jié)

以上是生活随笔為你收集整理的第一次使用echarts绘图（心得）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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