ECharts图表制作

最新推荐文章于 2024-06-15 14:15:51 发布

风与烈酒

最新推荐文章于 2024-06-15 14:15:51 发布

阅读量709

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qingdouxiaohua/article/details/133097355

版权

ECharts（Enterprise Charts）是一个基于 JavaScript 的开源可视化图表库，由百度开发和维护。ECharts 提供了丰富多样的图表类型，并支持动态数据更新、数据过滤、数据缩放等交互功能，可以在 Web、Node.js、微信小程序、React Native 等项目中使用。

ECharts 支持的图表类型包括折线图、柱状图、散点图、饼图、雷达图等，同时还提供了混搭图、地图、热力图、仪表盘等复杂图表。ECharts 的优点在于其灵活性和可扩展性，用户只需要按照要求提供数据和配置项，即可自定义样式和布局。

饼图：

雷达图：

折线图：

柱状图：

漏斗图：

北极柱状图：

HTML：

	<body>

		<div id="tubiao"></div>

		<button onclick="renderBar()">饼图</button>
		<button onclick="renderRadar()">雷达图</button>
		<button onclick="renderLine()">折线图</button>
		<button onclick="histogram()">柱状图</button>
		<button onclick="funnelPlot()">漏斗图</button>
		<button onclick="polar()">北极柱状图</button>

		<script src="js/new_file.js">

		</script>

CSS：

		<style>
			#tubiao {
				width: 800px;
				height: 600px;
			}
		</style>

JS:

let data = []
let myChart = echarts.init(document.getElementById('tubiao'));
$.ajax({
	type: "get",
	url: "./js/图表数组.json",
	success: function(res) {
		console.log(res);
		data = res
		renderBar()
	}
})

// 渲染饼图
function renderBar() {
	let arr = JSON.parse(JSON.stringify(data));

	// 这是for循环的方法，简单
	// for (let i = 0; i < data.length; i++) {
	// 	data[i].value = data[i].num
	// 	delete data[i].num
	// }

	// 这是filter方法,后面经常用到
	arr.filter(function(itme) {
		itme.value = itme.num;
		delete itme.num
	})
	// sort排序
	arr.sort(function(a, b) {
		return b.value - a.value
	})

	let option = {
		title: {
			text: "汉宫之年鹏enpi",
			left: "center"
		},
		legend: {
			left: "left",
			top: 'bottom',
			orient: "vertical"
		},
		toolbox: {
			show: true,
			feature: {
				dataView: {
					show: true,
					readOnly: false
				},
				restore: {
					show: true
				},
				saveAsImage: {
					show: true
				}
			}
		},
		series: [{
			name: '数据',
			type: 'pie',
			radius: [50, 260],
			center: ['50%', '60%'],
			roseType: 'area',
			itemStyle: {
				borderRadius: 12
			},
			data: arr
		}]
	};
	myChart.setOption(option, true);
}

// 渲染饼图
function renderRadar() {
	let arr = JSON.parse(JSON.stringify(data));

	let maxs = [];
	let vals = [];

	arr.filter(function(itme) {
		maxs.push({
			name: itme.name,
			maxs: 100
		})
		vals.push(itme.num);
	})

	let option = {
		title: {
			text: '汉宫之年鹏enpi',
			left: "center"
		},
		legend: {
			data: ['数据'],
			left: "left",
			top: 'bottom',
			orient: "vertical"
		},
		radar: {
			indicator: maxs
		},
		series: [{
			name: '数据',
			type: 'radar',
			data: [{
				value: vals,
				name: '汉宫之年鹏enpi'
			}]
		}]
	};
	myChart.setOption(option, true);
}

// 渲染折线图
function renderLine() {
	let arr = JSON.parse(JSON.stringify(data));
	
	let maxs = [];
	let vals = [];
	let name = []

	arr.filter(function(itme) {
		maxs.push({
			name: itme.name,
			maxs: 100
		})
		vals.push(itme.num);
		name.push(itme.name);
	})

	let option = {
		title: {
			text: '汉宫之年鹏enpi',
			left: "center"
		},

		xAxis: {
			type: 'category',
			data: name
		},
		yAxis: {
			type: 'value'
		},
		series: [{
			name: '数据',
			data: vals,
			type: 'line'
		}]
	};
	myChart.setOption(option, true);
}

