echarts绘制柱状图
2020-02-25 19:59 默默不语 阅读(909) 评论(0) 编辑 收藏 举报
<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>
实现效果: