本章节介绍百度echarts 自定义雷达图，自定义雷达图可以根据我们的数据要求展现不同的雷达图
echarts 自定义雷达图实例
1，新建静态页面demo.html,并引入echarts的js库，在这里我们引入的是网络地址
<!-- V型知识库 www.vxzsk.com 原创--> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
2，雷达图容器html代码，只需一行html代码
<div id="container" style="height: 500px"></div>
雷达图容器高度为500px,宽度默认，并且div的id号为container。
3，javascript实现代码
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
app.title = 'v型知识库原创-www.vxzsk.com';
var option = null;
option = {
title: {
text: '自定义雷达图'
},
legend: {
data: ['图一','图二', '张三', '李四']
},
radar: [
{
indicator: [
{ text: '指标一' },
{ text: '指标二' },
{ text: '指标三' },
{ text: '指标四' },
{ text: '指标五' }
],
center: ['25%', '50%'],
radius: 120,
startAngle: 90,
splitNumber: 4,
shape: 'circle',
name: {
formatter:'【{value}】',
textStyle: {
color:'#72ACD1'
}
},
splitArea: {
areaStyle: {
color: ['rgba(114, 172, 209, 0.2)',
'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 10
}
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.5)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.5)'
}
}
},
{
indicator: [
{ text: '语文', max: 150 },
{ text: '数学', max: 150 },
{ text: '英语', max: 150 },
{ text: '物理', max: 120 },
{ text: '化学', max: 108 },
{ text: '生物', max: 72 }
],
center: ['75%', '50%'],
radius: 120
}
],
series: [
{
name: '雷达图',
type: 'radar',
itemStyle: {
emphasis: {
// color: 各异,
lineStyle: {
width: 4
}
}
},
data: [
{
value: [100, 8, 0.40, -80, 2000],
name: '图一',
symbol: 'rect',
symbolSize: 5,
lineStyle: {
normal: {
type: 'dashed'
}
}
},
{
value: [60, 5, 0.30, -100, 1500],
name: '图二',
areaStyle: {
normal: {
color: 'rgba(255, 255, 255, 0.5)'
}
}
}
]
},
{
name: '成绩单',
type: 'radar',
radarIndex: 1,
data: [
{
value: [120, 118, 130, 100, 99, 70],
name: '张三',
label: {
normal: {
show: true,
formatter:function(params) {
return params.value;
}
}
}
},
{
value: [90, 113, 140, 30, 70, 60],
name: '李四',
areaStyle: {
normal: {
opacity: 0.9,
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
color: '#B8D3E4',
offset: 0
},
{
color: '#72ACD1',
offset: 1
}
])
}
}
}
]
}
]
}
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>4，用浏览器打开demo.html，效果如下
5，自定义雷达图demo.html完整代码
<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<body >
<div id="container" style="height: 500px"></div>
<!-- V型知识库 www.vxzsk.com -->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
app.title = 'v型知识库原创-www.vxzsk.com';
var option = null;
option = {
title: {
text: '自定义雷达图'
},
legend: {
data: ['图一','图二', '张三', '李四']
},
radar: [
{
indicator: [
{ text: '指标一' },
{ text: '指标二' },
{ text: '指标三' },
{ text: '指标四' },
{ text: '指标五' }
],
center: ['25%', '50%'],
radius: 120,
startAngle: 90,
splitNumber: 4,
shape: 'circle',
name: {
formatter:'【{value}】',
textStyle: {
color:'#72ACD1'
}
},
splitArea: {
areaStyle: {
color: ['rgba(114, 172, 209, 0.2)',
'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 10
}
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.5)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.5)'
}
}
},
{
indicator: [
{ text: '语文', max: 150 },
{ text: '数学', max: 150 },
{ text: '英语', max: 150 },
{ text: '物理', max: 120 },
{ text: '化学', max: 108 },
{ text: '生物', max: 72 }
],
center: ['75%', '50%'],
radius: 120
}
],
series: [
{
name: '雷达图',
type: 'radar',
itemStyle: {
emphasis: {
// color: 各异,
lineStyle: {
width: 4
}
}
},
data: [
{
value: [100, 8, 0.40, -80, 2000],
name: '图一',
symbol: 'rect',
symbolSize: 5,
lineStyle: {
normal: {
type: 'dashed'
}
}
},
{
value: [60, 5, 0.30, -100, 1500],
name: '图二',
areaStyle: {
normal: {
color: 'rgba(255, 255, 255, 0.5)'
}
}
}
]
},
{
name: '成绩单',
type: 'radar',
radarIndex: 1,
data: [
{
value: [120, 118, 130, 100, 99, 70],
name: '张三',
label: {
normal: {
show: true,
formatter:function(params) {
return params.value;
}
}
}
},
{
value: [90, 113, 140, 30, 70, 60],
name: '李四',
areaStyle: {
normal: {
opacity: 0.9,
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
color: '#B8D3E4',
offset: 0
},
{
color: '#72ACD1',
offset: 1
}
])
}
}
}
]
}
]
}
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>把上述代码复制到一个静态HTML页面中即可实现。
此文章本站原创，地址 https://www.vxzsk.com/1152.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：10.7：es6 Null 传导运算符
下一篇：echarts 多雷达图实例
^