echarts如何顯示在頁面上

1.引入echarts的相關.js文件

<script src="js/echarts.min.js"></script>

2.新建一個div，style自己定，但必須要有width和height

<div id="history_state" style="width: 400px;height: 200px"></div>

3.document.ready()中設置echarts的option

$(document).ready(function(e) {option = {tooltip : {trigger: 'axis',axisPointer : { // 坐標軸指示器，坐標軸觸發有效type : 'shadow' // 默認為直線，可選為：'line' | 'shadow' }},calculable : true,yAxis : [{type : 'value'}],xAxis : [{type : 'category',data : ['1','2','3','4','5','6','7','8','9','10','11','12']}],series : [{name:'直接訪問',type:'bar',stack: '總量',itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},data:[320, 302, 301, 334, 390, 330, 320]},{name:'郵件營銷',type:'bar',stack: '總量',itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},data:[120, 132, 101, 134, 90, 230, 210]}]};
　　　//獲取echarts對象var history_state = echarts.init(document.getElementById('history_state'));//設置option
　　　history_state.setOption(option);});

這樣就能顯示了。

補充。。document.ready()方法是在dom加載完成，頁面完全呈現后調用的。

轉載于:https://www.cnblogs.com/EnzoDin/p/6445364.html

總結

以上是生活随笔為你收集整理的echarts如何显示在页面上的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。