echarts----雷达图

实现步骤：

* 寻找官方的类似示例，给予分析，并引入到HTML页面中
* 按照需求来定制它

第一步：参考类似实例

(function() {// 1. 实例化对象var myChart = echarts.init(document.querySelector(".radar"));// 2.指定配置var dataBJ = [[55, 9, 56, 0.46, 18, 6, 1]];var lineStyle = {normal: {width: 1,opacity: 0.5}};var option = {backgroundColor: "#161627",radar: {indicator: [{ name: "AQI", max: 300 },{ name: "PM2.5", max: 250 },{ name: "PM10", max: 300 },{ name: "CO", max: 5 },{ name: "NO2", max: 200 },{ name: "SO2", max: 100 }],shape: "circle",splitNumber: 5,name: {textStyle: {color: "rgb(238, 197, 102)"}},splitLine: {lineStyle: {color: ["rgba(238, 197, 102, 0.1)","rgba(238, 197, 102, 0.2)","rgba(238, 197, 102, 0.4)","rgba(238, 197, 102, 0.6)","rgba(238, 197, 102, 0.8)","rgba(238, 197, 102, 1)"].reverse()}},splitArea: {show: false},axisLine: {lineStyle: {color: "rgba(238, 197, 102, 0.5)"}}},series: [{name: "北京",type: "radar",lineStyle: lineStyle,data: dataBJ,symbol: "none",itemStyle: {color: "#F9713C"},areaStyle: {opacity: 0.1}}]};// 3.把配置和数据给对象myChart.setOption(option);
})();

第二步：按照需求来定制它

需求1：去掉背景颜色，调整雷达图大小 65%

radar:{center: ['50%', '50%'],// 外半径占据容器大小radius: '65%',
}

需求2：指示器轴的分割段数为4条（4个圆圈）

radar:{center: ['50%', '50%'],// 外半径占据容器大小radius: '65%',// 指示器轴的分割段数splitNumber: 4,
}

需求3：雷达图分割线设为白色半透明 0.5

 // 坐标轴在 grid 区域中的分隔线（圆圈）splitLine: {lineStyle: {color: 'rgba(255, 255, 255, 0.5)',// width: 2,// type: 'dashed'}},

需求4：雷达图坐标轴轴线相关设置(竖线) axisLine

// 坐标轴轴线相关设置(竖线)axisLine（中心散发的内六条线）
axisLine: {show: true,lineStyle: {color: 'rgba(255, 255, 255, 0.5)'// width: 1,// type: 'solid'}
},

需求5：修饰雷达图文字颜色为 #4c9bfd

name: {// 修饰雷达图文本颜色textStyle: {color: '#4c9bfd'}
},

需求6：修饰区域填充样式 series 对象

区域填充的背景颜色设置为： rgba(238, 197, 102, 0.6)---数据围成的图形填充

 areaStyle: {color: 'rgba(238, 197, 102, 0.6)',
},

区域填充的线条颜色为白色----数据围成的线条颜色填充

// 线条样式lineStyle: {normal: {color: '#fff',// width: 1}
},

