web数据可视化（echarts版）代码5-4

最新推荐文章于 2024-04-27 01:18:11 发布

x15207439871

最新推荐文章于 2024-04-27 01:18:11 发布

阅读量757

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/x15207439871/article/details/125163031

版权

这篇博客展示了如何使用ECharts库创建两个数据可视化图表：一个是展示某大学历年招生情况的饼图，另一个是对比不同专业招生数量的柱状图。ECharts配置包括颜色设定、背景透明度、提示框、图例、工具箱等功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<script src="echarts.js"></script>
</head>
<body>
<div id="main1" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart1 = echarts.init(document.getElementById('main1'));
var option1={
color:['red','Lime','blue','DarkGreen','DarkOrchid','Navy'],
backgroundColor:'rgba(128,128,128,0.1)',
title:{text:'某大学各专业历年招生情况分析',x:'center',y:12},
tooltip:{trigger:"item",formatter:"{a}<br/>{b}:{c}({d}%)