Echarts动态数据加载

最新推荐文章于 2024-10-08 08:40:47 发布

一只铁憨憨℡

最新推荐文章于 2024-10-08 08:40:47 发布

阅读量1.5k

点赞数 1

文章标签： Echarts

本文链接：https://blog.csdn.net/weixin_43774824/article/details/89155716

版权

本文介绍了如何使用Echarts进行动态数据加载，分别展示了饼形图和柱形图的实现方式，通过AJAX请求获取数据并展示。文章提供了详细的HTML和JS代码示例，并给出了实际效果的截图。读者可以通过Echarts配置项手册进一步了解详细选项。

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

一.饼形图
html页面：

<script src="../scripts/echarts.min.js" type="text/javascript"></script>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:100%; height:400px;"></div>

js代码：

var myChart = echarts.init(document.getElementById('main'));
				// 显示标题，图例和空的坐标轴
				myChart.setOption({
					color : [ '#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22","#B848C2","#696969" ], //颜色
					title : {
						text : '元数据指标',
						x : 'center'
					},
					tooltip : {
						trigger : 'item',   //触发类型，数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
						formatter : "{a} <br/>{b} : {c} ({d}%)"  //字符串模板
					},
                   legend : {				     
						orient : 'vertical',   //图例列表的布局朝向

最低0.47元/天解锁文章