可视化数据--Echarts

最新推荐文章于 2024-07-18 18:41:00 发布

前端web打工人

最新推荐文章于 2024-07-18 18:41:00 发布

阅读量507

点赞数

文章标签： html css css3 echarts javascript

本文链接：https://blog.csdn.net/zhaiyuyu/article/details/121655188

版权

Echarts介绍：

官网链接：Apache ECharts

是一个JS插件
性能好可流畅运行PC端和移动端设备
兼容主流浏览器
提供很多常用图标如：折线图、柱状图、散点图、饼图还可以自定义

Echarts入门教程：

步骤一：下载并引入echarts.js文件

步骤二：准备一个有大小的DOM容器

步骤三：初始化echarts实例对象

步骤四：指定配置项和数据

步骤五：将配置项设置给echarts实例对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <!-- 第一步引入js/echarts.min.js -->
		<script src="js/echarts.min.js"></script>
		<style type="text/css">
			#container{
				width: 800px;height: 600px;
			}
		</style>
	</head>
	<body>
        <!-- 第二步准备有大小的DOM容器 -->
		<div id="container"></div>
		<script>
			// 第三步初始化echart实例
			var echart=echarts.init(document.getElementById("container"));
			// 第四步：定义选项和数据
			var option={
				// 标题
				title:{text:"前端大讲堂数据"},
				// 鼠标提示
				tooltip:{},
				// 图例
				legend:{data:["人数"]},
				// x轴线
				xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},
				// y轴线
				yAxis:{},
				series:[
					// 名称name，类型：柱状图，数据
					{name:"人数",type:"bar",data:[1000,800,500,900,1300]},
				]
			};
			// 第五步设置参数
			echart.setOption(option);
		</script>
	</body>
</html>

效果：

图标常用类型：

bar	柱状图
pie	饼状图	百分比
line	线性图	smooth：true 平滑

颜色的修改：

基础自定义主题：

var echart=echarts.init(document.getElementById("container"),"light/dark");
//light浅色     dark深色    二选一

自定义主题：

下载地址：主题编辑器 - Apache ECharts

步骤一：先下载你选择好的样式

步骤二：引入到你自己的js里面

步骤三：引入到你自己的项目里面

<script src="js/xxx.js"></script>//引入

步骤四：应用

var echart=echarts.init(document.getElementById("container"),"你下载好名字");

调色盘：

//全局调色盘
var option={
		// 调色盘
		color:["#f70","#70f","#0f7"],
		// 标题
		title:{text:"前端大讲堂数据"},
		// 鼠标提示
		tooltip:{},
		// 图例
		legend:{data:["人数"]},
		// x轴线
		xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},
		// y轴线
		yAxis:{},
		// 系列数据
		series:[
		// 名称name，类型：柱状图，数据
		{name:"人数",type:"bar",data:[1000,800,500,900,1300]},
		]}
	]
};

//某一项调色盘
var option={
		// 标题
		title:{text:"前端大讲堂数据"},
		// 鼠标提示
		tooltip:{},
		// 图例
		legend:{data:["人数"]},
		// x轴线
		xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},
		// y轴线
		yAxis:{},
		// 系列数据
		series:[
		// 名称name，类型：柱状图，某一块，数据
		{name:"人数",type:"bar"，color:["#f70","#70f","#0f7"],data:[1000,800,500,900,1300]},
		]}
	]
};

//条目样式itemStyle
var option={
		// 标题
		title:{text:"前端大讲堂数据"},
		// 鼠标提示
		tooltip:{},
		// 图例
		legend:{data:["年龄分布"]},
		// x轴线
		xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},
		// y轴线
		yAxis:{},
		// 系列数据
		series:[
		// 名称name，类型：饼型，数据
		{name:"年龄分布",type:"pie",radius:["14%","10%"],
			data:[
				{name:"少年",value:20},
				{name:"青年",value:50},
				{name:"中年",value:30,
				// itemStyle 条目样式
			itemStyle:{
				// normal 正常样式
				normal:{color:"#f70"},
				// emphasis 强调样式
				emphasis:{color:"red"}
			}
				},
				{name:"老年",value:8},
			]}
		]}
	]
};

特殊样式：

<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 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: mycolor,
					borderRadius: [100, 100, 0, 0]
				}
			}]
		};
		echart.setOption(option);
	</script>

<script>
			// 初始化echart实例
			var echart=echarts.init(document.getElementById("container"),"dark");
			// 定义选项
			var option={
				// 标题
				title:{text:"堆叠图"},
				// 鼠标提示
				tooltip:{
					trigger:"axis"
				},
				// 图例
				legend:{data:["前端"]},
				// x轴线
				xAxis:{},
				// y轴线
				yAxis:{data:["2019","2020","2021"]},
				// 系列数据
				series:[
					// 名称name，类型：柱状图，数据
					// stack：是否堆叠（默认不堆叠）
					{name:"前端",type:"bar",data:[100,50,120],stack:true,label:{show:true,position:"insideRight",formatter:"{a}{c}人"}},
				]
			};
			// 设置参数
			echart.setOption(option);
		</script>

工具箱：

toolbox: {
show: true,//显示工具箱
feature: {
dataZoom: { //缩放
yAxisIndex: 'none'
},
dataView: { readOnly: false },//数据视图，可编辑
magicType: { type: ['line', 'bar'] },//魔法类型
restore: {},//重置
saveAsImage: {}//保存图片
}
},

前端web打工人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可视化数据--Echarts

Echarts介绍：官网链接：Apache ECharts是一个JS插件性能好可流畅运行PC端和移动端设备兼容主流浏览器提供很多常用图标如：折线图、柱状图、散点图、饼图还可以自定义Echarts入门教程：步骤一：下载并引入echarts.js文件步骤二：准备一个有大小的DOM容器步骤三：初始化echarts实例对象步骤四：指定配置项和数据步骤五：将配置项设置给echarts实例对象<!DOCTYPE html><html>.
复制链接

扫一扫