echarts-图表插件

最新推荐文章于 2024-02-19 12:00:11 发布

又一年764

最新推荐文章于 2024-02-19 12:00:11 发布

阅读量1.2k

点赞数 1

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/topuu/article/details/125605336

版权

01 echarts介绍

echarts是基于JavaScript的图表插件，由百度开发，后来捐赠给apache基金会开源。
echarts网站地址：
https://echarts.apache.org/examples/zh/index.html
常用的图表都可以找到
进入网站首页查找需要哪个图表直接点击就可以获取js代码
在这里插入图片描述
代码编辑（可以修改属性实现自己想要的效果）

完整代码（如果需要引用需要把完整代码下载下来）
var chartDom = document.getElementById(‘main’); //main是创建的容器id名称
如果运行不成功就把
import * as echarts from ‘echarts’;
给删除掉
在这里插入图片描述
以下是介绍案例

echarts入门-hello world

1.运用echarts首先要先导入echarts的js文件

<script src="./js/echarts.min.js"></script>

2.初始化

var echart = echarts.init(dom节点,主题)

3.定义选项

var option={}

option里面主要有
title-标题
legend-图例
tooltip-鼠标经过提示
xAxis-x轴
yAxis-y轴
series-系列数据
4.更新选项

echart.setOption(option)

完整案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 01 引入 -->
		<script src="./js/echarts.min.js"></script>
		<style>
		#app{ width: 800px; height: 600px;}
		</style>
	</head>
	<body>
		<!-- 02 设置容器 宽高 -->
		<div id="app"></div>
		<script>
		// 03 初始化
		var echart = echarts.init(document.getElementById("app"));
		// 04 定义选项
		var option = {
			title:{text:"小王的睡眠时间"},//标题文本
			legend:{data:["睡眠时长","作业耗时"]} ,//图例
			tooltip:{},//鼠标提示
			yAxis:{},//x轴线
			xAxis:{data:["20日","21日","22日","23日","24日","25日","26日"]}, //y轴线
			series:[ //系列数据
				// 数据
				{name:"睡眠时长",type:"bar",data:[8,5,4,7,3,12,14]},
			]
			
		}
		// 05 设置选项
		echart.setOption(option);
		</script>
	</body>
</html>

结果
在这里插入图片描述

颜色宽度属性改变

通过itemStyle：{}可以自定义设置阴影部分颜色（可以设置全局，也可以单独设置一个）
normal是正常状态下的颜色，emphasis为强调状态下的，也就是鼠标经过的效果
itemStyle也可以设置柱状图的每个角的弧度
itemStyle:{
borderRadius:[左上,右上,右下,左下]
color颜色可以半透明也可以渐变
}
barWidth可以自定义设置每天柱体的宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 01 引入 -->
		<script src="./js/echarts.min.js"></script>
		<script src="js/theme.js"></script>
	</head>
	<body>
		<!-- 02 设置容器 宽高 -->
		<div id="app" style=" width: 800px; height: 600px;"></div>
		<script>
		// 03 初始化
		// 主题 默认,dark,light,自定义
		var echart = echarts.init(document.getElementById("app"));
		// 04 定义选项
		var option = {
			// color:["#aa00ff","#aa007f","#55ff00","#aaff00"],
			title:{text:"小王的睡眠时间"},//标题文本
			legend:{data:["睡眠时长","作业耗时"]} ,//图例
			tooltip:{},//鼠标提示
			yAxis:{},//x轴线
			xAxis:{data:["20日","21日","22日","23日","24日","25日","26日"]}, //y轴线
			series:[ //系列数据
				// 数据
				{name:"睡眠时长",type:"bar",barWidth:36,data:[8,5,4,7,{value:3,itemStyle:{color:"#ff007f"}},12,14],
				// barWidth可以自定义设置每天柱体的宽度
				
				itemStyle:{  //条目样式
					normal:{color:"#3c0"}, //正常
					emphasis:{color:"#10881a"} ,//强调状态
				}},
			]
			
		}
		// 05 设置选项
		echart.setOption(option);		
		// chart图表,Option选项 Series系列,Axis刻度轴线,tooltip提示,legend图例 ,mooth平滑
		// bar 柱状图,line 折线图,pie饼形图
		</script>