小程序中使用echarts实现带边框雷达图

小程序中怎么使用echarts的流程在这边文章,点击去观看

我们项目需要实现一个带边框的雷达图,看了API之后没有发现怎么去实现这个边框,所以想到了画两个雷达图来实现这个边框,具体效果如上,代码如下

cpp 复制代码
  // 初始化雷达图
  init() {
    let { optionsValue } = this.data;
    function bar(canvas, width, height, dpr) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr,
      });
      canvas.setChart(chart);
      let option = {
        title: {
          text: "自定义雷达图",
        },

        radar: [
          {
            indicator: [
              { text: "信任", max: 5 },
              { text: "冲突", max: 5 },
              { text: "承诺", max: 5 },
              { text: "责任", max: 5 },
              { text: "结果", max: 5 },
            ],
            center: ["50%", "50%"],
            radius: 110,
            startAngle: 90,
            splitNumber: 4,
            shape: "circle",
            name: {
              formatter: "{value}",
              textStyle: {
                color: "#333333",
              },
            },
            // 设置区域边框和区域的颜色
            itemStyle: {
              normal: {
                color: "#FF92AC",
                lineStyle: {
                  color: "#FF92AC",
                },
              },
            },
            splitArea: {
              areaStyle: {
                color: "#fff",
                shadowColor: "rgba(0, 0, 0, 0.3)",
                // shadowBlur: 10,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E9E9E9",
                type: "dashed",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#E9E9E9",
                type: "dashed",
              },
            },
          },
          {
            indicator: [
              {
                max: 100,
              },
              {
                max: 100,
              },
              {
                max: 100,
              },
              {
                max: 100,
              },
              {
                max: 100,
              },
            ],

            center: ["50%", "50%"],
            radius: 111,
            startAngle: 90,
            splitNumber: 1,
            shape: "circle",
            splitArea: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#FF92AC",
                type: "solid",
                width: 2,
              },
            },
          },
        ],
        series: [
          {
            name: "雷达图",
            type: "radar",
            silent: false,
            emphasis: {
              lineStyle: {
                width: 4,
              },
            },

            symbolSize: 0,

            data: [
              {
                value: optionsValue,
                name: "图一",
                symbol: "rect",
                areaStyle: {
                  color: "#FF92AC",
                },
                itemStyle: {
                  normal: {
                    color: "#FF92AC",
                    lineStyle: {
                      color: "#FF92AC",
                    },
                  },
                },
              },
            ],
          },
        ],
      };
      chart.setOption(option);
      return chart;
    }
    let str = "ec.onInit.br";
    let ec = { onInit: bar };
    this.setData({
      ec,
    });
  },

通过第二个雷达图跟第一个雷达图同心圆,半径比实际展示的大一点,splitNumber:1来实现一个只有外边框的雷达图

相关推荐
Nan_Shu_6141 小时前
Web前端面试题(2)
前端
知识分享小能手1 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
00后程序员张1 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
蚂蚁RichLab前端团队2 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光2 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5202 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
海绵宝宝不喜欢侬2 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
Days20503 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端3 小时前
vue2 常用内置指令总结
前端·vue.js