echarts 实现简单的图表

最新推荐文章于 2023-03-02 14:10:08 发布

lamu_js

最新推荐文章于 2023-03-02 14:10:08 发布

阅读量634

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/lamu_js/article/details/125575744

版权

本文介绍了如何使用echarts这个JavaScript图表库来创建图表，包括基本框架、基础选项、option常用属性的设置，以及样式的调整，如主题和堆叠效果。还涉及动态更新图表的事件监听和触发，以及地图的使用。

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

echarts是基于javascript的图表插件(canvas)百度开发捐赠给apache基金会开源

基本框架

<script src="./js/echarts.min.js"></script>
<div id="app">
	//定义盒子大小		
</div>
//初始化
var echart = echarts.init(document.getElementById('app'));

基础的选项

var option = {
    title:{text:'小吴的睡眠时间'}, // 标题文本
    legend:{data:['睡眠时长','作业耗时','成绩']},  // 图例
	tooltip:{},  // 鼠标提示
	yAxis:{},  // y轴线
	xAxis:{data:['20日','21日','22日','23日','24日','25日','26日']},// x轴线
	series:[ // 系列数据
		   {name:'睡眠时长',type:'bar',data:[8,5,4,7,3,12,14]}, // 数据
		   {name:'作业耗时',type:'line',data:[1,2,4,3,5,1,0],smooth:true},
		   {
			  name:'成绩',
			  type:'pie',
			  data:[
					{name:'html',value:90},
					{name:'js',value:80},
					{name:'nodejs',value:60},
					],
					radius:[100,60], //半径
					left:0,          //左偏移
					top:-200,        //顶部偏移
					
		   }
        ]
}
//设置新选项
echart.setOption(option)