使用echarts实现雷达图

<%@ page language=“java” contentType=“text/html; charset=utf-8”
pageEncoding=“utf-8”%>
<%@ taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c”%>
<%@taglib prefix=“sec” uri="/WEB-INF/tags/shiro.tld"%>
<%@taglib prefix=“pt6” uri="/WEB-INF/tags/platform6.tld"%>
<%@ page import=“avicit.platform6.commons.utils.ViewUtil”%>

});

             inValue[i] = r.result[i]["JX_VALUE"];inName.name = r.result[i]["JX_PERIOD"];}var obj2 = { name :  inName.name , value : inValue};var finalResult = new Array();finalResult.push(obj2);}autoLoadChart("radar", "jxOrderByDivId", "", finalResult, "", outName, nowPeriod + deptType);}
});

}
function toOpenDetail(){
var url = “avicit/jsczxc/bibsccenterdy/BibscCenterDJDetail.jsp?deptType=” + encodeURI(deptType);
window.open(href + url,’’,‘width=’+(window.screen.availWidth-10)+’,height=’+(window.screen.availHeight-30)+ ‘,top=0,left=0’);
}

//‘line’（折线图） | ‘bar’（柱状图） | ‘scatter’（散点图） | ‘k’（K线图）
// ‘pie’（饼图） | ‘radar’（雷达图） | ‘chord’（和弦图） | ‘force’（力导向布局图） | ‘map’（地图）
function autoLoadChart(chartType,id,kpiName,value,planUnitName, str1, str2){
var _self = this;
var chartDiv = document.getElementById(id);
var myChart = echarts.getInstanceByDom(chartDiv);
if(typeof(myChart) != ‘undefined’) {
myChart.dispose();
}
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var resizeWorldMapContainer = function () {
chartDiv.style.width = document.getElementById(id).offsetWidth + ‘px’;
chartDiv.style.height = document.getElementById(id).offsetHeight + ‘px’;
}
//设置容器高宽
resizeWorldMapContainer();
myChart = echarts.init(chartDiv);
var option = {};
if(chartType == “radar”){
option = getRadarOption(kpiName, value, str1, str2);
}
myChart.setOption(option);
//用于使chart自适应高度和宽度
window.onresize = function () {
//重置容器高宽
resizeWorldMapContainer();
myChart.resize();
};
myChart.on(‘click’, function (param) {
//alert(param.name + “—” + param.value);
});
}

function getRadarOption(name, dataList, list, title){
option = {
title: {
text: title,
left : ‘center’,
top : 0,
textStyle: {
color: ‘#ccc’//标题颜色
}
},
tooltip: {
position: [‘50%’, ‘20%’]//调整提示框的位置
},
legend: {
data: [],//图例
},
radar: {
indicator: list,
center: [‘50%’,‘50%’],//调整图的整体位置
radius: 80//调整图的整体大小
},
series: [{
name: ‘’,
type: ‘radar’,
itemStyle: {
normal:{
areaStyle: {type: ‘default’},//此属性控制雷达图展示面积图
color: ‘#FF6600’,
}
},
data : dataList
}]
};
return option;
}

使用echarts实现雷达图相关推荐

JS Echarts之雷达图 | 使用Excel画雷达图
文章目录第一部分:JS Echarts之雷达图 1. 什么是 Echarts 2. JS Echarts之雷达图 2.1 使用Echarts画雷达图 2.3 echarts雷达图中常用修改修改in ...
【前端echatrs图表框架】使用echarts实现雷达图
一个学生在大学四年中所修的所有课程可以分为素质必修课,核心必修课,一般必修课,通识必修课,通识限选课5种,通过雷达图,导入学生在每一种课程的平均绩点,即可清晰地显示一个同学的综合发展情况了. 代码如下 ...
echarts radar雷达图常规使用
<div id="idRadar"></div> data() {return {// 雷达图optionRadar: {color: '#1890FF', ...
echarts实现雷达图
这里提供两种效果,都是对官网的demo进行一点的改进,这里放上官网链接,有不清楚的参数可直接查阅->echarts官网.话不多说,直接上代码: //实现一 initChart() {this.c ...
echarts自定义雷达图（radar）
先来个效果图 1.首先设置形状 shape: "circle", // 支持 'polygon' 和 'circle' ,默认polygon 2.设置线条 splitLine: { ...
关于echarts的雷达图比较详细的参数说明
要实现的效果图如下: 接下来主要关于下面的几个参数进行设置 1. 雷达图的圈数 2. 雷达图每圈上面的数字 3. 雷达图区域拐点的数值 4. 雷达图拐点的样式 5. 雷达图每个区域的颜色设置 6. 雷 ...
Echarts关于雷达图的一些个性化设置
function test() { let myChart = echarts.init(document.getElementById('levelImage')); ...
echarts雷达图怎么给每个拐点设置不同的颜色
前言最近有这样的需求需要用到echarts的雷达图然后这不是主要的,因为基本的配置官网上都是有的,但是需求要求雷达图的每个拐点要有不同的颜色,这样比较有特色,我...最后在官网找了半天发现还是只 ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...

使用echarts实现雷达图

使用echarts实现雷达图相关推荐

最新文章

热门文章