<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
/*******************
* * 1、在radar选项里面设置 通过 splitLine属性 => 坐标轴grid区域中的分割线
* * 2、在radar选项里面设置 通过 axisLine属性 => 坐标轴grid区域中的分割线
* * 3、在radar选项里面设置 通过 splitArea属性 => 坐标轴grid区域中的分割线
* * 4、在series 选项里面设置 通过 areaStyle属性 => 设置雷达图图圈颜色设置
* * 5、tooltip 在全局中带规则使用得到参数和series选项里使用得到的一致，
* * tooltip不带规则默认为ture，series里局部使用 必须先在options选项
* * 里先设置tooltip：{show：true}，否则失效
*************/
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option;
var maxdata = [{
text: 'Brand',
max: 100
},
{
text: 'Content',
max: 100
},
{
text: 'Usability',
max: 100
},
{
text: 'Function',
max: 100
},
{
text: 'sction',
max: 100
},
],
option = {
title: {
text: 'Multiple Radar'
},
// tooltip 不写参数 默认为true
tooltip: {
show: true,
formatter: '{a}{b}{c}'
},
radar: [{
// trgger:'item',
indicator: maxdata,
center: ['25%', '40%'],
radius: 80,
//坐标轴在 grid 区域中的分隔线
splitLine: {
show: false
},
//坐标轴轴线相关设置。
axisLine: {
show: false
},
//雷达图背景设置
splitArea: {
areaStyle: {
color: ['gray']
}
}
}],
series: [{
name: 'Brand',
type: 'radar',
areaStyle: {
color: 'red'
},
data: [{
value: [60, 73, 85, 40, 75],
name: '八月份数据'
}],
areaStyle: {
normal: {
opacity: 0.5, //背景透明
color: {
type: 'linear',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0,
color: 'red' // 0% 处的颜色
},
{
offset: 1,
color: 'blue' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
}
},
// tooltip: {
// formatter: '{a}{b}{c}'
// },
}],
};
option && myChart.setOption(option);
</script>
</body>
