mpvue使用echarts

柔光的暖阳◎ 2023-02-27 13:57 1阅读 0赞

在mpvue中开发小程序中，mpvue官方出了一套适用于mpvue使用的eecharts，叫mpvue-echarts；

值得一提的是，原生小程序使用的是[echarts-for-weixin][]，具体地址如下：

[https://github.com/ecomfe/echarts-for-weixin][echarts-for-weixin]

1.mpvue-echarts的github地址

[https://github.com/F-loat/mpvue-echarts][https_github.com_F-loat_mpvue-echarts]

首先安装

npm install mpvue-echarts
    npm install echarts

其次页面使用

import * as echarts from "echarts/dist/echarts.min";
    import mpvueEcharts from "mpvue-echarts";

然后具体绘制

<mpvue-echarts :echarts="echarts" :onInit="ecBarInit_0" canvasId="bar0" />

在data里声明

ecBarInit_0: function(canvas, width, height) {
            barChart_0 = echarts.init(canvas, null, {
              width: width,
              height: height
            });
            canvas.setChart(barChart_0);
            barChart_0.setOption(options_0);
            // console.log("barChart_0", barChart_0);
            return barChart_0;
          },

接下来

options_0 = {
            series: [
              {
                type: "graph", // 系列类型:关系图
                top: "10%", // 图表距离容器顶部的距离
                // roam: true,             // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                // focusNodeAdjacency: true, // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。[ default: false ]
                force: {
                  // 力引导布局相关的配置项，力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的能量最小化。
                  // 力引导布局的结果有良好的对称性和局部聚合性，也比较美观。
                  repulsion: 1000, // [ default: 50 ]节点之间的斥力因子(关系对象之间的距离)。支持设置成数组表达斥力的范围，此时不同大小的值会线性映射到不同的斥力。值越大则斥力越大
                  edgeLength: [150, 100], // [ default: 30 ]边的两个节点之间的距离(关系对象连接线两端对象的距离,会根据关系对象值得大小来判断距离的大小)，
                  // 这个距离也会受 repulsion。支持设置成数组表达边长的范围，此时不同大小的值会线性映射到不同的长度。值越小则长度越长。如下示例:
                  // 值最大的边长度会趋向于 10，值最小的边长度会趋向于 50      edgeLength: [10, 50]
                  layoutAnimation: false
                },
                layout: "force", // 图的布局。[ default: 'none' ]
                // 'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
                // 'circular' 采用环形布局;'force' 采用力引导布局.
                // 标记的图形
                //symbol: "path://M19.300,3.300 L253.300,3.300 C262.136,3.300 269.300,10.463 269.300,19.300 L269.300,21.300 C269.300,30.137 262.136,37.300 253.300,37.300 L19.300,37.300 C10.463,37.300 3.300,30.137 3.300,21.300 L3.300,19.300 C3.300,10.463 10.463,3.300 19.300,3.300 Z",
                symbol: "circle",
                lineStyle: {
                  // 关系边的公用线条样式。其中 lineStyle.color 支持设置为'source'或者'target'特殊值，此时边会自动取源节点或目标节点的颜色作为自己的颜色。
                  normal: {
                    color: "#FF7801", // 线的颜色[ default: '#aaa' ]
                    width: 2, // 线宽[ default: 1 ]
                    type: "solid", // 线的类型[ default: solid ]   'dashed'    'dotted'
                    opacity: 0.5, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。[ default: 0.5 ]
                    curveness: 0 // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。[ default: 0 ]
                  }
                },
                label: {
                  // 关系对象上的标签
                  normal: {
                    show: true, // 是否显示标签
                    position: "inside", // 标签位置:'top''left''right''bottom''inside''insideLeft''insideRight''insideTop''insideBottom''insideTopLeft''insideBottomLeft''insideTopRight''insideBottomRight'
                    textStyle: {
                      // 文本样式
                      fontSize: 16
                    }
                  }
                },
                edgeLabel: {
                  // 连接两个关系对象的线上的标签
                  // normal: {
                  //   show: true,
                  //   textStyle: {
                  //     fontSize: 14
                  //   },
                  //   formatter: function(param) {
                  //     // 标签内容
                  //     return param.data.category;
                  //   }
                  // }
                },
                data: value,
                // categories: [
                //   {
                //     // 节点分类的类目，可选。如果节点有分类的话可以通过 data[i].category 指定每个节点的类目，类目的样式会被应用到节点样式上。图例也可以基于categories名字展现和筛选。
                //     name: "收入支出分析" // 类目名称，用于和 legend 对应以及格式化 tooltip 的内容。
                //   },
                //   {
                //     name: "收入+"
                //   },
                //   {
                //     name: "支出-"
                //   },
                //   {
                //     name: "支出-"
                //   },
                //   {
                //     name: "剩余="
                //   }
                // ],
                links: links
              }
            ]
          };

这些都是默认的申明，具体的计算是需要实际数据。

最后

放到onLoad周期里。

注：在mpvue 里，vue的生命周期和小程序的生命周期可以换着用的。

[echarts-for-weixin]: https://github.com/ecomfe/echarts-for-weixin
[https_github.com_F-loat_mpvue-echarts]: https://github.com/F-loat/mpvue-echarts