需求7：标记的图形(拐点）设置注意 series 里面设置

* 用圆点显示，拐点的大小设置为 5
* 小圆点设置为白色
* 在小圆点上显示相关数据，颜色设置为白色，10像素

// symbol 标记的样式(拐点），还可以取值'rect' 方块 ,'arrow' 三角等
symbol: 'circle',
// 拐点的大小
symbolSize: 5,
// 小圆点（拐点）设置为白色
itemStyle: {color: '#fff'
},
// 在圆点上显示相关数据
label: {show: true,color: '#fff',fontSize: 10
},

需求8：鼠标经过显示提示框组件

tooltip: {show: true,// 控制提示框组件的显示位置position: ['60%', '10%'],
},

需求9：更换数据

 // 雷达图的指示器 内部填充数据indicator: [{ name: '机场', max: 100 },{ name: '商场', max: 100 },{ name: '火车站', max: 100 },{ name: '汽车站', max: 100 },{ name: '地铁', max: 100 }],

data: [[90, 19, 56, 11, 34]],

html 整个代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title>
</head><body><div class="radar" style="width: 40%; height: 300px"></div><script src="./js/echarts.js"></script><script>// 销售渠道模块 雷达图(function () {// 1. 实例化对象var myChart = echarts.init(document.querySelector(".radar"));// 2.指定配置var option = {backgroundColor: "#161627",tooltip: {show: true,// 控制提示框组件的显示位置position: ["60%", "10%"]},radar: {indicator: [{ name: "机场", max: 100 },{ name: "商场", max: 100 },{ name: "火车站", max: 100 },{ name: "汽车站", max: 100 },{ name: "地铁", max: 100 }],// 修改雷达图的大小radius: "65%",shape: "circle",// 分割的圆圈个数splitNumber: 4,name: {// 修饰雷达图文字的颜色textStyle: {color: "#4c9bfd"}},// 分割的圆圈线条的样式splitLine: {lineStyle: {color: "rgba(255,255,255, 0.5)"}},splitArea: {show: false},// 坐标轴的线修改为白色半透明axisLine: {lineStyle: {color: "rgba(255, 255, 255, 0.5)"}}},series: [{name: "北京",type: "radar",// 填充区域的线条颜色lineStyle: {normal: {color: "#fff",width: 1,opacity: 0.5}},data: [[90, 19, 56, 11, 34]],// 设置图形标记 （拐点）symbol: "circle",// 这个是设置小圆点大小symbolSize: 5,// 设置小圆点颜色itemStyle: {color: "#fff"},// 让小圆点显示数据label: {show: true,fontSize: 10},// 修饰我们区域填充的背景颜色areaStyle: {color: "rgba(238, 197, 102, 0.6)"}}]};// 3.把配置和数据给对象myChart.setOption(option);// 当我们浏览器缩放的时候，图表也等比例缩放window.addEventListener("resize", function () {// 让我们的图表调用 resize这个方法myChart.resize();});})();</script>
</body></html>

echarts----雷达图相关推荐

在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
echarts雷达图详细参数配置说明
应项目需求需要实现以下效果(当然也是最终的实现): 接下来主要关于下面的几个参数进行设置雷达图的圈数雷达图支持绘制的类型:圆形和多角形雷达图在容器中的位置:center决定也就是雷达图中心在容器 ...
echarts 雷达图一些自我总结
最近在使用echarts雷达图的时候有一些新得想分享一下,话不多说直接看代码 var option={//title: { text:null }, // 隐藏图表标题legend: {show: t ...
echarts 雷达图_如何把Echarts用成在线数据可视化工具
今天虎哥给大家介绍个新工具,用于数据可视化,它是一个开源的插件,由JavaScript编写并实现的.可以流畅的运行在PC端和移动端,兼容绝大部分浏览器.Echarts具有强大的交互性,官网: http ...
ECharts 雷达图在类目值下面显示数值
需要实现的效果: 官网里面的demo显示数值,都是在拐点处: [解决] 1.只显示类目 <div id="mychart" style="width:300px;h ...
echarts 雷达图_【带着canvas去流浪】绘制雷达图
使用原生canvasAPI绘制雷达图.(截图以及数据来自于百度Echarts官方示例库[查看示例链接]). 二. 重点提示雷达图绘制的看起来并不复杂,无非就是一些路径点的连线,其中的难点都在于一些细 ...
echarts 雷达图
1.配置数据(1)配置各个边角极限值var dataMax=[{name:'名称',max:最大值, color:'标签颜色'}](2)配置展示数据var radaData=[{name:'数据名称' ...
设置echarts雷达图label标签出现的位置聚拢或发散
目标效果: 用echarts画出雷达图后出现这样的情况在官网上label标签的 position属性只支持:top / left / right / bottom / inside / inside ...
微信小程序使用echarts雷达图遇到的坑
最近一个医院的小程序需要使用雷达图来展示,简单总结一下. 1:使用场景:在详情页,根据测试的题目得分画成雷达图,测试的题目会得到2种结果,高危和低危.一种雷达图,但是样式不一样.如果是标题文字颜色不用 ...
echarts雷达图样式配置
雷达图背景颜色雷达图网格颜色 indicator文字颜色数据区域边框颜色雷达图内部射线颜色雷达图的圈数雷达图每圈具体数值的显示具体数值拐点样式 function getRadarChart ...

echarts----雷达图

echarts----雷达图相关推荐

最新文章

热门文章