ECharts tiao

最新推荐文章于 2024-10-11 17:39:47 发布

Jiaojiao??

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量140

点赞数

分类专栏：前端文章标签： echarts javascript

本文链接：https://blog.csdn.net/Jiao543/article/details/120905737

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用Echarts库和jQuery来创建一个柱状图。它首先引入了Echarts和jQuery库，然后定义了一个div用于显示图表。在文档加载完成后，初始化Echarts实例，并通过AJAX获取数据。数据加载成功后，设置图表的配置项，包括颜色、提示、坐标轴、网格等，并将数据填充到系列中，最后调用setOption方法更新图表。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    
    <body>
        <div id="tmain" style="width: 600px; height: 400px;"></div>
    </body>
    <script type="text/javascript">
	$(document).ready(function(){
		var myChart = echarts.init(document.getElementById('tmain'));
		//X轴的名字
		var name = [];
		//Y轴的年龄值
		var num = [];
		
		$.ajax({
		    contentType: "application/json",
		    type: "post",
		    url: "",
		    dataType: "json",
		    success: function(response) {
		        for (var i = 0; i < response.data.length; i++) {
		            name[i] = response.data[i].fruit;
		        }
		
		        for (var i = 0; i < response.data.length; i++) {
		            num[i] = response.data[i].num;
		        }
		
		        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: num
		            }]
		
		        };
		        myChart.setOption(option);
		    }
		});
	});
	
		
</script>	
</body>
</html>