echarts繪制柱狀圖

 

<script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>

<div class="tab-pane fade" id="sheet" role="tabpanel" >
    <div id="compare_price" style="width:600px;height:400px;">
    </div>
</div>

在js中繪制折線圖

<script type="text/javascript">
 // 基於准備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('compare_price'));
    var pr = "<%=price%>";
    var pri = pr.split(" ");
    // 指定圖表的配置項和數據
    var option = {
        title: {
            text: '價格比對'
    },
    tooltip: {
            show : true
    },
    legend: {
        data:['價格']
    },
    xAxis: {
            data: ["淘寶","唯品會","蘇寧易購"]
    },
    yAxis: {
        type:'value'
    },
    series: [{
        name: '價格',
        type: 'bar',
        data: [pri[0], pri[1], pri[2]]
    }]
    };
    // 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option);
</script>   

實現效果：