【无标题】

1 引入Echarts

1.1 安装

使用如下命令通过 npm 安装 ECharts

npm install echarts --save
1

注：本文安装Echarts版本为：“echarts”: “5.2.1”

1.2 引入

安装完成以后，可以将echarts全部引入，这样一来，我们可以在该页面使用echarts所有组件；引入代码如下：

import * as echarts from "echarts";
1

1.3 基本使用

vue+Echarts基本使用请见：在Vue项目中引入 ECharts

2 极坐标系图形

2.1 极坐标介绍

极坐标系（polar coordinates）是指在平面内由极点、极轴和极径组成的坐标系。在平面上取定一点O，称为极点。从O出发引一条射线Ox，称为极轴。再取定一个单位长度，通常规定角度取逆时针方向为正。这样，平面上任一点P的位置就可以用线段OP的长度ρ以及从Ox到OP的角度θ来确定，有序数对（ρ，θ）就称为P点的极坐标，记为P（ρ，θ）；ρ称为P点的极径，θ称为P点的极角。

当限制ρ≥0，0≤θ<2π时，平面上有些曲线，采用极坐标时，方程比较简单。例如以原点为中心，r为半径的圆的极坐标方程为ρ=r

2.2 Echarts中使用极坐标系

Echarts中使用极坐标系的方法是将series中的坐标系属性coordinateSystem设置为polar，通常应用于散点点图和折线图。以下我们重点介绍在散点图和折线图中使用极坐标系。

在使用极坐标系的同时，我们通常需要配置以下三个对象属性：

• polar：控制极坐标系位置，层次、大小；
• radiusAxis：极坐标极径轴相关配置；
• angleAxis：极坐标系的角度轴相关配置；

2.3 极坐标系基本使用

我们使用官网的基本配置，绘制极坐标系下的散点图，如图所示的散点图极坐标系下的散点图：

代码如下：

	option = {
        title: {
          text: "polar scatter"
        },
        legend: {
          data: ["data label"],
          left: "right"
        },
        polar: {},
        // 角度轴设置
        angleAxis: {
          type: "category",
          data: [
            "12a",
            "1a",
            "2a",
            "3a",
            "4a",
            "5a",
            "6a",
            "7a",
            "8a",
            "9a",
            "10a",
            "11a",
            "12p",
            "1p",
            "2p",
            "3p",
            "4p",
            "5p",
            "6p",
            "7p",
            "8p",
            "9p",
            "10p",
            "11p"
          ],
          boundaryGap: false,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#999",
              type: "dashed"
            }
          },
          axisLine: {
            show: false
          }
        },
        // 极径轴设置
        radiusAxis: {
          type: "category",
          data: [
            "Saturday",
            "Friday",
            "Thursday",
            "Wednesday",
            "Tuesday",
            "Monday",
            "Sunday"
          ],
          axisLine: {
            show: false
          },
          axisLabel: {
            rotate: 45
          }
        },
        series: [
          {
            name: "data label",
            type: "scatter",
            coordinateSystem: "polar", //坐标系旋转极坐标系
            symbolSize: function(val) {
              return val[2] * 2;
            },
            data: [
              [0, 0, 5],
              [0, 1, 1],
              [0, 2, 0],
              [0, 3, 0],
              [0, 14, 1],
              [0, 15, 3],
              [0, 16, 4],
              [0, 17, 6],
              [0, 18, 4],
              [0, 19, 4],
              [0, 20, 3],
              [0, 21, 3],
              [0, 22, 2],
              [0, 23, 5],
              [1, 0, 7],
              [1, 1, 0],
              [1, 2, 0],
              [1, 3, 0],
              [1, 9, 0],
              [1, 10, 5],
              [1, 11, 2],
              [1, 12, 2],
              [1, 13, 6],
              [1, 22, 7],
              [1, 23, 2],
              [2, 0, 1],
              [2, 1, 1],
              [2, 2, 0],
              [2, 3, 0],
              [2, 4, 0],
              [2, 5, 0],
              [2, 6, 0],
              [2, 19, 5],
              [2, 20, 7],
              [2, 21, 4],
              [2, 22, 2],
              [3, 8, 1],
              [3, 9, 0],
              [3, 10, 5],
              [3, 11, 4],
              [3, 12, 7],
              [3, 13, 14],
              [3, 14, 13],
              [4, 16, 12],
              [4, 17, 1],
              [4, 18, 8],
              [4, 19, 5],
              [4, 20, 3],
              [4, 21, 7],
              [4, 22, 3],
              [4, 23, 0],
              [5, 14, 5],
              [5, 15, 7],
              [5, 16, 11],
              [5, 17, 6],
              [5, 18, 0],
              [5, 19, 5],
              [5, 20, 3],
              [5, 21, 4],
              [6, 2, 0],
              [6, 3, 0],
              [6, 4, 0],
              [6, 5, 0],
              [6, 6, 0],
              [6, 7, 0],
              [6, 8, 0]
            ]
          }
        ]
      };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

最重要的就是以上介绍的三个属性，下面我们实战一下

3 极坐标方程转化展示

通常情况下我们极坐标应用于数学领域，用来绘制极坐标方程。其实最开始研究Echarts上展示极坐标系方程，就是为了研究数学上的心形图案，数学充满了几何美与浪漫，数学家将浪漫隐藏在数学公式里。

心形公式为：r=a(1-sinθ)

使用Echarts绘制效果如图所示：

以上示例完整vue代码如下：

<template>
  <div class="echart" id="mychart" style="width:100%; height: 400px;"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      const option = {
        polar: {
          center: ["50%", "54%"]
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          }
        },
        angleAxis: {
          // show: false,
          type: "value",
          startAngle: 0,
          clockwise: false //刻度增长逆时针
        },
        radiusAxis: {
          // show: false,
          min: 0
        },
        animationDuration: 2000,
        series: [
          {
            coordinateSystem: "polar",
            name: "line",
            type: "line",
            showSymbol: false,
            data: this.generateData()
          }
        ]
      };

      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    generateData() {
      const data = [];
      for (let i = 0; i <= 360; i++) {
        data.push([this.func(i), i]);
      }
      return data;
    },
    // 数学函数
    func(x) {
      return 10 * (1 - Math.sin((Math.PI / 180) * x));
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

代码解读：

1. 动画展示：设置animationDuration: 2000；动画时间为2秒；
2. 极坐标系：coordinateSystem: "polar"；
3. 坐标轴是否展示：设置径轴radiusAxis和角轴angleAxis的show属性为false，则不展示，默认展示；
4. 数学公式转化：借助数学公式生成数据。以上用到的参数大家可以参考。

若想对图形进行改良，去掉坐标轴并将心形图案设置为粉红色，则参考之前的文章：vue引入Echarts画折线图、平滑曲线图、转化数学公式详解_Saga Two的博客-CSDN博客_vue 曲线图；

进一步处理我们的到的图形如下：

4 总结

极坐标系在日常运用中不是很广，但是在某些特殊场景以及数学建模中能起到意想不到的作用，学习此文，不仅能学习Echarts中极坐标系的基本运用，还能学习数学公式和Echarts图标的转化。进一步优化的情况下用于制作表白图形也不是不可，哈哈哈哈。