Echarts的解释及基本使用

最新推荐文章于 2024-08-04 16:33:59 发布

刘菜菜阿~

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量1.9k

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/Liucaicaia/article/details/127561141

版权

Echarts是什么

Echarts

Echarts是一个基于 JavaScript 的开源可视化图表库

Echart优点

Echarts的优点比较明显体积小，免费、上手快，只需要有一些js基础，剩下的就是复制粘贴的事情，而且是国产的东西，文档看起来也比较方便，总体来说门槛比较低。

Echarts的常用配置

title 标题组件，包含主标题和副标题。
legend 图例组件。
xAxis 直角坐标系 grid 中的 x 轴
yAxis 直角坐标系 grid 中的 y 轴
tooltip 提示框组件。
color 调色盘颜色列表。

Echarts基本使用

1.获取 Apache ECharts
在 https://www.jsdelivr.com/package/npm/echarts选择 dist/echarts.js，点击并保存为 echarts.js 文件。
2.引入 Apache ECharts
在这里插入图片描述

使用script标签导入echarts.min.js
3.绘制图表
在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。
在这里插入图片描述

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单图表

		var  trends = data.data.trends.sort((a,b)=>a.day-b.day);
		var echart = echarts.init(document.getElementById("container"),"light");
		var option = {
			title:{text:"新冠肺炎趋势"},
			legend:{data:["累计确诊"]},
			tooltip:{},
			xAxis:{data:trends.slice(0,20).map(item=>String(item.day).slice(-4))},
			yAxis:{}, 
			series:[
				{name:"累计确诊",type:"bar",data:trends.slice(0,20).map(item=>item.sure_cnt)}
			]
		};
		var id = setInterval(move,500);
		function move(){
			var first = trends.shift();
			trends.push(first);
			option.xAxis.data=trends.slice(0,20).map(item=>String(item.day).slice(-4));
			option.series[0].data = trends.slice(0,20).map(item=>item.sure_cnt);
			echart.setOption(option);
			
		}
		echart.on("mouseover",function(){clearInterval(id)})
		echart.on("mouseout",function(){id = setInterval(move,500)})
		echart.setOption(option);