vue使用echarts绘制雷达，极坐标图表

1、首先创建一个div存放绘制好的图表，命名其id，否则docment会捕捉不到该div，设置长宽
实例如下：
div
id=“myEchart”
style=“width: 100%; height: 100%;”
div
2、引入echarts，首先安装 npm i echarts
组件中引入import * as echarts from “echarts”;
3、创建函数
雷达图设置：
const option = {
// title: {
// text: “测试结果”,
// link: “https://www.baidu.com”,
// target: “blank”,
// textAlign: “left”,
// },
tooltip: {}, //提示层
// legend: {
// data: [“name1”],
// },
radar: {
name: {
textStyle: {
color: “#fff”, //字体颜色
backgroundColor: “#999”, //背景色
borderRadius: 3, //圆角
padding: [3, 5], //padding
},
},
center: [“50%”, “50%”],
radius: “65%”,
startAngle: 270,
indicator: [
{
name: “符检查”,
max: 100,
},
{
name: “表检查”,
max: 100,
},
{
name: “接检查”,
max: 100,
},
{
name: “保检查”,
max: 100,
},
{
name: “定检查”,
max: 100,
},
{
name: “现检查”,
max: 100,
},
],//评估方向
},
series: [
{
name: “测试标题名字”,
type: “radar”,
data: [
{
value: [80, 70,50, 90, 70, 60],
name: “测试结果”,
},
],
},
],
};
const myChart = echarts.init(document.getElementById(“myEchart”));//document捕捉id元素
myChart.setOption(option);
window.addEventListener(“resize”, () => {
myChart.resize();
});
},
注意：当如果图显示不出来，调试检查是否正确引入echarts或者是否正确捕捉到id元素。结果如下。极坐标图类似方式，只是option的设置内容不同，可以百度查询调试