echarts如何顯示在頁面上

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>      

$(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);
    });