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>   

实现效果：