直接复制一下代码，引入js，运行就行。
可执行代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="<%=path %>/static/commons/plugins/echarts_3_6/echarts.common.min.js"></script>
<style>
#pic1{
width:400px;
height:400px;
margin: 20px auto;
}
</style>
</head>
<body>
<div id="pic1"></div>
</body>
<script type="text/javascript">
var myCharts1 = echarts.init(document.getElementById('pic1'));
var option1 = {
backgroundColor: 'white',
title: {
text: '课程内容分布',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {d}%"
},
visualMap: {
show: false,
min: 500,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series : [
{
name:'课程内容分布',
type:'pie',
clockwise:'true',
startAngle:'0',
radius : '60%',
center: ['50%', '50%'],
data:[
{
value:70,
name:'语言',
itemStyle:{
normal:{
color:'rgb(255,192,0)',
shadowBlur:'90',
shadowColor:'rgba(0,0,0,0.8)',
shadowOffsetY:'30'
}
}
},
{
value:10,
name:'美国科学&社会科学',
itemStyle:{
normal:{
color:'rgb(1,175,80)'
}
}
},
{
value:20,
name:'美国数学',
itemStyle:{
normal:{
color:'rgb(122,48,158)'
}
}
}
],
}
]
};
myCharts1.setOption(option1);
</script>
</html>
相关推荐
这是echart地图示例
"echart官方demo（完整版）"是一个包含ECharts所有示例和必需JavaScript库的压缩包，非常适合前端开发者用于学习、参考和实际项目应用。 首先，ECharts的图表类型非常多样化，包括但不限于： 1. 折线图（line）：...
echart示例文档
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，...
在本压缩包中，你将找到四个独特的ECharts扩展示例：词云图、水球图、烟花秀以及关系图谱。这些示例展示了ECharts在数据可视化领域的强大能力和创新性。 1. **词云图**： 词云图是一种用图形元素表示文本数据的...
- ECharts 3.8.5的文档详细介绍了每个图表类型、配置项、API接口以及各种示例，是学习和使用ECharts的重要参考资料。通过阅读文档，开发者可以了解如何配置图表样式，如何处理数据，如何响应用户交互等。 - 文档中...
基于SpringCloud的微服务简易示例代码
本压缩包"scschool"包含了多种ECharts的示例，旨在帮助开发者快速理解和应用ECharts到实际项目中，避免重复开发基础功能，提高开发效率。 1. **ECharts图表类型** ECharts支持多种图表类型，如柱状图、折线图、...
- **代码示例**：展示了完整的HTML、CSS和JavaScript代码，可以直接复制到本地运行。 - **图表预览**：显示了实例的最终效果，可以实时调整配置项并查看变化。 - **配置项解析**：解释了代码中的关键配置项，帮助...
第一步：准备 首先我们要做的是在我们的项目中引入我们所需要的依赖，假设你已经在你的电脑上已经安装好了node与cnpm只需要利用控制台在你的项目目录下使用如下命令 1.... 2....在安装完毕后你将会得到一个命名为node_...
Echart展示样例，利用Echart进行大屏数据展示Echart示例Echart展示示例，利用Echart进行大屏数据展示，有柱状图，河南省地图，表格滚动等效果。相关框架技术jquery、bootstrap、echart（http://echarts.baidu.com/）...
echart地图应用实例，有详细的试用介绍，的的的的的的的的
以下将详细介绍十个主要游戏修改器，并提供相应的代码示例及注释。 一、Cheat Engine（CE 修改器） Cheat Engine 是一款功能强大的开源游戏修改工具，广泛应用于单机游戏修改。 功能： 内存扫描：可以搜索游戏进程中...
在本示例中，我们将深入探讨如何使用ECharts.js来绘制一个可缩放的折线图。 首先，我们需要引入ECharts库。在HTML文件中，通过`<script>`标签引入`echarts.js`文件，确保文件路径正确无误： ```html ...
修改器二、主要游戏修改器介绍 Cheat Engine ...以下是一个用 Python 和 pymem 库实现的简单游戏修改器代码示例： import pymem # 游戏进程名称 process_name = "Game.exe" # 连接到游戏进程 pm = pym
在本项目中，我们主要探讨如何在基于QT5.6的环境中使用Echarts库来创建一个动态交互的仪表盘。Echarts是一个强大的、基于JavaScript的数据可视化库，它提供了丰富的图表类型，如折线图、柱状图、饼图以及我们的案例...
通过查看和运行这些示例，开发者可以更深入地理解如何在QT应用中集成并使用Echart库。 总的来说，QT与Echart的结合为开发者提供了一种高效、灵活的方式，能够在桌面应用中实现复杂的数据可视化，同时保持用户界面的...
需求背景 假如有如下图所示的图表需要显示多个网口在一段时间内的多个状态：y轴用于展示各网口...于是继续查阅echart官网示例，终于在自定义类型图表中找到了一个相似的示例，地址 通过研究示例代码并进行一番改造，终
综上所述，“Android下的简易便签示例”项目涵盖了Android应用开发的诸多核心概念和技术，包括但不限于数据库操作、用户界面设计、数据存储和恢复、活动管理以及用户交互等。通过这个项目，开发者可以深入理解...
综上所述，"百度echart地图完成版"是一个完整的地图可视化解决方案，包含了一系列实用的功能和示例，可以帮助开发者高效地实现地理数据的可视化。通过学习和实践，你可以创建出富有洞察力和吸引力的地图应用。