echarts动态生成条形图

时间：2021-09-24 23:19:31
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<body>
    <div id="chartmain" style="width: 600px; height: 400px;"></div>
</body>
<script type="text/javascript"> function fuzhi(){ //X轴的名字 var name=[]; //Y轴的年龄值 var age=[]; $.ajax({ contentType : "application/json", type : "GET", url : "info.html", dataType : "json", success : function(data) { for(var i=0;i<data.length;i++){ name[i]=data[i].username; } for(var i=0;i<data.length;i++){ age[i]=data[i].age; } option = { color: ['#3398DB'], tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : name, axisTick: { alignWithLabel: true } } ], yAxis : [ { type : 'value' } ], series : [ { name:'年龄', type:'bar', barWidth: '60%', data:age } ] }; myChart.setOption(option); } }); var myChart = echarts.init(document.getElementById('chartmain')); } fuzhi(); </script>
</html>
标签：

相关文章