// 渲染柱状图
function histogram() {
	let arr = JSON.parse(JSON.stringify(data));

	let maxs = [];
	let vals = [];
	let name = [];

	arr.filter(function(itme) {
		maxs.push({
			name: itme.name,
			maxs: 100
		})
		vals.push(itme.num);
		name.push(itme.name);
	})

	let option = {
		title: {
			text: '汉宫之年鹏enpi',
			left: "center"
		},
		legend: {
			data: ['数据'],
			left: "left",
			top: 'bottom',
			orient: "vertical"
		},
		xAxis: {
			type: 'category',
			data: name
		},
		yAxis: {
			type: 'value',
			
		},
		series: [{
			name: '数据',
			data: vals,
			type: 'bar'
		}]
	};
	myChart.setOption(option, true);
}

// 渲染漏斗图
function funnelPlot() {
	let arr = JSON.parse(JSON.stringify(data));
	arr.filter(function(itme) {
		itme.value = itme.num;
		delete itme.num
	})

	let option = {
		title: {
			text: '汉宫之年鹏enpi',
			left: "center"
		},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c}%'
		},
		toolbox: {
			feature: {
				dataView: {
					readOnly: false
				},
				restore: {},
				saveAsImage: {}
			}
		},
		legend: {
			data: ['突破', '手枪', '自由人', '狙击', '指挥','拍桌子'],
			left: "left",
			top: 'bottom',
			orient: "vertical"
		},
		series: [{
			name: '数据',
			type: 'funnel',
			left: '10%',
			top: 60,
			bottom: 60,
			width: '80%',
			min: 0,
			max: 100,
			minSize: '0%',
			maxSize: '100%',
			sort: 'descending',
			gap: 2,
			label: {
				// show: true,
				position: 'inside'
			},
			labelLine: {
				length: 10,
				lineStyle: {
					width: 1,
					type: 'solid'
				}
			},
			itemStyle: {
				borderColor: '#fff',
				borderWidth: 1
			},
			emphasis: {
				label: {
					fontSize: 20
				}
			},
			data: arr
		}]
	};
	myChart.setOption(option, true);
}

// 北极柱状图
function polar(){
	let arr = JSON.parse(JSON.stringify(data));
	
	let maxs = [];
	let vals = [];
	let name = [];
	
	arr.filter(function(itme) {
		maxs.push({
			name: itme.name,
			maxs: 100
		})
		vals.push(itme.num);
		name.push(itme.name);
	})
	
	let option = {
	  title: [
	    {
	      text: '汉宫之年鹏enpi',
		  left: "center"
	    }
	  ],
	  polar: {
	    radius: [30, '80%']
	  },
	  angleAxis: {
	    max: 110,
	    startAngle: 75
	  },
	  radiusAxis: {
	    type: 'category',
	    data: name
	  },
	  tooltip: {},
	  series: {
		name:'数据',
	    type: 'bar',
	    data: vals,
		// [2, 1.2, 2.4, 3.6,3.8],
	    coordinateSystem: 'polar',
	    label: {
	      // show: true,
	      position: 'middle',
	      formatter: '{b}: {c}'
	    }
	  }
	};
	myChart.setOption(option, true);
}

ECharts:

ECharts官网找到这个文件下载，放到JS文件里。

jquery-3.7.0：

jQuery是一个流行的JavaScript库，它简化了HTML文档操作、事件处理、动画和用于web开发的Ajax交互。它提供了一个简洁和易于使用的API(应用程序编程接口)，允许开发人员编写更少的代码来实现强大的网页效果。jQuery支持广泛的web浏览器，使创建交互式、响应式和动态web应用程序变得容易。

也要来个jquery文件然后丢JS里面。

图表数组.json：

在JS文件里创建个JSON文件

[
	{
		"name":"狙击",
		"num":75
	},{
		"name":"指挥",
		"num":88
	},{
		"name":"自由人",
		"num":65
	},{
		"name":"突破",
		"num":44
	},{
		"name":"手枪",
		"num":56
	},{
		"name":"拍桌子",
		"num":100
	}
]

ECharts 提供了多种使用方式，包括基于 DOM、Canvas 和 SVG 的渲染，可以适配不同的浏览器和设备。同时还支持多语言和多机房的数据联动、图形标记和动画效果等高级功能，满足了各种数据可视化的需求。

风与烈酒

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
ECharts图表制作

ECharts（Enterprise Charts）是一个基于 JavaScript 的开源可视化图表库，由百度开发和维护。ECharts 提供了丰富多样的图表类型，并支持动态数据更新、数据过滤、数据缩放等交互功能，可以在 Web、Node.js、微信小程序、React Native 等项目中使用。
复制链接

扫一扫