echarts

最新推荐文章于 2024-09-27 16:14:02 发布

清扰143

最新推荐文章于 2024-09-27 16:14:02 发布

阅读量298

点赞数 1

文章标签： php mysql windows echarts

本文链接：https://blog.csdn.net/weixin_60683397/article/details/121664567

版权

echarts

1.javascript的图标库；
2.百度捐给了apache基金会
3.比较符合中国人习惯
4.HeightCharts，D3是其同行
5.echarts官网

核心概览

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

示例

	<style>
		#container {width: 800px;height: 600px;}
	</style>
	<body>
		<div id="container"></div>
	</body>
	<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/walden.js"></script>
	<script type="text/javascript">
		//初始化实例
		var echart=echarts.init(document.getElementById("container"),'walden');
		//定义选项
		var option={
			// color:["#f70","#500","#0f0"],
			title:{text:"前端大讲堂数据"},
			//鼠标提示
			tooltip:{},
			//图例
			legend:{data:["人数","人气","年龄分布"]},
			//x轴线
			xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},
			//轴线
			yAxis:{},
			//系列数据
			series:[
				//名称name,类型；柱状图bar 线型图line  面积区域areaStyle
				{name:"人数",type:"bar",data:[1000,800,500,900,1300],itemStyle:{color:"#6f00a7"}},
				{name:"人气",type:"line",smooth:true,areaStyle:{color:"#f79"}, data:[300,500,400,200,500]},
				{name:"年龄分布",type:"pie",radius:["15%","10%"],left:"-30%",top:"-45%",
					data:[
						{name:"少年",value:20},
						{name:"青年",value:50},
						{name:"中年",value:90,
						itemStyle:{
							//正常样式
							normal:{color:"#f70"},
							//强调样式
							emphasis:{color:"#3fff00"}
						}
						},
						{name:"老年",value:8},
					]}
			]
		};
		//设置参数
		echart.setOption(option)
	</script>

在这里插入图片描述

图表常用类型

bar 柱状
pie饼型 ------radius:[“60%”,“40%”],
line 线性 —1.areaStyle 面 2. smooth:true 平滑线

颜色的修改

a. 主题:自定义主题  light 浅色   dark深色
b. 自定义主题   https://echarts.apache.org/zh/theme-builder.html
c. color:调色盘
d. 系列调色盘
e. itemStyle {normal:默认,emphasis:强调状态}

特别样式

渐变

 var mycolor =  {
	     type: 'linear',
	     x: 0,
	     y: 0,
	     x2: 0,
	     y2: 1,
	     colorStops: [{
	         offset: 0, color: 'aqua' // 0% 处的颜色
	     }, {
	         offset: 1, color: 'rgba(12, 149, 131, 1)' // 100% 处的颜色
	     }],
	     global: false // 缺省为 false
	 }

在这里插入图片描述

线的样式(lineStyle)

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

面的样式

areaStyle:{color:mycolor},//与在上边定义过的颜色

数据的堆叠

stack:true;

label标签

show:true   //是否显示
formatter:"{a}{b}{c}"  //格式化   a--数据名   b--系列名  c--数字
position      //位置     insideRight 内部右侧
color   //颜色

示例

	<style>
	#container{ width: 700px; height: 500px;}
	</style>
	<body>
		<div id="container"></div>
	</body>
	<script src="js/echarts.min.js"></script>
	<script>
		//初始化实例
		var echart=echarts.init(document.getElementById("container"),'dark');
		//定义选项
		var option={
			// color:["#f70","#500","#0f0"],
			title:{text:"堆叠图"},
			//鼠标提示
			tooltip:{},
			//图例
			legend:{data:["前端","ui","python"]},
			//x轴线
			xAxis:{},
			//轴线
			yAxis:{data:["2019","2020","2021"]},
			//系列数据
			series:[
				//名称name,类型；柱状图bar 线型图line  面积区域areaStyle
				{name:"前端",type:"bar",data:[100,50,180],stack:"Total",label:{show:true,position:"insideRight",formatter:"{a}{c}人"}},
				{name:"ui",type:"bar", data:[300,100,80],stack:"Total",label:{show:true,position:"insideRight",formatter:"{a}{c}人"}},
				{name:"python",type:"bar", data:[180,150,100],stack:"Total",label:{show:true,position:"insideRight",formatter:"{a}{c}人"}},
				
			]
		};
		echart.setOption(option);
	</script>