本文以柱形图和饼形图创建交互式、快速动态网页应用的网页开发技术动态赋值为例

一、饼形图赋值步骤

(1)jsp页面

！-引入展示官方js-script src=' http : js/echart。js '/脚本体！-为展示准备一个具备大小（宽高)的数字正射影像图饼形图-div id=' first ' style=' width : 600 px；'height:400px'/div [html]查看普通副本/正文(2)js页面

//饼图模板var DOM=文档。getelementbyid(' first ')；var myChart=echart。init(DOM)；var app={ }；option=null option={ title : { text : }用户位置记录，subtext: ' '，x:'center' }，tooltip : { trigger: 'item '，formatter :“{ a } br/{ b } : { c }({ d } %)' }，图例： { orient : ' vertical '，x : 'left '，data:[] }，toolbox: { show : true，feature 3: savasi可计算：真的，系列： [ { name: ' '，type:'pie '，radius : '55% '，center: ['50% '，' 60%']，data :[]} } }；if(option的选项类型==' object '){ mychart。设置选项(选项，真)；}//饼图动态赋值var year=$('#year-search ').val()；var嘴型=$(' #嘴型搜索').val()；$.ajax({ type: 'get '，URL : rootPath '/wx绑定/getpiedatabymouth。动作'，数据： {'year':year，' mouth':mouth}，缓存： false，//禁用缓存数据类型： 'json '，成功：函数（结果){ var name=[]；//定义两个数组var nums=[]；$.每个（结果、函数（键、值){ //此处我返回的是列表字符串，映射字符串，字符串循环地图名称。推送(值。省份_ name)；var obj=新对象();物体。名称=值。车辆名称；物体。值=值。计数；nums。推送(obj)；});myChart.setOption({ //加载数据图表legend: { data: names }，series: { //根据名字对应到相应的系列名称： ['数量]，数据： nums } })；}，错误：函数(XMLHttpRequest，textStatus，错误通过){ alert('查询失败');} });(3)后台代码根据你自己的代码就好

(4)显示样式

二、柱型图赋值步骤

(1)jsp页面

！-引入展示官方js-script src=' http : js/echart。js '/脚本体！-为展示准备一个具备大小（宽高)的数字正射影像图柱形图-div id=' second ' style=' width : 600 px；'height :400 px '/div/body(2)js页面

//柱形图模板var domLong=文档。getelementbyid(' second ')；var mychartserver=echart。init(DOMlong)；var app={ }；option=null option={ color :[' # 3398 db ']，tooltip : { trigger: 'axis '，axis端口： {//坐标轴指示器，坐标轴触发有效键入："阴影"//默认为直线，可选为：' line' | 'shadow' }，grid: { left: '3% '，right: '4% '，bottom: '3% '，containLabel: true }，xAxis :[{ type : ' category }，data : []，axis tick : { align with label 3360 true } }]，yAxis :[{ type 33: ' value ' '直接访问，键入：'bar '，barWidth: '60% '，数据：[]}]}；if(选项的选项类型==' object '){ MyChartSession。设置选项(选项，真)；}//给柱形图赋值var year=$('#year-search ').val()；$.ajax({ type: 'post '，URL : rootPath '/wxboundlist。动作'，数据： {'year':year}，缓存： false，//禁用缓存数据类型： 'json '，成功：函数（结果){ console.log(结果);var Linnames=[]；var Linnums=[]；$.每个(result.lin，function(key，values){ linnames。推送(值。嘴)；琳努斯。推送(值。计数)；});//柱形图赋值myChartSecond.setOption({ //加载数据图表xAxis: { data: linNames }，series: { //根据名字对应到相应的系列名称： ['数量]，数据： Linnums } })；}，错误：函数(XMLHttpRequest，textStatus，错误通过){ alert('查询失败');} });}(3)后台代码部分根据自己需要就好。

(4)图片样式

可以去试试你的展示图标了。

以上这篇创建交互式、快速动态网页应用的网页开发技术动态赋值展示的实例（饼图和柱形图)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。