echart图标js中的字段意思
var org='1'; function curOrgUp(org){ var myChart = echarts.init(document.getElementById('container')); // 指定图表的配置项和数据 var option = { //-------------- 标题 title ---------------- title: { // text: '主标题', // textStyle:{ //---主标题内容样式 // color:'#fff' // }, // subtext:'副标题', //---副标题内容样式 // subtextStyle:{ // color:'#bbb' // } padding: [0, 0, 0, 0] //---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位 }, //---------------- 图例 legend ----------------- legend: { type: 'plain', top: '20', //----图例相对容器位置,top\bottom\left\right selected: { '销量': true, //----图例选择,图形加载出来会显示选择的图例,默认为true }, textStyle: { //----图例内容样式 color: '#30395E', //---所有图例的字体颜色 }, tooltip: { //图例提示框,默认不显示 show: true, color: 'red', }, data: [ //----图例内容 { name: '', icon: 'circle', //----图例的外框样式 textStyle: { color: '#30395E', //----单独设置某一个图例的颜色 } } ], }, //-------------- 提示框 ----------------- tooltip: { show: true, //---是否显示提示框,默认为true trigger: 'item', //---数据项图形触发 axisPointer: { //---指示样式 type: 'shadow', axis: 'auto', }, padding: 5, textStyle: { //---提示框内容样式 color: "#fff", }, }, //------------- grid区域 ---------------- grid: { show: false, //---是否显示直角坐标系网格 top: 20, //---相对位置,top\bottom\left\right containLabel: false, //---grid 区域是否包含坐标轴的刻度标签 tooltip: { //---鼠标焦点放在图形上,产生的提示框 show: true, trigger: 'item', //---触发类型 backgroundColor: 'rgba(255,255,255,0.9)', textStyle: { color: '#30395E', }, } }, //------------- x轴 ------------------- xAxis: { show: true, //---是否显示 position: 'bottom', //---x轴位置 offset: 0, //---x轴相对于默认位置的偏移 type: 'category', //---轴类型,默认'category' // name:'', //---轴名称 nameLocation: 'end', //---轴名称相对位置 nameTextStyle: { //---坐标轴名称样式 color: "#30395E", padding: [5, 0, 0, -5], //---坐标轴名称相对位置 }, nameGap: 15, //---坐标轴名称与轴线之间的距离 axisLine: { //---坐标轴 轴线 show: true, //---是否显示 //------------------- 箭头 ------------------------- // symbol:['none', 'arrow'], //---是否显示轴线箭头 //------------------- 线 ------------------------- lineStyle: { color: '#30395E', width: 1, type: 'solid', }, }, axisTick: { //---坐标轴 刻度 show: true, //---是否显示 inside: true, //---是否朝内 length: 3, //---长度 lineStyle: { //color:'red', //---默认取轴线的颜色 width: 1, type: 'solid', }, }, axisLabel: { //---坐标轴 标签 show: true, //---是否显示 inside: false, //---是否朝内 align: "center", verticalAlign: "middle", rotate: -50, //---旋转角度 margin: 30, //---刻度标签与轴线之间的距离 //color:'red', //---默认取轴线的颜色 }, splitLine: { //---grid 区域中的分隔线 show: false, //---是否显示,'category'类目轴不显示,此时我的X轴为类目轴,splitLine属性是无意义的 lineStyle: { //color:'red', //width:1, //type:'solid', }, }, splitArea: { //--网格区域 show: false, //---是否显示,默认false }, data: [], }, //---------------------- y轴 ------------------------ yAxis: { show: true, //---是否显示 position: 'left', //---y轴位置 offset: 0, //---y轴相对于默认位置的偏移 boundaryGap: [0, "20%"], type: 'value', //---轴类型,默认'category' // name:'', //---轴名称 nameLocation: 'end', //---轴名称相对位置value nameTextStyle: { //---坐标轴名称样式 color: "#30395E", padding: [5, 0, 0, 5], //---坐标轴名称相对位置 }, nameGap: 15, //---坐标轴名称与轴线之间的距离 axisLine: { //---坐标轴 轴线 show: true, //---是否显示 //------------------- 箭头 ------------------------- // symbol:['none', 'arrow'], //---是否显示轴线箭头 //------------------- 线 ------------------------- lineStyle: { color: '#30395E', width: 1, type: 'solid', }, }, axisTick: { //---坐标轴 刻度 show: true, //---是否显示 inside: true, //---是否朝内 length: 1, //---长度 lineStyle: { //color:'red', //---默认取轴线的颜色 width: 1, type: 'solid', }, }, axisLabel: { //---坐标轴 标签 show: true, //---是否显示 inside: false, //---是否朝内 rotate: 0, //---旋转角度 margin: 8, //---刻度标签与轴线之间的距离 //color:'red', //---默认取轴线的颜色 }, splitLine: { //---grid 区域中的分隔线 show: true, //---是否显示,'category'类目轴不显示,此时我的y轴为类目轴,splitLine属性是有意义的 lineStyle: { color: '#CFD3DC', width: 1, type: 'solid', //---类型 }, }, splitArea: { //--网格区域 show: false, //---是否显示,默认false }, }, //------------ 内容数据 ----------------- series: [ { // name: '', //---系列名称 type: 'bar', //---类型 legendHoverLink: true, //---是否启用图例 hover 时的联动高亮 label: { //---图形上的文本标签 show: false, position: 'insideTop', //---相对位置 rotate: 0, //---旋转角度 color: '#1F4AB1', }, itemStyle: { //---图形形状 color: '#1F4AB1', barBorderRadius: [0, 0, 0, 0], }, barWidth: '24', //---柱形宽度 barCategoryGap: '25%', //---柱形间距 legend: { data: ['数值'], top: '30' }, data: [] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); $.ajax({ url: "/kms/knowledgeView/docOrgNumView.do", type: "POST", data:{type: org}, dataType: "json", success: function (data) { option = { xAxis: { data: data.datas.xAxis }, series: [{ data: data.datas.data }] } myChart.setOption(option); } }); }
2.controller返回时的数据
@Override public Map<String, Object> docOrgNumData(KnowledgeSearchVo vo) { // Map<String,Object> datas=new HashMap<String,Object>(); // List<KnowledgeViewModel> list=knowledgeViewDao.docOrgNum(vo); // List<String> xAxis=new ArrayList<String>(); // List<Integer> data=new ArrayList<Integer>(); // for(KnowledgeViewModel m : list){ // xAxis.add(m.getOrgName()); // data.add(m.getNum()); // } // datas.put("xAxis",xAxis); // datas.put("data",data); Map<String,Object> datas=new HashMap<String,Object>(); List<KnowledgeViewModel> list=null; //type:1为本年处所上传知识量、2为本年处所浏览知识量、3为本年处所下载知识量、4为本年处所总积分 if (vo.getType().equals("1")){ list=knowledgeViewDao.docOrgNum(vo); }else if (vo.getType().equals("2")){ list=knowledgeViewDao.docOrgViewCount(vo); }else if(vo.getType().equals("3")){ list=knowledgeViewDao.docOrgDownCount(vo); }else { list=knowledgeViewDao.docOrgTotalScore(vo); } List<String> xAxis=new ArrayList<String>(); List<Integer> data=new ArrayList<Integer>(); for(KnowledgeViewModel m : list){ xAxis.add(m.getOrgName()); data.add(m.getNum()); } datas.put("xAxis",xAxis); datas.put("data",data); return datas; }