<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/echarts.min.js"></script>
</head>
<body>
<div id="a" style="width: 500px; height: 500px; background-color: #11234F;"></div>
</body>
<script>
var myChart = echarts.init(document.getElementById('a'))
option = {
title: {
text: "执法异常问题",
textStyle:{
color:'#fff'
}
},
tooltip: {},
radar: [{
//这是雷达图的大小
radius:'50%',
//图外名称
name:{
formatter:'{value}',
// 字体样式
textStyle:{
fontSize:14,
color:'#fff'
}
},
indicator: [{
name: "异常问题1",
max: 6500
}, {
name: "异常问题6",
max: 16000
}, {
name: "异常问题5",
max: 30000
}, {
name: "异常问题4",
max: 38000
}, {
name: "异常问题3",
max: 52000
}, {
name: "异常问题2",
max: 25000
}],
//文字与图的距离
nameGap: 20,
//坐标轴线的设置
axisLine: {
show: true,
lineStyle:{
color:'#FFF',
},
},
//指示器轴的分割段数
splitNumber: 5,
axisTick: {
color:'#365079',
},
axisLabel: {},
splitLine: {
lineStyle: {
shadowBlur: 15,
shadowColor: null
}
},
//分割区域是否显示
splitArea: {
//分割区域的样式
areaStyle:{
color: ['#fff', '#fff', '#fff', '#c3c3c3','#1F345E'],
shadowColor: 'rgba(0, 100, 0, 0.3)',
opacity: 0.2,
}
}
}],
series: [{
name: "执法异常问题",
type: "radar",
data: [{
value: [4300, 10000, 18000, 15000, 10000, 19990],
name: "执法异常问题",
itemStyle: { // 单个拐点标志的样式设置。
normal: {
borderColor: '#FFB9B0',
// 拐点的描边颜色。[ default: '#000' ]
borderWidth: 4,
// 拐点的描边宽度,默认不描边。[ default: 0 ]
}
},
lineStyle: { // 单项线条样式。
normal: {
opacity: 0.5 // 图形透明度
}
},
areaStyle: { // 单项区域填充样式
normal: {
// color: 'red', // 填充的颜色。[ default: "#000" ]
//不透明
opacity:1,
//数据阴影
shadowColor:'#2c3F56',
// 阴影长度
shadowBlur:3,
// 阴影偏移
shadowOffsetY:2,
shadowoffsetX:5,
//填充区域颜色渐变
color: new echarts.graphic.LinearGradient(
0, 0, 1, 1,
[
// 柱子0%的颜色
{offset: 0, color: '#7EEE5c'},
//柱子50%的颜色
{offset: 0.5, color: '#89EF54'},
//柱子100%的颜色
{offset: 1, color: '#CFF91E'}
]
)
}
}
}],
itemStyle: { // 折线拐点标志的样式。
normal: { // 普通状态时的样式
lineStyle: {
width:0
},
opacity: 0.3
},
emphasis: { // 高亮时的样式
lineStyle: {
},
opacity: 1
}
},
}]
}
myChart.setOption(option)
</script>
</html>