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>
代码解读：
- 动画展示：设置
animationDuration:2000；动画时间为2秒； - 极坐标系：
coordinateSystem: "polar"； - 坐标轴是否展示：设置径轴
radiusAxis和角轴angleAxis的show属性为false，则不展示，默认展示； - 数学公式转化：借助数学公式生成数据。以上用到的参数大家可以参考。
若想对图形进行改良，去掉坐标轴并将心形图案设置为粉红色，则参考之前的文章：vue引入Echarts画折线图、平滑曲线图、转化数学公式详解_Saga Two的博客-CSDN博客_vue 曲线图；
进一步处理我们的到的图形如下：
4 总结
极坐标系在日常运用中不是很广，但是在某些特殊场景以及数学建模中能起到意想不到的作用，学习此文，不仅能学习Echarts中极坐标系的基本运用，还能学习数学公式和Echarts图标的转化。进一步优化的情况下用于制作表白图形也不是不可，哈哈哈哈。