效果图如下
实例代码
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="">http://libs.baidu.com/jquery/2.0.0/jquery.min.js">>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:495px; height:250px;margin: 100px auto;"></div>
<!-- ECharts单文件引入 -->
<script src="echarts-all.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var option = { //可以去官网上根据每个案例不同的option去写各种图形
title: { //标题
text: 'OP系统点击量'
},
tooltip: { //提示框，鼠标悬浮交互时的信息提示
show:true,
trigger: 'axis'
},
legend: { //图例，每个图表最多仅有一个图例
x: 'center',
data: ['ESOP系统', 'VGOP系统']
},
polar: [{ //极坐标
indicator: [{text: '计划部',max: 100},
{text: '市场部',max: 100},
{text: '政企客户部',max: 100},
{text: '客户服务部',max: 100},
{text: '铁通公司',max: 100},
{text: '其他',max: 100}
],
radius: 100,
startAngle: 120 // 改变雷达图的旋转度数
}],
series: [{ // 驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据
name: '总点击量',
type: 'radar',
itemStyle: {//图形样式，可设置图表内图形的默认样式和强调样式（悬浮时样式）：
normal: {
areaStyle: {
type: 'default'
}
}
},
data: [{
value: [], //外部加载，也可以通过ajax去加载外部数据。
name: ''
}, {
value: [78,98,90,94,98,37],
name: 'VGOP系统'
}]
}]
};
$(function() {
option.series[0].data[0].value=[12,32,34,53,53,65]; // 加载数据到data中
option.series[0].data[0].name ='ESOP系统';
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option, true); //为echarts对象加载数据
});
</script>
</body>