小程序使用echarts图表-雷达图

本文介绍下小程序中如何使用echarts

如果是通过npm安装,这样是全部安装的,体积有点大

我这边是使用echarts中的一个组件来实现的,下边是具体流程,实际效果是没有外边的红色边框的,加红色边框的效果是这篇说明

1.echarts光网有提到一个小程序组件 echarts-for-weixin点击下载这个组件,下载到本地,注意要下载的echarts-for-weixin版本号

2.然后去echarts官网去下载在线定制版本

3.下载成功

4.打开下载的文件,找到 echarts.min.js

5.在自己项目里边建一个组件,把上边下载的echarts目录放进去,然后将echarts.min.js 替换掉之前的echarts.js 文件,替换完成之后需要改变一下ec-canvas.js 里边的引入路径,如图红色框的位置

6.使用,首先在你使用的地方引入这个组件,


7.初始化雷达图

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",
              },
            },
          }
        ],
        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,
    });
  },

不要忘了设置雷达图的宽高

cpp 复制代码
    .ec-box {
      width: 100%;
      height: 600rpx;
      .canvas {
        width: 260rpx;
        height: 260rpx;
      }
    }

以上就是小程序中使用雷达图的流程,使用其他折线图、柱状图的原理一样

相关推荐
前端大卫8 分钟前
一个关于时区的线上问题
前端·javascript·vue.js
whltaoin37 分钟前
中秋赏月互动页面:用前端技术演绎传统节日之美
前端·javascript·html·css3·中秋主题前端
IT派同学1 小时前
TableWiz诞生记:一个被表格合并逼疯的程序员如何自救
前端·vue.js
云起SAAS3 小时前
SCL-90症状自评量表抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·scl-90症状自评量表·scl-90
西洼工作室3 小时前
CSS高效开发三大方向
前端·css
昔人'3 小时前
css`font-variant-numeric: tabular-nums` 用来控制数字的样式。
前端·css
铅笔侠_小龙虾4 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js
LoveEate4 小时前
uniapp 运行/发版微信小程序
微信小程序·小程序·uni-app
韩立学长5 小时前
【开题答辩实录分享】以《基于微信小程序的糖尿病居家健康管理系统》为例进行答辩实录分享
微信小程序·小程序
哟哟耶耶6 小时前
Starting again-02
开发语言·前端·javascript