vue项目中，使用echarts完成极坐标 + 小图谱（附完整代码）

た入场券 2022-12-20 08:48 49阅读 0赞

**效果图展示：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

**思路描述：**

上面的图首先是由两部分完成的，底部是极坐标、上方是小图谱。具体里面的细节还是得仔细的看看文档

**代码展示：（ 附完整代码 ）**

【步骤一】：vue项目里面引入 echarts  。  npm install echarts --save

【步骤二】：下方代码是上方图谱的组件，数据是暂时写死的，后期可以从接口获取。

<template>
      
      <div style="width:100%;height:100%;position:relative;">
        <div
          id="echartGraphRadar"
          style="width: 100%;height: 100%;position:absolute;left:0;top:0;z-index:2"
        ></div>
        <div id="echartPolar" style="width: 100%;height: 100%;"></div>
      </div>
    </template>
    <script>
    let echarts = require("echarts/lib/echarts"); // 引入基本模板
    require("echarts/lib/component/tooltip"); // 引入提示框
    require("echarts/lib/component/title"); // title组件
    export default {
      data() {
        return {
          msg: "",
        };
      },
      mounted() {
        let _this = this;
        _this.drawLine();
        _this.drawFn();
      },
      methods: {
        //
        drawLine() {
          let eChart = echarts.init(document.getElementById("echartGraphRadar")); // 基于准备好的dom，初始化echarts实例
          this.eChart = eChart;
          var size = 60,
            size1 = 50,
            yy = 200,
            yy1 = 250;
          eChart.setOption({
            title: {
              text: "",
              top: "top",
              left: "left",
              textStyle: {
                color: "#f7f7f7",
              },
            },
            tooltip: {
              formatter: "{b}",
            },
            toolbox: {
              show: true,
              feature: {
                restore: {
                  show: true,
                },
                saveAsImage: {
                  show: true,
                },
              },
            },
            // backgroundColor: "#337ab7",
            animationDuration: 1000,
            animationEasingUpdate: "quinticInOut",
            series: [
              {
                name: "知识体系",
                type: "graph",
                layout: "force",
                force: {
                  repulsion: 80,
                  gravity: 0.1,
                  edgeLength: 30,
                  layoutAnimation: true,
                },
                draggable: false,
                data: [
                  {
                    name: "138000000", // 图谱名称
                    x: 0,
                    y: yy,
                    symbolSize: 100, // 节点大小
                    category: "BigData", // 数据项所在类目的 index。
                    itemStyle:{
                      color:'#eaf6fd',
                      borderColor:'#7dbff9'
                    },
                    label:{
                      color:'#323232',
                      fontWeight:'normal'
                    },
                    emphasis:{
                      itemStyle:{
                        color:'#eaf6fd',
                        borderColor:'#7dbff9'
                      },
                      label:{
                        color:'#323232'
                      },
                    }
                  },
                  {
                    name: "话费",
                    x: 10,
                    y: yy1,
                    symbolSize: size,
                    category: "话费",
                    itemStyle:{
                      color:'#fdf6e8',
                      borderColor:'#f6cb8e'
                    },
                    label:{
                      color:'#595959',
                      fontWeight:'normal'
                    },
                    emphasis:{
                      itemStyle:{
                        color:'#fdf6e8',
                        borderColor:'#f6cb8e'
                      },
                      label:{
                        color:'#595959',
                        fontWeight:'normal'
                      },
                    }
                  },
                  {
                    name: "网络",
                    x: 10,
                    y: yy1,
                    symbolSize: size,
                    category: "网络",
                    itemStyle:{
                      color:'#fdf6e8',
                      borderColor:'#f6cb8e'
                    },
                    label:{
                      color:'#595959',
                      fontWeight:'normal'
                    },
                    emphasis:{
                      itemStyle:{
                        color:'#fdf6e8',
                        borderColor:'#f6cb8e'
                      },
                      label:{
                        color:'#595959',
                        fontWeight:'normal'
                      },
                    }
                  },
                  {
                    name: "宽带",
                    x: 10,
                    y: yy1,
                    symbolSize: size,
                    category: "宽带",
                    itemStyle:{
                      color:'#fdf6e8',
                      borderColor:'#f6cb8e'
                    },
                    label:{
                      color:'#595959',
                      fontWeight:'normal'
                    },
                    emphasis:{
                      itemStyle:{
                        color:'#fdf6e8',
                        borderColor:'#f6cb8e'
                      },
                      label:{
                        color:'#595959',
                        fontWeight:'normal'
                      },
                    }
                  },
                  {
                    x: 210,
                    y: yy1,
                    name: "宽带投诉3",
                    symbolSize: size,
                    category: "宽带",
                    itemStyle:{
                      color:'#ebfdfa',
                      borderColor:'#82dad3'
                    },
                    label:{
                      color:'#595959',
                      fontWeight:'normal'
                    },
                    emphasis:{
                      itemStyle:{
                        color:'#ebfdfa',
                        borderColor:'#82dad3'
                      },
                      label:{
                        color:'#595959',
                        fontWeight:'normal'
                      },
                    }
                  },
                  {
                    x: 220,
                    y: yy,
                    name: "宽带投诉2",
                    symbolSize: size1,
                    category: "宽带",
                    itemStyle:{
                      color:'#ebfdfa',
                      borderColor:'#82dad3'
                    },
                    label:{
                      color:'#595959',
                      fontWeight:'normal'
                    },
                    emphasis:{
                      itemStyle:{
                        color:'#ebfdfa',
                        borderColor:'#82dad3'
                      },
                      label:{
                        color:'#595959',
                        fontWeight:'normal'
                      },
                    }
                  },
                  {
                    x: 230,
                    y: yy1,
                    name: "宽带投诉1",
                    symbolSize: size1,
                    category: "宽带",
                    itemStyle:{
                      color:'#ebfdfa',
                      borderColor:'#82dad3'
                    },
                    label:{
                      color:'#595959',
                      fontWeight:'normal'
                    },
                    emphasis:{
                      itemStyle:{
                        color:'#ebfdfa',
                        borderColor:'#82dad3'
                      },
                      label:{
                        color:'#595959',
                        fontWeight:'normal'
                      },
                    }
                  },
                  {
                    x: 240,
                    y: yy,
                    name: "网络投诉3",
                    symbolSize: size1,
                    category: "网络",
                    itemStyle:{
                      color:'#ebfdfa',
                      borderColor:'#82dad3'
                    },
                    label:{
                      color:'#595959',
                      fontWeight:'normal'
                    },
                    emphasis:{
                      itemStyle:{
                        color:'#ebfdfa',
                        borderColor:'#82dad3'
                      },
                      label:{
                        color:'#595959',
                        fontWeight:'normal'
                      },
                    }
                  },
                  {
                    x: 250,
                    y: yy1,
                    name: "网络投诉2",
                    symbolSize: size1,
                    category: "网络",
                    itemStyle:{
                      color:'#ebfdfa',
                      borderColor:'#82dad3'
                    },
                    label:{
                      color:'#595959',
                      fontWeight:'normal'
                    },
                    emphasis:{
                      itemStyle:{
                        color:'#ebfdfa',
                        borderColor:'#82dad3'
                      },
                      label:{
                        color:'#595959',
                        fontWeight:'normal'
                      },
                    }
                  },
                  {
                    x: 260,
                    y: yy1,
                    name: "网络投诉1",
                    symbolSize: size1,
                    category: "网络",
                    itemStyle:{
                      color:'#ebfdfa',
                      borderColor:'#82dad3'
                    },
                    label:{
                      color:'#595959',
                      fontWeight:'normal'
                    },
                    emphasis:{
                      itemStyle:{
                        color:'#ebfdfa',
                        borderColor:'#82dad3'
                      },
                      label:{
                        color:'#595959',
                        fontWeight:'normal'
                      },
                    }
                  },
                  {
                    x: 300,
                    y: yy,
                    name: "话费原因3",
                    symbolSize: size1,
                    category: "话费",
                    itemStyle:{
                      color:'#ebfdfa',
                      borderColor:'#82dad3'
                    },
                    label:{
                      color:'#595959',
                      fontWeight:'normal'
                    },
                    emphasis:{
                      itemStyle:{
                        color:'#ebfdfa',
                        borderColor:'#82dad3'
                      },
                      label:{
                        color:'#595959',
                        fontWeight:'normal'
                      },
                    }
                  },
                  {
                    x: 310,
                    y: yy1,
                    name: "话费原因2",
                    symbolSize: size1,
                    category: "话费",
                    itemStyle:{
                      color:'#ebfdfa',
                      borderColor:'#82dad3'
                    },
                    label:{
                      color:'#595959',
                      fontWeight:'normal'
                    },
                    emphasis:{
                      itemStyle:{
                        color:'#ebfdfa',
                        borderColor:'#82dad3'
                      },
                      label:{
                        color:'#595959',
                        fontWeight:'normal'
                      },
                    }
                  },
                  {
                    x: 320,
                    y: yy,
                    name: "话费原因1", // 图谱圆圈内容
                    symbolSize: size1,
                    category: "话费",
                    itemStyle:{
                      color:'#ebfdfa',
                      borderColor:'#82dad3'
                    },
                    label:{
                      color:'#595959',
                      fontWeight:'normal'
                    },
                    emphasis:{
                      itemStyle:{
                        color:'#ebfdfa',
                        borderColor:'#82dad3'
                      },
                      label:{
                        color:'#595959',
                        fontWeight:'normal'
                      },
                    }
                  },
                ],
                links: [
                  {
                    source: "138000000",
                    target: "话费",
                  },
                  {
                    source: "138000000",
                    target: "网络",
                  },
                  {
                    source: "138000000",
                    target: "宽带",
                  },
                  {
                    source: "话费",
                    target: "话费原因1",
                  },
                  {
                    source: "话费",
                    target: "话费原因2",
                  },
                  {
                    source: "话费",
                    target: "话费原因3",
                  },
                  {
                    source: "网络",
                    target: "网络投诉1",
                  },
                  {
                    source: "网络",
                    target: "网络投诉2",
                  },
                  {
                    source: "网络",
                    target: "网络投诉3",
                  },
                  {
                    source: "宽带",
                    target: "宽带投诉1",
                  },
                  {
                    source: "宽带",
                    target: "宽带投诉2",
                  },
                  {
                    source: "宽带",
                    target: "宽带投诉3",
                  },
                ],
                categories: [
                  // 节点分类的类目
                  {
                    name: "138000000",
                  },
                  {
                    name: "话费",
                  },
                  {
                    name: "宽带",
                  },
                  {
                    name: "网络",
                  },
                ],
                roam: false,
                label: {
                  normal: {
                    show: true,
                    position: "inside",
                    formatter: "{b}",
                    fontSize: 12,
                    fontStyle: "600",
                  },
                },
                lineStyle: {
                  normal: {
                    width: 2,
                    color: "#bcdffc",
                    curveness: 0,
                    type: "dotted",
                  },
                },
              },
            ],
          });
        },
        // 极坐标下的
        drawFn() {
          let eChart = echarts.init(document.getElementById("echartPolar")); // 基于准备好的dom，初始化echarts实例
          eChart.setOption({
            polar: {},
            angleAxis: {   // 
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#cbe6fd",
                  type: "dashed",
                },
              },
              min: 0, // 坐标轴刻度最小值
              max: 360, // 最大值
              interval: 0, // 强制设置坐标轴分割间隔
              startAngle: 0, // 起始刻度的角度
              axisTick: {
                show: false,
                inside: true,
              },
              axisLine:{
                show:false
              },
              axisTick:{
                show:false
              },
              axisLabel:{
                show:false
              }
            },
            radiusAxis: {  // 极坐标系的径向轴
              min: 0,
              max: 10,
              interval: 2,
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['#f2f9fe',"#dbeefd",'#dceffd',"#e1f1fe",'#ebf6fe'],
                  type: "solid",
                },
              },
              axisLine:{   // 坐标轴轴线相关设置
                show:false
              },
              axisTick:{  // 坐标轴刻度相关设置
                show:false
              },
              axisLabel:{   // 坐标轴刻度标签的相关设置
                show:false
              },
            },
            series: [],
          });
        },
      },
    };
    </script>

\----完。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: /images/20221120/c5781445409c44218d8eaad79367051b.png