数据可视化--ECharts图--HBuilderX--散点图1

最新推荐文章于 2024-05-31 17:00:21 发布
最新推荐文章于 2024-05-31 17:00:21 发布
阅读量735 收藏 3
点赞数
分类专栏： 可视化-Echarts 文章标签： 可视化 js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangzheng_520/article/details/116059796
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="echarts.min.js"></script>
	</head>
	<body>
		<div style="width:300px;height:400px;"></div>
		<script type="text/javascript">
		var myChart = echarts.init(document.querySelector('div'))	
		var data=[
			 {'height': 207, 'weight': 110},
			 {'height': 178, 'weight': 110},
			 {'height': 191, 'weight': 107},
			 {'height': 191, 'weight': 102},
			 {'height': 191, 'weight': 102},
			 {'height': 191, 'weight': 102},
			 {'height': 197, 'weight': 101},
			 {'height': 198, 'weight': 100},
			 {'height': 191, 'weight': 100},
			 {'height': 199, 'weight': 100},
			 {'height': 195, 'weight': 100},
			 {'height': 198, 'weight': 99},
			 {'height': 194, 'weight': 98},
			 {'height': 199, 'weight': 98},
			 {'height': 194, 'weight': 98},
			 {'height': 190, 'weight': 98},
			 {'height': 202, 'weight': 98},
			 {'height': 191, 'weight': 98},
			 {'height': 196, 'weight': 97},
			 {'height': 196, 'weight': 97},
			 {'height': 197, 'weight': 97},
			 {'height': 197, 'weight': 97},
			 {'height': 199, 'weight': 97},
			 {'height': 190, 'weight': 96},
			 {'height': 196, 'weight': 96},
			 {'height': 203, 'weight': 96},
			 {'height': 193, 'weight': 96},
			 {'height': 187, 'weight': 96},
			 {'height': 193, 'weight': 96},
			 {'height': 191, 'weight': 96},
			 {'height': 190, 'weight': 96},
			 {'height': 194, 'weight': 96},
			 {'height': 188, 'weight': 96},
			 {'height': 190, 'weight': 96},
			 {'height': 193, 'weight': 96},
			 {'height': 204, 'weight': 96},
			 {'height': 189, 'weight': 96},
			 {'height': 200, 'weight': 96},
			 {'height': 180, 'weight': 96},
			 {'height': 188, 'weight': 96},
			 {'height': 191, 'weight': 96},
			 {'height': 185, 'weight': 96},
			 {'height': 191, 'weight': 96},
			 {'height': 197, 'weight': 96},
			 {'height': 195, 'weight': 95},
			 {'height': 196, 'weight': 95},
			 {'height': 196, 'weight': 95},
			 {'height': 195, 'weight': 95},
			 {'height': 198, 'weight': 95},
			 {'height': 191, 'weight': 95},
			 {'height': 171, 'weight': 58},
			 {'height': 164, 'weight': 57},
			 {'height': 161, 'weight': 57},
			 {'height': 174, 'weight': 57},
			 {'height': 166, 'weight': 57},
			 {'height': 173, 'weight': 57},
			 {'height': 170, 'weight': 57},
			 {'height': 168, 'weight': 57},
			 {'height': 160, 'weight': 57},
			 {'height': 168, 'weight': 57},
			 {'height': 173, 'weight': 57},
			 {'height': 155, 'weight': 57},
			 {'height': 170, 'weight': 57},
			 {'height': 170, 'weight': 57},
			 {'height': 167, 'weight': 57},
			 {'height': 173, 'weight': 57},
			 {'height': 168, 'weight': 57},
			 {'height': 172, 'weight': 57},
			 {'height': 168, 'weight': 57},
			 {'height': 170, 'weight': 57},
			 {'height': 161, 'weight': 57},
			 {'height': 158, 'weight': 56},
			 {'height': 162, 'weight': 56},
			 {'height': 166, 'weight': 56},
			 {'height': 172, 'weight': 56},
			 {'height': 170, 'weight': 56},
			 {'height': 167, 'weight': 56},
			 {'height': 166, 'weight': 56},
			 {'height': 161, 'weight': 56},
			 {'height': 164, 'weight': 56},
			 {'height': 160, 'weight': 56},
			 {'height': 163, 'weight': 55},
			 {'height': 160, 'weight': 55},
			 {'height': 175, 'weight': 55},
			 {'height': 168, 'weight': 55},
			 {'height': 171, 'weight': 55},
			 {'height': 168, 'weight': 55},
			 {'height': 170, 'weight': 55},
			 {'height': 165, 'weight': 55},
			 {'height': 168, 'weight': 54},
			 {'height': 164, 'weight': 54},
			 {'height': 168, 'weight': 54},
			 {'height': 164, 'weight': 53},
			 {'height': 164, 'weight': 52},
			 {'height': 169, 'weight': 52},
			 {'height': 167, 'weight': 52},
			 {'height': 163, 'weight': 50},
			 {'height': 168, 'weight': 50},
			 {'height': 168, 'weight': 49},
			 {'height': 167, 'weight': 48},
			 {'height': 185, 'weight': 80},
			 {'height': 185, 'weight': 78},
			 {'height': 180, 'weight': 72},
			 {'height': 185, 'weight': 79},
			 {'height': 191, 'weight': 89},
			 {'height': 175, 'weight': 70},
			 {'height': 195, 'weight': 78},
			 {'height': 182, 'weight': 73},
			 {'height': 185, 'weight': 77},
			 {'height': 185, 'weight': 78},
			 {'height': 183, 'weight': 83},
			 {'height': 177, 'weight': 68},
			 {'height': 183, 'weight': 76},
			 {'height': 188, 'weight': 88},
			 {'height': 185, 'weight': 74},
			 {'height': 185, 'weight': 82},
			 {'height': 181, 'weight': 71},
			 {'height': 177, 'weight': 70},
			 {'height': 182, 'weight': 78},
			 {'height': 187, 'weight': 86},
			 {'height': 191, 'weight': 82},
			 {'height': 184, 'weight': 77},
			 {'height': 175, 'weight': 81},
			 {'height': 179, 'weight': 72},
			 {'height': 178, 'weight': 73},
			 {'height': 188, 'weight': 78},
			 {'height': 189, 'weight': 86},
			 {'height': 180, 'weight': 76},
			 {'height': 185, 'weight': 76},
			 {'height': 186, 'weight': 78},
			 {'height': 188, 'weight': 82},
			 {'height': 188, 'weight': 83},
			 {'height': 178, 'weight': 77},
			 {'height': 175, 'weight': 65},
			 {'height': 188, 'weight': 83},
			 {'height': 182, 'weight': 70},
			 {'height': 173, 'weight': 67},
			 {'height': 179, 'weight': 71},
			 {'height': 184, 'weight': 79},
			 {'height': 185, 'weight': 78},
			 {'height': 179, 'weight': 71},
			 {'height': 179, 'weight': 70},
			 {'height': 180, 'weight': 75},
			 {'height': 188, 'weight': 88},
			 {'height': 183, 'weight': 77},
			 {'height': 175, 'weight': 68},
			 {'height': 170, 'weight': 66},
			 {'height': 191, 'weight': 93},
			 {'height': 177, 'weight': 75},
			 {'height': 175, 'weight': 78},
			 {'height': 180, 'weight': 68},
			 {'height': 185, 'weight': 83},
			 {'height': 177, 'weight': 78},
			 {'height': 176, 'weight': 73},
			 {'height': 192, 'weight': 91},
			 {'height': 172, 'weight': 70},
			 {'height': 185, 'weight': 79},
			 {'height': 181, 'weight': 74},
			 {'height': 181, 'weight': 75},
			 {'height': 175, 'weight': 70},
			 {'height': 181, 'weight': 77},
			 {'height': 180, 'weight': 72},
			 {'height': 185, 'weight': 68},
			 {'height': 178, 'weight': 66},
			 {'height': 188, 'weight': 83},
			 {'height': 163, 'weight': 65},
			 {'height': 179, 'weight': 74},
			 {'height': 177, 'weight': 68},
			 {'height': 185, 'weight': 76},
			 {'height': 188, 'weight': 80},
			 {'height': 177, 'weight': 68},
			 {'height': 182, 'weight': 80},
			 {'height': 192, 'weight': 84},
			 {'height': 178, 'weight': 67},
			 {'height': 187, 'weight': 81},
			 {'height': 195, 'weight': 83},
			 {'height': 174, 'weight': 67},
			 {'height': 178, 'weight': 75},
			 {'height': 179, 'weight': 76},
			 {'height': 176, 'weight': 73},
			 {'height': 183, 'weight': 76},
			 {'height': 191, 'weight': 87},
			 {'height': 180, 'weight': 72},
			 {'height': 185, 'weight': 79},
			 {'height': 194, 'weight': 82},
			 {'height': 176, 'weight': 70},
			 {'height': 175, 'weight': 69},
			 {'height': 179, 'weight': 73},
			 {'height': 188, 'weight': 70},
			 {'height': 181, 'weight': 76},
			 {'height': 181, 'weight': 80},
			 {'height': 185, 'weight': 76},
			 {'height': 180, 'weight': 75},
			 {'height': 177, 'weight': 74},
			 {'height': 182, 'weight': 78},
			 {'height': 186, 'weight': 85},
			 {'height': 183, 'weight': 71},
			 {'height': 183, 'weight': 73},
			 {'height': 185, 'weight': 82},
			 {'height': 198, 'weight': 90},
			 {'height': 175, 'weight': 74},
			 {'height': 175, 'weight': 64},
			 {'height': 174, 'weight': 70},
			 {'height': 180, 'weight': 69},
			 {'height': 174, 'weight': 73},
			 {'height': 187, 'weight': 85},
			 {'height': 173, 'weight': 63},
			 {'height': 187, 'weight': 80},
			 {'height': 174, 'weight': 63},
			 {'height': 188, 'weight': 73},
			 {'height': 181, 'weight': 73},
			 {'height': 173, 'weight': 73},
			 {'height': 168, 'weight': 64},
			 {'height': 189, 'weight': 78},
			 {'height': 174, 'weight': 69},
			 {'height': 170, 'weight': 72},
			 {'height': 184, 'weight': 74},
			 {'height': 188, 'weight': 83},
			 {'height': 185, 'weight': 81},
			 {'height': 180, 'weight': 75},
			 {'height': 180, 'weight': 70},
			 {'height': 173, 'weight': 72},
			 {'height': 178, 'weight': 73},
			 {'height': 188, 'weight': 70},
			 {'height': 187, 'weight': 82},
			 {'height': 190, 'weight': 85},
			 {'height': 178, 'weight': 64},
			 {'height': 187, 'weight': 75},
			 {'height': 175, 'weight': 62},
			 {'height': 168, 'weight': 67},
			 {'height': 178, 'weight': 68},
			 {'height': 178, 'weight': 77},
			 {'height': 167, 'weight': 61},
			 {'height': 180, 'weight': 75},
			 {'height': 182, 'weight': 82},
			 {'height': 183, 'weight': 76},
			 {'height': 168, 'weight': 69},
			 {'height': 173, 'weight': 73},
			 {'height': 183, 'weight': 75},
			 {'height': 179, 'weight': 82},
			 {'height': 183, 'weight': 75},
			 {'height': 175, 'weight': 76},
			 {'height': 182, 'weight': 81},
			 {'height': 178, 'weight': 77},
			 {'height': 175, 'weight': 73},
			 {'height': 175, 'weight': 67},
			 {'height': 184, 'weight': 76},
			 {'height': 184, 'weight': 78},
			 {'height': 183, 'weight': 71},
			 {'height': 181, 'weight': 68},
			 {'height': 170, 'weight': 65},
			 {'height': 184, 'weight': 76},
			 {'height': 177, 'weight': 64},
			 {'height': 187, 'weight': 73},
			 {'height': 174, 'weight': 75},
			 {'height': 186, 'weight': 81},
			 {'height': 185, 'weight': 83},
			 {'height': 193, 'weight': 93},
			 {'height': 185, 'weight': 82},
			 {'height': 172, 'weight': 76},
			 {'height': 168, 'weight': 71},
			 {'height': 193, 'weight': 84},
			 {'height': 170, 'weight': 66},
			 {'height': 186, 'weight': 81},
			 {'height': 172, 'weight': 77},
			 {'height': 183, 'weight': 79},
			 {'height': 182, 'weight': 81},
			 {'height': 180, 'weight': 78},
			 {'height': 182, 'weight': 78},
			 {'height': 190, 'weight': 83},
			 {'height': 182, 'weight': 75},
			 {'height': 170, 'weight': 72},
			 {'height': 191, 'weight': 79},
			 {'height': 183, 'weight': 77},
			 {'height': 177, 'weight': 70},
			 {'height': 190, 'weight': 85},
			 {'height': 182, 'weight': 75},
			 {'height': 183, 'weight': 74},
			 {'height': 193, 'weight': 93},
			 {'height': 191, 'weight': 72},
			 {'height': 182, 'weight': 78},
			 {'height': 181, 'weight': 74},
			 {'height': 177, 'weight': 70},
			 {'height': 178, 'weight': 70},
			 {'height': 178, 'weight': 70},
			 {'height': 189, 'weight': 76},
			 {'height': 180, 'weight': 70},
			 {'height': 178, 'weight': 66},
			 {'height': 187, 'weight': 72},
			 {'height': 186, 'weight': 71},
			 {'height': 186, 'weight': 77},
			 {'height': 184, 'weight': 84},
			 {'height': 192, 'weight': 85},
			 {'height': 180, 'weight': 80},
			 {'height': 182, 'weight': 76},
			 {'height': 183, 'weight': 76},
			 {'height': 180, 'weight': 75},
			 {'height': 183, 'weight': 80},
			 {'height': 175, 'weight': 70},
			 {'height': 183, 'weight': 75},
			 {'height': 170, 'weight': 68},
			 {'height': 172, 'weight': 68},
			 {'height': 178, 'weight': 72},
			 {'height': 176, 'weight': 66},
			 {'height': 185, 'weight': 75},
			 {'height': 170, 'weight': 73},
			 {'height': 185, 'weight': 70},
			 {'height': 179, 'weight': 77},
			 {'height': 174, 'weight': 75},
			 {'height': 178, 'weight': 83},
			 {'height': 175, 'weight': 71},
			 {'height': 191, 'weight': 85},
			 {'height': 180, 'weight': 76},
			 {'height': 180, 'weight': 76},
			 {'height': 172, 'weight': 69},
			 {'height': 178, 'weight': 73},
			 {'height': 190, 'weight': 80},
			 {'height': 187, 'weight': 82},
			 {'height': 185, 'weight': 81},
			 {'height': 183, 'weight': 80},
			 {'height': 173, 'weight': 69},
			 {'height': 175, 'weight': 65},
			 {'height': 181, 'weight': 70},
			 {'height': 173, 'weight': 69},
			 {'height': 178, 'weight': 66},
			 {'height': 183, 'weight': 80},
			 {'height': 173, 'weight': 75},
			 {'height': 174, 'weight': 80},
			 {'height': 191, 'weight': 88},
			 {'height': 187, 'weight': 85},
			 {'height': 177, 'weight': 68},
			 {'height': 178, 'weight': 79},
			 {'height': 178, 'weight': 75},
			 {'height': 178, 'weight': 72},
			 {'height': 180, 'weight': 73},
			 {'height': 190, 'weight': 87},
			 {'height': 182, 'weight': 78},
			 {'height': 182, 'weight': 90},
			 {'height': 176, 'weight': 75},
			 {'height': 181, 'weight': 74},
			 {'height': 187, 'weight': 72},
			 {'height': 177, 'weight': 75},
			 {'height': 181, 'weight': 76},
			 {'height': 174, 'weight': 71},
			 {'height': 185, 'weight': 80},
			 {'height': 187, 'weight': 83},
			 {'height': 182, 'weight': 75},
			 {'height': 177, 'weight': 70},
			 {'height': 174, 'weight': 71},
			 {'height': 181, 'weight': 74},
			 {'height': 178, 'weight': 71},
			 {'height': 183, 'weight': 80},
			 {'height': 187, 'weight': 83},
			 {'height': 175, 'weight': 69},
			 {'height': 178, 'weight': 67},
			 {'height': 173, 'weight': 74},
			 {'height': 178, 'weight': 72},
			 {'height': 180, 'weight': 80},
			 {'height': 184, 'weight': 75},
			 {'height': 191, 'weight': 100},
			 {'height': 185, 'weight': 72},
			 {'height': 175, 'weight': 75},
			 {'height': 175, 'weight': 69},
			 {'height': 170, 'weight': 70},
			 {'height': 170, 'weight': 73},
			 {'height': 170, 'weight': 70},
			 {'height': 193, 'weight': 96},
			 {'height': 189, 'weight': 77},
			 {'height': 181, 'weight': 81},
			 {'height': 188, 'weight': 86},
			 {'height': 185, 'weight': 84},
			 {'height': 183, 'weight': 83},
			 {'height': 164, 'weight': 60},
			 {'height': 194, 'weight': 90},
			 {'height': 190, 'weight': 79},
			 {'height': 190, 'weight': 83},
			 {'height': 190, 'weight': 83},
			 {'height': 179, 'weight': 78},
			 {'height': 188, 'weight': 77},
			 {'height': 193, 'weight': 82},
			 {'height': 183, 'weight': 81},
			 {'height': 186, 'weight': 80},
			 {'height': 179, 'weight': 71},
			 {'height': 189, 'weight': 81},
			 {'height': 190, 'weight': 88},
			 {'height': 186, 'weight': 78},
			 {'height': 180, 'weight': 75},
			 {'height': 185, 'weight': 85},
			 {'height': 171, 'weight': 64},
			 {'height': 185, 'weight': 74},
			 {'height': 185, 'weight': 81},
			 {'height': 183, 'weight': 84},
			 {'height': 193, 'weight': 90},
			 {'height': 172, 'weight': 70},
			 {'height': 179, 'weight': 70},
			 {'height': 180, 'weight': 65},
			 {'height': 178, 'weight': 83},
			 {'height': 170, 'weight': 64},
			 {'height': 176, 'weight': 74},
			 {'height': 182, 'weight': 76},
			 {'height': 177, 'weight': 74},
			 {'height': 173, 'weight': 69},
			 {'height': 180, 'weight': 78},
			 {'height': 184, 'weight': 84},
			 {'height': 175, 'weight': 72},
			 {'height': 186, 'weight': 84},
			 {'height': 182, 'weight': 65},
			 {'height': 182, 'weight': 72},
			 {'height': 181, 'weight': 79},
			 {'height': 171, 'weight': 72},
			 {'height': 184, 'weight': 78},
			 {'height': 177, 'weight': 68},
			 {'height': 176, 'weight': 72},
			 {'height': 189, 'weight': 88},
			 {'height': 173, 'weight': 69},
			 {'height': 176, 'weight': 68},
			 {'height': 185, 'weight': 76},
			 {'height': 178, 'weight': 75},
			 {'height': 184, 'weight': 76},
			 {'height': 172, 'weight': 75},
			 {'height': 184, 'weight': 74},
			 {'height': 180, 'weight': 70},
			 {'height': 170, 'weight': 62},
			 {'height': 178, 'weight': 70},
			 {'height': 178, 'weight': 78},
			 {'height': 180, 'weight': 70},
			 {'height': 182, 'weight': 73},
			 {'height': 190, 'weight': 80},
			 {'height': 200, 'weight': 86},
			 {'height': 187, 'weight': 77},
			 {'height': 180, 'weight': 82},
			 {'height': 192, 'weight': 86},
			 {'height': 179, 'weight': 72},
			 {'height': 188, 'weight': 71},
			 {'height': 185, 'weight': 76},
			 {'height': 178, 'weight': 72},
			 {'height': 170, 'weight': 75},
			 {'height': 171, 'weight': 71},
			 {'height': 185, 'weight': 75},
			 {'height': 175, 'weight': 68},
			 {'height': 183, 'weight': 75},
			 {'height': 172, 'weight': 71},
			 {'height': 180, 'weight': 70},
			 {'height': 178, 'weight': 73},
			 {'height': 186, 'weight': 77},
			 {'height': 173, 'weight': 71},
			 {'height': 186, 'weight': 81},
			 {'height': 180, 'weight': 68},
			 {'height': 174, 'weight': 71},
			 {'height': 180, 'weight': 75},
			 {'height': 181, 'weight': 72},
			 {'height': 191, 'weight': 88},
			 {'height': 175, 'weight': 71},
			 {'height': 177, 'weight': 72},
			 {'height': 181, 'weight': 66},
			 {'height': 183, 'weight': 78},
			 {'height': 186, 'weight': 86},
			 {'height': 181, 'weight': 74},
			 {'height': 180, 'weight': 72},
			 {'height': 185, 'weight': 80},
			 {'height': 180, 'weight': 76},
			 {'height': 186, 'weight': 74},
			 {'height': 174, 'weight': 76},
			 {'height': 176, 'weight': 70},
			 {'height': 175, 'weight': 70},
			 {'height': 188, 'weight': 77},
			 {'height': 177, 'weight': 78},
			 {'height': 170, 'weight': 73},
			 {'height': 201, 'weight': 95},
			 {'height': 170, 'weight': 68},
			 {'height': 174, 'weight': 70},
			 {'height': 184, 'weight': 65},
			 {'height': 184, 'weight': 84},
			 {'height': 178, 'weight': 78},
			 {'height': 187, 'weight': 81},
			 {'height': 191, 'weight': 86},
			 {'height': 181, 'weight': 75},
			 {'height': 192, 'weight': 88},
			 {'height': 180, 'weight': 72},
			 {'height': 175, 'weight': 70},
			 {'height': 178, 'weight': 75},
			 {'height': 191, 'weight': 79},
			 {'height': 190, 'weight': 87},
			 {'height': 175, 'weight': 66},
			 {'height': 191, 'weight': 86},
			 {'height': 177, 'weight': 75},
			 {'height': 179, 'weight': 75},
			 {'height': 186, 'weight': 81},
			 {'height': 177, 'weight': 73},
			 {'height': 173, 'weight': 78},
			 {'height': 176, 'weight': 67},
			 {'height': 184, 'weight': 85},
			 {'height': 190, 'weight': 88},
			 {'height': 176, 'weight': 72},
			 {'height': 169, 'weight': 72},
			 {'height': 172, 'weight': 73},
			 {'height': 185, 'weight': 91},
			 {'height': 186, 'weight': 75},
			 {'height': 182, 'weight': 73},
			 {'height': 190, 'weight': 82}
		]
		var axisData=[]
		for(var i=0;i<data.length;i++){
			var height=data[i].height
			var weight=data[i].weight
			var tep=[height,weight]
			axisData.push(tep)
		};
		var option = {
			grid:{
				show: true, 
				borderWidth: 10,
				borderColor: "rgba(197, 57, 42, 1)",  
				left: "10%",
				top: "10%",
				right: "10%",
				bottom: "10%",
				width: "80%",
				height: "80%"
			},
			xAxis:{
				type:'value',
				scale:true,
				position: "top",
				// boundaryGap:false,//紧挨边缘
			},
			yAxis: {
				type:'value',
				scale:true,
				position: "right",
			},
			dataZoom:[{
				type: 'slider',
				show: true,
				xAxisIndex: [0],
				start: 50,
				end: 100
				},
				{
				type: 'slider',
				show: true,
				yAxisIndex: [0],
				right: '90%',
				start: 80,
				end: 100
				},
				{
				type: 'inside',
				xAxisIndex: [0],
				start: 1,
				end: 35
				},
				{
				type: 'inside',
				yAxisIndex: [0],
				start: 29,
				end: 36
				},
			],
			series:[{
				type: 'effectScatter',//effectScatter  scatter
				showEffectOn:'emphasis',//render
				data: axisData,
				symbolSize:function(arg){
					var height=arg[0]/100
					var weight=arg[1]
					var bmi=weight/(height*height)
					if(bmi>26){
						return 20
					}return 0
					// console.log(arg)
				},
				itemStyle:{
					color:function(arg){
						var height=arg.data[0]/100
						var weight=arg.data[1]
						var bmi=weight/(height*height)
						if(bmi>26){
							return 'blue'
						}
						// console.log(arg)
					},
				},
			},{
				type: 'scatter',//effectScatter  scatter
				showEffectOn:'emphasis',//render
				data: axisData,
				symbolSize:function(arg){
					var height=arg[0]/100
					var weight=arg[1]
					var bmi=weight/(height*height)
					if(bmi>26){
						return 0
					}return 5
					// console.log(arg)
				},
				itemStyle:{
					color:function(arg){
						var height=arg.data[0]/100
						var weight=arg.data[1]
						var bmi=weight/(height*height)
						if(bmi>26){
							
						}return 'red'
						// console.log(arg)
					},
				},
			}],
		};
		myChart.setOption(option);
		</script>
	</body>
