echarts雷达图自定义射线颜色、边框效果和背景样式

1、在官网找样例

2、初步改造示例，有个雏形

3、细节改造和优化

4、全部代码

5、原始效果和完成效果对比

1、在官网找样例

样例地址：Examples - Apache ECharts

2、初步改造示例，有个雏形

对应的代码（为了说明问题，这里只简单列了option的相关代码）：

let demoOption = {radar: {center: ["50%", "56%"],indicator: [{ text: "语文", max: 150 },{ text: "数学", max: 150 },{ text: "英语", max: 150 },{ text: "物理", max: 120 },{ text: "化学", max: 108 },],},series: [{name: "成绩单",type: "radar",data: [{value: [100, 93, 123, 90, 70],label: {show: true,formatter: function (params) {return params.value;},},areaStyle: {color: new echarts.graphic.RadialGradient(0.1,0.6,1,[{color: "rgba(255, 145, 124, 0.1)",offset: 0,},{color: "rgba(255, 145, 124, 0.9)",offset: 1,},]),},},],},],};

得到的效果如下图：

3、细节改造和优化

通过对比效果图和初步示例，我们发现需要改造的点：

数据替换成展示数据
雷达图圈层减少为3层
射线颜色
雷达图区域背景颜色
雷达图边框颜色

根据这个思路我们就可以一点一点改造数据向着效果图靠拢，这里我就不一一去做代码对比了，很多要点我已经在代码中注释了。

4、全部代码

<template><div class="con_bg"><div class="radarChart" ref="radarChart"></div><!--echarts实例代码--><div class="radarChart" ref="radarChartDemo"></div></div>
</template>
<script>
import * as echarts from "echarts";var chart = "";
var chartDemo = "";
var funnelChart = "";
export default {name: "",data() {return {};},mounted() {this.showRadarChart();this.showRadarChartDemo();},methods: {showRadarChart() {if (chart != null && chart != "" && chart != undefined) {chart.dispose();}chart = echarts.init(this.$refs.radarChart);let option = {radar: {// shape: 'circle',center: ["50%", "56%"],splitNumber: 3, // 雷达图圈数设置name: {textStyle: {color: "#fff",fontSize: 10,fontWeight: "500",padding: 0,},},// 设置雷达图中间射线的颜色axisLine: {lineStyle: {color: "#013A3F",},},indicator: [{ name: "河道偷排", max: 150 },{ name: "工地扬尘", max: 72 },{ name: "废弃偷排", max: 130 },{ name: "违规堆数", max: 120 },{ name: "生态应急", max: 140 },],//雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景splitArea: {show: false,areaStyle: {color: "rgba(255,0,0,0)", // 图表背景的颜色},},splitLine: {show: true,lineStyle: {width: 1,color: "#013A3F", // 设置网格的颜色},},},series: [{name: "成绩单",type: "radar",data: [{value: [100, 47, 64, 98, 132],//symbol: "rect",symbolSize: 2,symbolColor: "#47EDFC",//symbol: "none", //去掉折线上的小圆点areaStyle: { color: "rgba(71,237,252,.3)" }, //雷达覆盖区域背景颜色lineStyle: {color: "#47EDFC",},// itemStyle: {//     color: "#47EDFC",// },label: {show: true,formatter: function (params) {return params.value;},},},],},],};chart.clear();chart.setOption(option);window.addEventListener("resize", () => {chart.resize();});},showRadarChartDemo() {if (chartDemo != null &&chartDemo != "" &&chartDemo != undefined) {chartDemo.dispose();}chartDemo = echarts.init(this.$refs.radarChartDemo);let demoOption = {radar: {center: ["50%", "56%"],indicator: [{ text: "语文", max: 150 },{ text: "数学", max: 150 },{ text: "英语", max: 150 },{ text: "物理", max: 120 },{ text: "化学", max: 108 },],},series: [{name: "成绩单",type: "radar",data: [{value: [100, 93, 123, 90, 70],label: {show: true,formatter: function (params) {return params.value;},},areaStyle: {color: new echarts.graphic.RadialGradient(0.1,0.6,1,[{color: "rgba(255, 145, 124, 0.1)",offset: 0,},{color: "rgba(255, 145, 124, 0.9)",offset: 1,},]),},},],},],};chartDemo.clear();chartDemo.setOption(demoOption);window.addEventListener("resize", () => {chartDemo.resize();});},},
};
</script>
<style scoped>
.con_bg {/* background-color: #010c17; */background-image: url("/img/bg.png");width: 490px;height: 490px;border-radius: 3px;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);
}
.radarChart {width: 424px;height: 152px;background-image: url("/img/ld.png");margin: 20px auto;
}
</style>

5、原始效果和完成效果对比

各种效果变化，你可以在实操中，慢慢体会。

echarts雷达图自定义射线颜色、边框效果和背景样式相关推荐

Echarts雷达图自定义样式
效果图: setLeiDaChart(){let myChart = this.$echarts.init(document.getElementById('andonType'));let opti ...
echarts漏斗图自定义漏斗颜色、粗细、大小、间隔缝隙
目录 1.官网找样例 2.初步改造示例,有个雏形 3.细节改造和优化 4.全部代码 5.原始效果和完成效果对比碎碎念: UI效果图是这样的看到之后我一脸懵,按照常规阶梯思路,我又开始了度娘之旅. ...
echarts 水球图自定义水球颜色
项目中有一个水球图表示电池电量的需求:电量20%以下时显示红色,20%-30%时显示为黄色,30%以上显示蓝色 var option = {series: [{type: 'liquidFill',d ...
echarts雷达图样式配置
雷达图背景颜色雷达图网格颜色 indicator文字颜色数据区域边框颜色雷达图内部射线颜色雷达图的圈数雷达图每圈具体数值的显示具体数值拐点样式 function getRadarChart ...
03 【eCharts样式定制系列】雷达图自定义面积覆盖颜色
描述在目前的项目中,根据UI设计稿需要实现一个带有大屏的系统首页,在此首页上要添加地图和一些eCharts图表.但是根据UI设计稿,如果要达到美观的目的,需要对eCharts进行定制.此次需要定制的 ...
echarts 雷达图一些自我总结
最近在使用echarts雷达图的时候有一些新得想分享一下,话不多说直接看代码 var option={//title: { text:null }, // 隐藏图表标题legend: {show: t ...
微信小程序使用echarts雷达图遇到的坑
最近一个医院的小程序需要使用雷达图来展示,简单总结一下. 1:使用场景:在详情页,根据测试的题目得分画成雷达图,测试的题目会得到2种结果,高危和低危.一种雷达图,但是样式不一样.如果是标题文字颜色不用 ...
echarts雷达图详细参数配置说明
应项目需求需要实现以下效果(当然也是最终的实现): 接下来主要关于下面的几个参数进行设置雷达图的圈数雷达图支持绘制的类型:圆形和多角形雷达图在容器中的位置:center决定也就是雷达图中心在容器 ...
Echarts雷达图的详细配置
写一个完整的雷达图需要注意那些,或者要修改那些?大约一共这些我将代码放下在官网可以自己根据备注自己调试 option = {backgroundColor:'#000',radar: {// sh ...

echarts雷达图自定义射线颜色、边框效果和背景样式

1、在官网找样例

2、初步改造示例，有个雏形

3、细节改造和优化

4、全部代码

5、原始效果和完成效果对比

echarts雷达图自定义射线颜色、边框效果和背景样式相关推荐

最新文章

热门文章