echarts入门

最新推荐文章于 2023-07-29 18:35:43 发布

.LiSa.

最新推荐文章于 2023-07-29 18:35:43 发布

阅读量435

点赞数 1

文章标签： echarts 大前端

本文链接：https://blog.csdn.net/meng123_lisa/article/details/121655367

版权

echarts

1.定义

javascript的图表的库
百度捐给apache基金会
比较符合中国人习惯
HeightCharts,D3为同行
官网: link.

2.核心概览

instance实例
series系列
tooltip提示
legend图例
xAxis x轴
yAxis轴
toolbox工具箱
datazoom缩放
vitualMap虚拟映射

3.图标常用类型

bar柱状
pie饼形：radius:["60%","40%"].
line线性： areaStyle面
smooth:true平滑

4.颜色的修改

主题：自定义主题 light,dark浅色与深色
自定义主题：link.
color ：调色盘
color系列调色盘

itemStyle：
normal默认
emphasis强调状态

示例

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>
		<script src="js/vintage.js"></script>
		<style>
			#container{width: 800px;height: 600px;}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script>
			//初始化echart实例
			// var echart =echarts.init(document.getElementById("container"),'vintage')
			var echart =echarts.init(document.getElementById("container"))
			//定义选项
			var option={
				//调色盘
				color:["#98e4ff","#ddffb8","#ffbbda"],
				//标题
				title:{text:"前端课堂数据"},
				//鼠标提示
				tooltip:{},
				//图例
				legend:{data:["人数","人气"]},
				//x轴线
				xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},
				//y轴线
				yAxis:{},
				//系列数据
				series:[ 
					//名称name，类型：柱状图，数据data 
					{name:"人数",type:"bar",data:[{value:900,itemStyle:{color:"#97afff"}},800,400,700],itemStyle:{color:"#abffb9"}},
					//areaStyle:{color:"#f70"}面积
				    {name:"人气",type:"line",smooth:true,data:[200,400,600,300,100]},
					{name:"年龄分布",type:"pie",radius:["20%","10%"],top:"-60%",
					data:[
						{name:"少年",value:20},
						{name:"青年",value:30,
						//条目样式
						itemStyle:{
							//正常样式
							normal:{color:"pink"},
							//强调样式
							emphasis:{color:"#d7c9ff"}
						}
						},
						{name:"儿童",value:40},
					]}
				]
			};
			//设置参数
			echart.setOption(option)
		</script>
	</body>
</html>

5.特别样式

渐变：

var linear={
type: 'linear',x:O,
y: O,×2: 0,y2: 1,
colorStops: [{
offset: O, color : '#Obdcf3'
 / /0%处的颜色
}.{
offset: 1, color: '#O093dd'
// 100%处的颜色
],
global: false //缺省为false

线的样式lineStyle

lineStyle:{
width:12,
cap:"round",
opacity:0.7,},

面的样式：

areaStyle:{
color:linear2,}.

示例

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
		<title></title>
		<script src="js/echarts.min.js"></script>
		<style>
			#container{
				width: 1200px;
				height: 800px;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script>
			    var mycolor =  {
			     type: 'linear',
			     x: 0,
			     y: 0,
			     x2: 0,
			     y2: 1,
			     colorStops: [{
			         offset: 0, color: 'aqua' // 0% 处的颜色
			     }, {
			         offset: 1, color: 'rgba(10, 50, 128, 1)' // 100% 处的颜色
			     }],
			     global: false // 缺省为 false
			 }
			 var mycolor2 =  {
			     type: 'linear',
			     x: 0,
			     y: 0,
			     x2: 0,
			     y2: 1,
			     colorStops: [{
			         offset: 0, color: 'rgba(0, 85, 255, 0.7)' // 0% 处的颜色
			     }, {
			         offset: .7, color: 'rgba(29, 249, 231, 0)' // 100% 处的颜色
			     }],
			     global: false // 缺省为 false
			 }
			 var echart = echarts.init(document.getElementById("container"),"dark")
			 var option={
				 title:{text:"特殊样式"},
				 legend:{data:"人数"},
				 tooltip:{},
				 xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},
				 yAxis:{},
				 series:[
					 {name:"人数",type:"bar",data:[10,20,50,80,60],
					 //渐变颜色，圆角
					 itemStyle:{color:mycolor2,borderRadius:[100,100,0,0]}},
					 {name:"人数",type:"line",smooth:true,data:[20,30,60,90,70],
					 lineStyle:{width:3,cap:"round"},
					 areaStyle:{color:mycolor2}
					 }
				 ]
			 };
			 echart.setOption(option);
			 </script>
	</body>
</html>

6.数据的堆叠

stack:true

7.label标签

show: true是否显示

formatter:"{
a}{b}{c}"
格式化

a代表数据名
b系列名
c数字

position位置：
insideRight内部右侧
top / left / right / bottom / inside

color：
颜色

示例

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
		<title></title>
		<script src="js/echarts.min.js"></script>
		<style>
			#container{
				width: 1200px;
				height: 800px;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div id="container"></div>
		<script>
			var echart =echarts.init(document.getElementById("container"),"dark")
			var option={
				title:{text:"堆叠图"},
				legend:{data:["前端","UI","python"]},
				tooltip:{
					trigger:'axis'
				},
				xAxis:{},
				yAxis:{data:["2019","2020","2021"]},
				series:[
					{name:"前端",type:"bar",data:[100,50,120],stack:true,label:{show:true,position:"insideRight",formatter:"{a}{c}人"}},
					{name:"UI",type:"bar",data:[200,100,90],stack:true,label:{show:true,position:"insideRight",formatter:"{a}{c}人"}},
					{name:"python",type:"bar",data:[150,120,100],stack:true,label:{show:true,position:"insideRight",formatter:"{a}{c}人"}}
				]
			};
			echart.setOption(option)
		</script>
	</body>
</html>

.LiSa.

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
echarts入门

echarts1.定义javascript的图表的库百度捐给apache基金会比较符合中国人习惯HeightCharts,D3为同行官网: link.2.核心概览instance实例series系列tooltip提示legend图例xAxis x轴yAxis轴toolbox工具箱datazoom缩放vitualMap虚拟映射3.图标常用类型bar柱状pie饼形：radius:[“60%”,“40%”].line线性：areaStyle面smooth:true
复制链接

扫一扫