<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <title>第一個(gè) ECharts 實(shí)例</title>
? ? <!-- 引入 echarts.js -->
? ? <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
? ? <!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom -->
? ? <div id="main" style="width: 600px;height:400px;"></div>
? ? <script type="text/javascript">
? ? ? ? /*******************
? ? ? ? ?* * 1允华、在radar選項(xiàng)里面設(shè)置 ?通過 splitLine屬性 => 坐標(biāo)軸grid區(qū)域中的分割線
? ? ? ? ?* * 2、在radar選項(xiàng)里面設(shè)置 ?通過 axisLine屬性 => 坐標(biāo)軸grid區(qū)域中的分割線
? ? ? ? ?* * 3、在radar選項(xiàng)里面設(shè)置 ?通過 splitArea屬性 => 坐標(biāo)軸grid區(qū)域中的分割線
? ? ? ? ?* * 4、在series 選項(xiàng)里面設(shè)置 通過 areaStyle屬性 => 設(shè)置雷達(dá)圖圖圈顏色設(shè)置
? ? ? ? ?* * 5抄罕、tooltip 在全局中帶規(guī)則使用得到參數(shù)和series選項(xiàng)里使用得到的一致，
? ? ? ? ?* * ? ? tooltip不帶規(guī)則默認(rèn)為ture于颖，series里局部使用 必須先在options選項(xiàng)
? ? ? ? ?* * ? ? 里先設(shè)置tooltip：{show：true}呆贿，否則失效
? ? ? ? ?*************/
? // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
? ? ? ? var myChart = echarts.init(document.getElementById('main'));
? ? ? ? // 指定圖表的配置項(xiàng)和數(shù)據(jù)
? ? ? ? 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 不寫參數(shù) 默認(rèn)為true
? ? ? ? ? ? ? ? tooltip: {
? ? ? ? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? ? ? ? formatter: '{a}森渐{c}'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? radar: [{
? ? ? ? ? ? ? ? ? ? // trgger:'item',
? ? ? ? ? ? ? ? ? ? indicator: maxdata,
? ? ? ? ? ? ? ? ? ? center: ['25%', '40%'],
? ? ? ? ? ? ? ? ? ? radius: 80,
? ? ? ? ? ? ? ? ? ? //坐標(biāo)軸在 grid 區(qū)域中的分隔線
? ? ? ? ? ? ? ? ? ? splitLine: {
? ? ? ? ? ? ? ? ? ? ? ? show: false
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? //坐標(biāo)軸軸線相關(guān)設(shè)置做入。
? ? ? ? ? ? ? ? ? ? axisLine: {
? ? ? ? ? ? ? ? ? ? ? ? show: false
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? //雷達(dá)圖背景設(shè)置
? ? ? ? ? ? ? ? ? ? splitArea: {
? ? ? ? ? ? ? ? ? ? ? ? areaStyle: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? color: ['gray']
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? series: [{
? ? ? ? ? ? ? ? ? ? name: 'Brand',
? ? ? ? ? ? ? ? ? ? type: 'radar',
? ? ? ? ? ? ? ? ? ? areaStyle: {
? ? ? ? ? ? ? ? ? ? ? ? color: 'red'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? data: [{
? ? ? ? ? ? ? ? ? ? ? ? value: [60, 73, 85, 40, 75],
? ? ? ? ? ? ? ? ? ? ? ? name: '八月份數(shù)據(jù)'
? ? ? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? ? ? 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}{c}'
? ? ? ? ? ? ? ? // },
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? };
? ? ? ? option && myChart.setOption(option);
? ? </script>
</body>
