1 引入Echarts

1.1 安装

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

npm install echarts --save

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

1.2 引入

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

import * as echarts from "echarts";

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]
            ]
          }
        ]
      };

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

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

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

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

4 总结

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