目录
样例地址：Examples - Apache ECharts
对应的代码（为了说明问题，这里只简单列了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,
},
]
),
},
},
],
},
],
};得到的效果如下图：
通过对比效果图和初步示例，我们发现需要改造的点：
根据这个思路我们就可以一点一点改造数据向着效果图靠拢，这里我就不一一去做代码对比了，很多要点我已经在代码中注释了。
<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>
各种效果变化，你可以在实操中，慢慢体会。