1、项目结构
js文件夹: 下载了ECharts之后,解压缩,如解压后的根目录是echarts-2.1.8,则到echarts-2.1.8\doc\example\www路径下,把里面的js文件夹直接复制粘贴到项目的 WebRoot根目录下即可
echarts.jsp: 在WebRoot根目录下新建echarts.jsp
echarts.jsp
- <%@ page language="java" import="java.util.*" 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">
- <html>
- <head>
- <base href="<%=basePath%>">
- <title>ECharts实例</title>
- </head>
- <body>
- <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
- <!--Step:1 为ECharts准备一个具备大小(宽高)的Dom-->
- <div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
- <!--Step:2 Import echarts.js-->
- <!--Step:2 引入echarts.js-->
- <script src="js/echarts.js"></script>
- <script type="text/javascript">
- // Step:3 conifg ECharts's path, link to echarts.js from current page.
- // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
- require.config({
- paths: {
- echarts: './js'
- }
- });
- // Step:4 require echarts and use it in the callback.
- // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
- require(
- [
- //这里的'echarts'相当于'./js'
- 'echarts',
- 'echarts/chart/map'
- ],
- //创建ECharts图表方法
- function (ec) {
- // --- 地图 ---
- //基于准备好的dom,初始化echart图表
- var myChart = ec.init(document.getElementById('mainMap'));
- //定义图表option
- var option = {
- //标题,每个图表最多仅有一个标题控件,每个标题控件可设主副标题
- title: {
- //主标题文本,'\n'指定换行
- text: 'iphone销量',
- //副标题文本,'\n'指定换行
- subtext: '纯属虚构',
- //水平安放位置,默认为左侧,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
- x: 'center',
- //垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
- y: 'top'
- },
- //图例,每个图表最多仅有一个图例
- tooltip : {
- //触发类型,默认('item')数据触发,可选为:'item' | 'axis'
- trigger: 'item'
- },
- //图例,每个图表最多仅有一个图例
- legend: {
- //布局方式,默认为水平布局(即horizontal),可选为:'horizontal' | 'vertical'
- orient: 'vertical',
- //水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
- x: 'left',
- //垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
- y: 'top',
- //legend的data: 用于设置图例,data内的字符串数组需要与sereis数组内每一个series的name值对应
- data:['iphone3','iphone4','iphone5']
- },
- //值域选择,每个图表最多仅有一个值域控件
- dataRange: {
- //布局方式,默认为垂直布局('vertical'),可选为:'horizontal' | 'vertical'
- orient: 'vertical',
- //指定的最小值,eg: 0,默认无(null),必须参数
- min: 0,
- //指定的最大值,eg: 100,默认无(null),必须参数
- max: 2500,
- //水平安放位置,默认为全图左对齐('left'),可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
- x: 'left',
- //垂直安放位置,默认为全图底部('bottom'),可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
- y: 'bottom',
- //值域文字显示,默认为数值文本
- text: ['高','低'],
- //是否启用值域漫游,默认为关闭(false),启用后无视splitNumber,值域显示为线性渐变
- calculable: true
- },
- //工具箱,每个图表最多仅有一个工具箱
- toolbox: {
- //显示策略,可选为:true(显示) | false(隐藏),默认值为false
- show: true,
- //布局方式,默认为水平布局('horizontal'),可选为:'horizontal' | 'vertical'
- orient: 'vertical',
- //水平安放位置,默认为全图右对齐('right'),可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
- x: 'right',
- //垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
- y: 'center',
- //启用功能,目前支持feature,工具箱自定义功能回调处理
- feature: {
- //辅助线标志
- mark: {show: true},
- //数据视图,打开数据视图,可设置更多属性,readOnly 默认数据视图为只读(即值为true),可指定readOnly为false打开编辑功能
- dataView: {show: true, readOnly: false},
- //restore,还原,复位原始图表
- restore: {show: true},
- //saveAsImage,保存图片(IE8-不支持),图片类型默认为'png'
- saveAsImage: {show: true}
- }
- },
- //缩放漫游组件,仅对地图有效
- roamController: {
- //显示策略,默认为显示(true),可选为:true(显示) | false(隐藏)。
- show: true,
- //水平安放位置,默认为左侧('letf'),可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
- x: 'right',
- //垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
- y: 'top',
- //必须,默认无(null),指定漫游组件可控地图类型,如:{ china: true }
- mapTypeControl: {
- //指定地图类型
- 'china': true
- }
- },
- //series(地图),驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据
- series : [
- {
- //系列名称,如果启用legend,该值将被legend.data索引相关
- name: 'iphone3',
- //图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示
- type: 'map',
- //地图类型,支持world,china及全国34个省市自治区。省市自治区的mapType直接使用简体中文:如'广东'
- mapType: 'china',
- //是否开启滚轮缩放和拖拽漫游,默认为false(关闭),其他有效输入为true(开启),'scale'(仅开启滚轮缩放),'move'(仅开启拖拽漫游)
- roam: 'scale',
- //图形样式,可设置图表内图形的默认样式和强调样式(悬浮时样式)
- itemStyle:{
- //正常时的样式
- normal:{
- //边框线宽,单位px
- borderWidth: 2,
- //边框颜色
- borderColor: 'lightgreen',
- //标签,饼图默认显示在外部,离饼图距离由labelLine.length决定,地图标签不可指定位置
- label: {show:true}
- },
- //鼠标经过时的样式
- emphasis: {
- //边框线宽,单位px
- borderWidth:2,
- //边框颜色
- borderColor:'#fff',
- //鼠标经过时区域的颜色
- color: '#32cd32',
- //标签
- label: {
- show: true,
- //文本样式
- textStyle: {
- //文本字体颜色
- color: '#fff'
- }
- }
- }
- },
- //当图表类型为地图时,需要说明每部分数据对应的省份,可设置选中状态,如 :{name: '北京',value: 1234,selected: true},
- data:[
- {name: '北京',value: Math.round(Math.random()*1000)},
- {name: '天津',value: Math.round(Math.random()*1000)},
- {name: '上海',value: Math.round(Math.random()*1000)},
- {name: '重庆',value: Math.round(Math.random()*1000)},
- {name: '河北',value: Math.round(Math.random()*1000)},
- {name: '河南',value: Math.round(Math.random()*1000)},
- {name: '云南',value: Math.round(Math.random()*1000)},
- {name: '辽宁',value: Math.round(Math.random()*1000)},
- {name: '黑龙江',value: Math.round(Math.random()*1000)},
- {name: '湖南',value: Math.round(Math.random()*1000)},
- {name: '安徽',value: Math.round(Math.random()*1000)},
- {name: '山东',value: Math.round(Math.random()*1000)},
- {name: '新疆',value: Math.round(Math.random()*1000)},
- {name: '江苏',value: Math.round(Math.random()*1000)},
- {name: '浙江',value: Math.round(Math.random()*1000)},
- {name: '江西',value: Math.round(Math.random()*1000)},
- {name: '湖北',value: Math.round(Math.random()*1000)},
- {name: '广西',value: Math.round(Math.random()*1000)},
- {name: '甘肃',value: Math.round(Math.random()*1000)},
- {name: '山西',value: Math.round(Math.random()*1000)},
- {name: '内蒙古',value: Math.round(Math.random()*1000)},
- {name: '陕西',value: Math.round(Math.random()*1000)},
- {name: '吉林',value: Math.round(Math.random()*1000)},
- {name: '福建',value: Math.round(Math.random()*1000)},
- {name: '贵州',value: Math.round(Math.random()*1000)},
- {name: '广东',value: Math.round(Math.random()*1000)},
- {name: '青海',value: Math.round(Math.random()*1000)},
- {name: '西藏',value: Math.round(Math.random()*1000)},
- {name: '四川',value: Math.round(Math.random()*1000)},
- {name: '宁夏',value: Math.round(Math.random()*1000)},
- {name: '海南',value: Math.round(Math.random()*1000)},
- {name: '台湾',value: Math.round(Math.random()*1000)},
- {name: '香港',value: Math.round(Math.random()*1000)},
- {name: '澳门',value: Math.round(Math.random()*1000)}
- ],
- },
- {
- //系列名称,如果启用legend,该值将被legend.data索引相关
- name: 'iphone4',
- //图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示
- type: 'map',
- //地图类型,支持world,china及全国34个省市自治区。省市自治区的mapType直接使用简体中文:如'广东'
- mapType: 'china',
- //是否开启滚轮缩放和拖拽漫游,默认为false(关闭),其他有效输入为true(开启),'scale'(仅开启滚轮缩放),'move'(仅开启拖拽漫游)
- roam: 'scale',
- //图形样式,可设置图表内图形的默认样式和强调样式(悬浮时样式)
- itemStyle:{
- //正常时的样式
- normal:{
- //边框线宽,单位px
- borderWidth: 2,
- //边框颜色
- borderColor: 'lightgreen',
- //标签,饼图默认显示在外部,离饼图距离由labelLine.length决定,地图标签不可指定位置
- label: {show:true}
- },
- //鼠标经过时的样式
- emphasis: {
- //边框线宽,单位px
- borderWidth:2,
- //边框颜色
- borderColor:'#fff',
- //鼠标经过时区域的颜色
- color: '#32cd32',
- //标签
- label: {
- show: true,
- //文本样式
- textStyle: {
- //文本字体颜色
- color: '#fff'
- }
- }
- }
- },
- data:[
- {name: '北京',value: Math.round(Math.random()*1000)},
- {name: '天津',value: Math.round(Math.random()*1000)},
- {name: '上海',value: Math.round(Math.random()*1000)},
- {name: '重庆',value: Math.round(Math.random()*1000)},
- {name: '河北',value: Math.round(Math.random()*1000)},
- {name: '安徽',value: Math.round(Math.random()*1000)},
- {name: '新疆',value: Math.round(Math.random()*1000)},
- {name: '浙江',value: Math.round(Math.random()*1000)},
- {name: '江西',value: Math.round(Math.random()*1000)},
- {name: '山西',value: Math.round(Math.random()*1000)},
- {name: '内蒙古',value: Math.round(Math.random()*1000)},
- {name: '吉林',value: Math.round(Math.random()*1000)},
- {name: '福建',value: Math.round(Math.random()*1000)},
- {name: '广东',value: Math.round(Math.random()*1000)},
- {name: '西藏',value: Math.round(Math.random()*1000)},
- {name: '四川',value: Math.round(Math.random()*1000)},
- {name: '宁夏',value: Math.round(Math.random()*1000)},
- {name: '香港',value: Math.round(Math.random()*1000)},
- {name: '澳门',value: Math.round(Math.random()*1000)}
- ]
- },
- {
- //系列名称,如果启用legend,该值将被legend.data索引相关
- name: 'iphone5',
- //图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示
- type: 'map',
- //地图类型,支持world,china及全国34个省市自治区。省市自治区的mapType直接使用简体中文:如'广东'
- mapType: 'china',
- //是否开启滚轮缩放和拖拽漫游,默认为false(关闭),其他有效输入为true(开启),'scale'(仅开启滚轮缩放),'move'(仅开启拖拽漫游)
- roam: 'scale',
- //图形样式,可设置图表内图形的默认样式和强调样式(悬浮时样式)
- itemStyle:{
- //正常时的样式
- normal:{
- //边框线宽,单位px
- borderWidth: 2,
- //边框颜色
- borderColor: 'lightgreen',
- //标签,饼图默认显示在外部,离饼图距离由labelLine.length决定,地图标签不可指定位置
- label: {show:true}
- },
- //鼠标经过时的样式
- emphasis: {
- //边框线宽,单位px
- borderWidth:2,
- //边框颜色
- borderColor:'#fff',
- //鼠标经过时区域的颜色
- color: '#32cd32',
- //标签
- label: {
- show: true,
- //文本样式
- textStyle: {
- //文本字体颜色
- color: '#fff'
- }
- }
- }
- },
- data:[
- {name: '北京',value: Math.round(Math.random()*1000)},
- {name: '天津',value: Math.round(Math.random()*1000)},
- {name: '上海',value: Math.round(Math.random()*1000)},
- {name: '广东',value: Math.round(Math.random()*1000)},
- {name: '台湾',value: Math.round(Math.random()*1000)},
- {name: '香港',value: Math.round(Math.random()*1000)},
- {name: '澳门',value: Math.round(Math.random()*1000)}
- ]
- }
- ]
- };
- //为echarts对象加载数据
- myChart.setOption(option);
- }
- );
- </script>
- </body>
- </html>
相关推荐
内容概要:本文详细介绍了基于MATLAB GUI界面和卷积神经网络(CNN)的模糊车牌识别系统。该系统旨在解决现实中车牌因模糊不清导致识别困难的问题。文中阐述了整个流程的关键步骤,包括图像的模糊还原、灰度化、阈值化、边缘检测、孔洞填充、形态学操作、滤波操作、车牌定位、字符分割以及最终的字符识别。通过使用维纳滤波或最小二乘法约束滤波进行模糊还原,再利用CNN的强大特征提取能力完成字符分类。此外,还特别强调了MATLAB GUI界面的设计,使得用户能直观便捷地操作整个系统。 适合人群:对图像处理和深度学习感兴趣的科研人员、高校学生及从事相关领域的工程师。 使用场景及目标:适用于交通管理、智能停车场等领域,用于提升车牌识别的准确性和效率,特别是在面对模糊车牌时的表现。 其他说明:文中提供了部分关键代码片段作为参考,并对实验结果进行了详细的分析,展示了系统在不同环境下的表现情况及其潜在的应用前景。
嵌入式八股文面试题库资料知识宝典-计算机专业试题.zip
嵌入式八股文面试题库资料知识宝典-C and C++ normal interview_3.zip
内容概要:本文深入探讨了一款额定功率为4kW的开关磁阻电机,详细介绍了其性能参数如额定功率、转速、效率、输出转矩和脉动率等。同时,文章还展示了利用RMxprt、Maxwell 2D和3D模型对该电机进行仿真的方法和技术,通过外电路分析进一步研究其电气性能和动态响应特性。最后,文章提供了基于RMxprt模型的MATLAB仿真代码示例,帮助读者理解电机的工作原理及其性能特点。 适合人群:从事电机设计、工业自动化领域的工程师和技术人员,尤其是对开关磁阻电机感兴趣的科研工作者。 使用场景及目标:适用于希望深入了解开关磁阻电机特性和建模技术的研究人员,在新产品开发或现有产品改进时作为参考资料。 其他说明:文中提供的代码示例仅用于演示目的,实际操作时需根据所用软件的具体情况进行适当修改。
少儿编程scratch项目源代码文件案例素材-剑客冲刺.zip
少儿编程scratch项目源代码文件案例素材-几何冲刺 转瞬即逝.zip
内容概要:本文详细介绍了基于PID控制器的四象限直流电机速度驱动控制系统仿真模型及其永磁直流电机(PMDC)转速控制模型。首先阐述了PID控制器的工作原理,即通过对系统误差的比例、积分和微分运算来调整电机的驱动信号,从而实现转速的精确控制。接着讨论了如何利用PID控制器使有刷PMDC电机在四个象限中精确跟踪参考速度,并展示了仿真模型在应对快速负载扰动时的有效性和稳定性。最后,提供了Simulink仿真模型和详细的Word模型说明文档,帮助读者理解和调整PID控制器参数,以达到最佳控制效果。 适合人群:从事电力电子与电机控制领域的研究人员和技术人员,尤其是对四象限直流电机速度驱动控制系统感兴趣的读者。 使用场景及目标:适用于需要深入了解和掌握四象限直流电机速度驱动控制系统设计与实现的研究人员和技术人员。目标是在实际项目中能够运用PID控制器实现电机转速的精确控制,并提高系统的稳定性和抗干扰能力。 其他说明:文中引用了多篇相关领域的权威文献,确保了理论依据的可靠性和实用性。此外,提供的Simulink模型和Word文档有助于读者更好地理解和实践所介绍的内容。
嵌入式八股文面试题库资料知识宝典-2013年海康威视校园招聘嵌入式开发笔试题.zip
少儿编程scratch项目源代码文件案例素材-驾驶通关.zip
小区开放对周边道路通行能力影响的研究.pdf
内容概要:本文探讨了冷链物流车辆路径优化问题,特别是如何通过NSGA-2遗传算法和软硬时间窗策略来实现高效、环保和高客户满意度的路径规划。文中介绍了冷链物流的特点及其重要性,提出了软时间窗概念,允许一定的配送时间弹性,同时考虑碳排放成本,以达到绿色物流的目的。此外,还讨论了如何将客户满意度作为路径优化的重要评价标准之一。最后,通过一段简化的Python代码展示了遗传算法的应用。 适合人群:从事物流管理、冷链物流运营的专业人士,以及对遗传算法和路径优化感兴趣的科研人员和技术开发者。 使用场景及目标:适用于冷链物流企业,旨在优化配送路线,降低运营成本,减少碳排放,提升客户满意度。目标是帮助企业实现绿色、高效的物流配送系统。 其他说明:文中提供的代码仅为示意,实际应用需根据具体情况调整参数设置和模型构建。
少儿编程scratch项目源代码文件案例素材-恐怖矿井.zip
内容概要:本文详细介绍了基于STM32F030的无刷电机控制方案,重点在于高压FOC(磁场定向控制)技术和滑膜无感FOC的应用。该方案实现了过载、过欠压、堵转等多种保护机制,并提供了完整的源码、原理图和PCB设计。文中展示了关键代码片段,如滑膜观测器和电流环处理,以及保护机制的具体实现方法。此外,还提到了方案的移植要点和实际测试效果,确保系统的稳定性和高效性。 适合人群:嵌入式系统开发者、电机控制系统工程师、硬件工程师。 使用场景及目标:适用于需要高性能无刷电机控制的应用场景,如工业自动化设备、无人机、电动工具等。目标是提供一种成熟的、经过验证的无刷电机控制方案,帮助开发者快速实现并优化电机控制性能。 其他说明:提供的资料包括详细的原理图、PCB设计文件、源码及测试视频,方便开发者进行学习和应用。
基于有限体积法Godunov格式的管道泄漏检测模型研究.pdf
嵌入式八股文面试题库资料知识宝典-CC++笔试题-深圳有为(2019.2.28)1.zip
少儿编程scratch项目源代码文件案例素材-几何冲刺 V1.5.zip
Android系统开发_Linux内核配置_USB-HID设备模拟_通过root权限将Android设备转换为全功能USB键盘的项目实现_该项目需要内核支持configFS文件系统
C# WPF - LiveCharts Project
少儿编程scratch项目源代码文件案例素材-恐怖叉子 动画.zip
嵌入式八股文面试题库资料知识宝典-嵌⼊式⼯程师⾯试⾼频问题.zip