Hbuilder实现调用echarts读json文件将数据可视化

最新推荐文章于 2024-05-31 17:00:21 发布

静默如初，安之若素

最新推荐文章于 2024-05-31 17:00:21 发布

阅读量2.1k

点赞数 3

文章标签：可视化 echarts

本文链接：https://blog.csdn.net/qq_45410037/article/details/118691784

版权

html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>会员入会年分布</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
	<script src="./js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        $(() => {
			$.get("./json/FFP_YEAR.json",
			       (data) => {
					   console.log(data);
					   
					   var lables = []
					   var showdatas = []
					   //获得基础数据lables
					   for(var index = 0;index < data.length;index++){
						   lables.push(data[index].FFP_YEAR);
						   showdatas.push(data[index].count);
					   }
					   console.log(lables);
					   console.log(showdatas);
					   
					   myChart.setOption({
                           title:{
							   text:'各年份会员入会人数',
							   left: 'center'
						   },
						   xAxis: {
						       type:'category',
							   data: lables,
							   name:'年份'
						   },
						   yAxis: {
							   type:'value',
							   name:'人数',
							   
						   },
						   series: [{
						       data: showdatas,
							   type: 'bar',
							   itemStyle: {
							               normal: {
											   // label: {
											   // 			show: true, //开启显示
											   // 			position: 'top', //在上方显示
											   // 			textStyle: { //数值样式
											   // 			color: 'black',
											   // 			fontSize: 16
											   // 			}
											   // }
											   
							   　　　　　　　　//这里是重点
							                   color: function(params) {
							                   	//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
							                       var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#b975cb','#85ca79','#9b79ca','#7da6ca'];
							                       return colorList[params.dataIndex]
							                   }
							               }
							           }
						   }]
					   });
				   });
		});

    </script>
</body>
</html>

json文件

[
	{"FFP_YEAR":"2004","count":304},
	{"FFP_YEAR":"2005","count":2689},
	{"FFP_YEAR":"2006","count":3825},
	{"FFP_YEAR":"2007","count":4862},
	{"FFP_YEAR":"2008","count":5347},
	{"FFP_YEAR":"2009","count":4725},
	{"FFP_YEAR":"2010","count":6398},
	{"FFP_YEAR":"2011","count":9113},
	{"FFP_YEAR":"2012","count":12714},
	{"FFP_YEAR":"2013","count":2579}

]

最后结果
在这里插入图片描述

静默如初，安之若素

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
2
评论
Hbuilder实现调用echarts读json文件将数据可视化

html文件<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>会员入会年分布</title>  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
复制链接

扫一扫