Echarts-雷达图
// 显示能力雷达图
$(".company .grade").hover(function () {
$(".powerChart").show();
var id = $(this).attr("data-id");
var positionX = $(this).offset().left;
var positionY = $(this).offset().top;
$.ajax({
type: "POST",
cache: false,
url: "/Question/GetShopRadarMap",
data: {
shopId: id
},
contentType: "application/x-www-form-urlencoded",
dataType: "json",
async: false,
success: function (result) {
var myChart;
var domMain = document.getElementById('powerChart');
var option = {
tooltip: {
trigger: 'axis'
},
radar: {
name: {
textStyle: {
color: '#000'
}
},
indicator: [],//雷达图数据
nameGap:,//文字距离图形的距离
radius: //设置雷达图大小 },
series: []
}; var category = result.resultList;
var num = [];
for (var i = ; i < category.length; i++) {
option.radar.indicator.push({ name: category[i].CategoryName});
num.push(category[i].AnswerNum);
} option.series.push({
type: 'radar',
data: [{
value: num
}]
});
myChart = echarts.init(domMain);
myChart.setOption(option, true); }
});
$(".powerChart").css({ "left": positionX-, "top": positionY+ });// 定位雷达图显示的位置 },function() {
$(".powerChart").hide();
});
html:<div id="powerChart"></div>
css:#powerChart{width: 220px;height:180px;margin: 15px;}
Echarts-雷达图的更多相关文章
- echarts雷达图
用echarts展现雷达图的定制 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- echarts 雷达图的个性化设置
echarts 雷达图的个性化设置 function test() { let myChart = echarts.init(document.getElementById('levelImage') ...
- echarts雷达图点击事件
最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...
- echarts雷达图点击事件 包含(2.x,3.85,4.02)测试
最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...
- ECharts 雷达图怎么在类目值下面显示数值
需要实现的效果: 官网里面的demo显示数值,都是在拐点处: [解决] 1.只显示类目 <div id="mychart" style="width:300px;h ...
- ECharts雷达图详细配置说明
雷达图表配置说明: // 指定图表的配置项和数据 var option = { backgroundColor: 'rgba(204,204,204,0.7 )', // 背景色,默认无背景 rgba ...
- Echarts数据可视化series-radar雷达图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- echarts细节的修改(2):矩形数图,柱状图,折线图,雷达图等
1.矩形数图的配置,是直接拿饼图的配置 然后将type换成treemap. 修改类型 option.series.type = 'treemap'; 关闭面包屑导航 option.series.bre ...
- 关于echarts生成雷达图的一些参数介绍
export const industryFactorOption = { title: { text: '雷达图', textStyle: { color: 'rgba(221,221,221,1) ...
- 【带着canvas去流浪(6)】绘制雷达图
目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...
随机推荐
- iOS原生推送(APNS)进阶iOS10推送图片、视频、音乐
代码地址如下:http://www.demodashi.com/demo/13208.html 前言 我们首先要在AppDelegate里面进行iOS的适配,可以参考这篇文章 iOS原生推送(APNS ...
- Python MySQLdb 使用utf-8 编码插入中文数据
参考地址:http://blog.csdn.net/dkman803/article/details/1925326/ 本人在使用python,mysqldb操作数据库的时候,发现如下问题,编码如下: ...
- 轻量级代码生成器-OnlyCoder 第一篇
程序猿利器:代码生成器,使用代码生成器已经好几年了,增删改查各种生成,从UI到DATA层均生成过.之前有使用过动软的,T4模板等.... T4生成实体还是没有问题的,但是生成MVC视图就有点烦杂了, ...
- [Oracle] - Install Oracle12cR1 on Oracle Linux 6.5 in VirtualBox
My Oralce Linux 6.5 is running on VirtualBox. Basic settings is 4G memory, 50G hard-disk, auto parti ...
- html5_websocket_tomcat8
目录 前言 后端 浏览器前端 java的client 注意 前言 HTML5 WebSocket实现了服务器与浏览器的双向通讯,开销小,实时性高,常用于即时通讯和对信息实时性要求比较高的应用. 下面讲 ...
- 小程序图表功能wxchart实现
在开发小程序过程中,有项目用到图表功能, 其实Echart.js有小程序的库,我们要吧引入进来,然后配置初始化一下,就可以达到目的了.接下来就开始步骤吧 首先下载JS库:http://download ...
- IOS设计模式浅析之原型模式(Prototype)
原型模式的定义 “使用原型实例指定创建对象的种类,并通过复制这个原型创建新的对象”.最初的定义出现于<设计模式>(Addison-Wesley,1994). 简单来理解就是根据这个原型创建 ...
- D. Powerful array 离线+莫队算法 给定n个数,m次查询;每次查询[l,r]的权值; 权值计算方法:区间某个数x的个数cnt,那么贡献为cnt*cnt*x; 所有贡献和即为该区间的值;
D. Powerful array time limit per test seconds memory limit per test megabytes input standard input o ...
- 一个基于 EasyUI 的前台架构(3)封装操作Tabs的JS代码
一般来说,系统框架的主内容区会引入另一个独立的 Web 页面来实现系统的功能,所以在在 Tabs 里的每一个标签页里使用 iframe 标签来引入子页面.所以这里可以将 Tabs 的 Content ...
- MVVMLight-Mensenger 学习笔记
MVVMLight-Mensenger 最近一直在使用WPF,配合美工很容易能搭配出效果不错的UI来,开发效率也明显加快 自己也是最近才开始使用Mvvmlight,通过view和viewmodel分 ...