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和角轴angleAxisshow属性为false,则不展示,默认展示;
  4. 数学公式转化:借助数学公式生成数据。以上用到的参数大家可以参考。

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

进一步处理我们的到的图形如下:
在这里插入图片描述

4 总结

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

Logo

前往低代码交流专区

更多推荐