</html>

在这里插入图片描述

参考网址：Echarsts官网
注：查看数据，需要在网页上进行----右键（查看源码或者检查源码或者审查元素）也可以按F12

关注一下，谢谢

凤枭香
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HbuilderX制作Echarts图表教程
KKawa的博客
04-04 7919
在网上翻了好久，都是零碎的教程，俺要出一个保姆级教程！ 本文将从编辑器和echarts的下载开始教 Hbuilder X下载，进入官网https://www.dcloud.io/ 点击此处 下载好了之后，解压打开文件夹，直接找到hbuilder.exe这个文件，双击。 这就是Hbuilder的方便之处，直接双击，不用一直next 打开之后选择hbuilderX的编辑模式 然后点击左上角文件 ...
数据可视化--ECharts图--HBuilderX--散点图2
余生的博客
04-23 744
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>鸢尾花</title> <script src="echarts/echarts.min.js"></script> <script src="echarts/d3.min.js"></script> </head> <body> &l
HBuilder X中vue项目使用echarts教程
最新发布
qq_33458113的博客
05-31 924
trigger: 'axis', // axis显示每一列的所有类别数据, item只显示单个类别。data: ['衬衫', '羊毛衫', '裤子', '鞋子', '羽绒服'],color: 'black', //更改X坐标轴文字颜色。color: 'black', //更改Y坐标轴文字颜色。color: ['#00ff00'], // 设置背景颜色。type: 'line', // line为折线图。type: 'bar', // bar为条状图。name: '成本',name: '销售额',
大数据可视化-echarts桑基图（HBuilderX）
weixin_64272885的博客
04-01 215
echarts.js 下载链接: http://echarts.baidu.com/download.html。也可以下载 echarts.js 在页面文件中引入即可.引入 ECharts 文件可以用上面代码中的方法。想要使用该图表,只需要 复制以上代码。
大数据可视化-echarts仪表盘（单个仪表盘），使用HBuilderX
weixin_64272885的博客
04-01 564
echarts.js 下载链接: http://echarts.baidu.com/download.html。也可以下载 echarts.js 在页面文件中引入即可.引入 ECharts 文件可以用上面代码中的方法。想要使用该图表,只需要 复制以上代码。
Hbulider开发echarts
someInNeed的博客
12-02 1025
安装Hbulider 文件->新建项目->取名，选择项目所在文件夹->一个基本html项目 安装echarts 官网下载源代码版本，将js文件放入js文件夹下 <head>中引入 <script type="text/javascript" src="js/echarts.all.js"></script> 使用e...
数据可视化-canvas-svg-Echarts
08-19
3. **ECharts**: ECharts是一个由百度开发的开源JavaScript库，它提供了丰富的图表类型，包括柱状图、折线图、饼图、散点图等，并支持多图联动、实时更新和动态渲染。ECharts结合了Canvas和SVG的优点，既能保证图形...
【python数据分析】-python可视化-散点图
11-10
python数据分析与可视化 # 导入matplotlib.pyplot，并使用"plt"作为该模块的简写 import matplotlib.pyplot as plt # 导入pandas，并使用"pd"作为该模块的简写 import pandas as pd # 读取路径为 "/Users/书店图书...
数据可视化-ECharts 虚拟数据.zip
09-17
ECharts 提供了多种图表类型，包括折线图、柱状图、饼图、散点图、热力图等，同时支持多轴、堆叠、地图、仪表盘等高级特性。在使用 ECharts 进行数据可视化时，我们需要了解以下几个关键知识点： 1. **ECharts 初始...
echarts地图数据可视化-支持手机
03-19
ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图、散点图等，并且特别值得一提的是，ECharts也支持地图数据的可视化。在“echarts地图数据可视化-支持...
数据可视化-Pyecharts绘制散点图
04-22
在Python编程环境中，有许多强大的库用于数据可视化，其中Pyecharts是一个用于生成Echarts图表的Python库，特别适合制作交互式且美观的图表，包括散点图。 散点图是数据可视化中常用的一种图表类型，它通过二维空间...
Hbuilder实现调用echarts读json文件将数据可视化
qq_45410037的博客
07-13 2166
html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>会员入会年分布</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
数据可视化--ECharts图--HBuilderX--折线图
余生的博客
04-23 2514
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="echarts.min.js"></script> </head> <body> <div style="width:800px;height:600px;"></div> &l
HBulider X 创建ECharts可视化图表（柱状图，折线图等等）步骤
weixin_61620336的博客
10-09 5021
HBulider X 创建，下载，使用ECharts可视化图表（柱状图，折线图等等）步骤
神奇的HTML5画图应用
TERRY的技术日志
03-09 1670
Dzone上有一篇名为：Amazing HTML5 paint app 的文章，受到了很多人的关注。文中只有一句话“Sorry Adobe Flash, your days are numbered”（Adobe Flash，你的死期将至）。也许你会想，IE 压根就不支持HTML5！那是因为你不知道有explorercanvas（HTML5 Canvas for InternetExplorer）
引入 ECharts绘制一个简单的图表
好的品牌，自带传播力
11-22 428
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;!-- 引入 ECharts 文件 --&gt; &lt;script src="echarts.min.js"&gt;&lt;/script&gt; &lt;/h
初学数据可视化（一）
oafseoases
01-22 2730
初学数据可视化（一） 编译器的选择： Visual Studio Code HBuilder 自学课程及网站： Web前端开发小白入门宝典 w3school MDN web docs D3.js ECharts HTML基本代码： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;zh&quot;&amp;gt; &amp;lt;head&amp;gt;
大数据招聘岗位数据分析与可视化 - 爬虫 python 大屏可视化
04-30
大数据招聘岗位中的数据分析与可视化是一个非常热门的方向，需要具备一定的技能和经验。爬虫技术是其中非常重要的一项，可以获取各种数据源的信息，包括网站、API接口等。Python是爬虫技术中使用最广泛的语言之一，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值