<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>能力统计</title>
</head>
<body>
<div id="chart1" style="width:600px; height: 800px;"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript">
//指定图标的配置和数据
var option = {
title: {
text: '雷达图'
},
tooltip: {},
legend: {
data: ['能力值']
},
radar: {
name: {
textStyle: {
color: 'black',
backgroundColor:'yellow',
borderRadius: 3,
padding: [3, 5]
}
},
indicator: [
{name: '文化', max: 100},
{name: '生活', max: 100},
{name: '娱乐', max: 100},
{name: '流行', max: 100},
{name: '科学', max: 100}
]
},
series: [{
name: '能力',
type: 'radar',
areaStyle: {normal: {}},
data: [
{name: "能力值", value: [80, 90, 94, 85, 88]}
]
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chart1'));
//使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
ECharts绘制雷达图
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力...
- 一、Echarts 按需加载 有两种方式可以实现按需加载。第一种: 专门设置一个echarts配置文件 需要引入什...
- 自己把自己坑了 公司需求的时候,做了一种线形图,根据数值的大小,变换颜色。示例图如下: 产品经理问我,可以不可以做...