echarts的一些数据格式

微信小程序使用echarts

先上效果图

效果图

起源公司有个移动端项目，不确定使用H5或者微信小程序，出于项目架构定型，我采用了uni-app + vue3 + echarts + tailwindcss + vite 时间为2022年06月24日

解决方案

uni-app 提供vite + uni-app 项目打包方案，具体如下

使用 cli 脚手架创建uni-app 文档地址

# 初始化vite项目js模板
npx degit dcloudio/uni-preset-vue#vite {项目名}
# ts版本
npx degit dcloudio/uni-preset-vue#vite-ts {项目名}

集成windicss，这个同官方提供的安装方式一直 windicss集成在vite中

npm i -D vite-plugin-windicss windicss

// vite.config.js
import WindiCSS from 'vite-plugin-windicss'
export default {
    plugins: [
        WindiCSS(),
    ],
}

注意在main.js中有差异,由于微信小程序不支持*选择器，采用

// 弃用 import 'virtual:windi.css'
//  import "virtual:windi-base.css";
import "virtual:windi-components.css";
import "virtual:windi-utilities.css";

echarts如何在微信小程序中使用，采用的是echarts官方的解决方案,具体如下

采用微信官方的ec-canvas微信小程序文档地址

{
    "globalStyle": {
            // #ifdef MP-WEIXIN
            "usingComponents": {
                "ec-canvas": "/wxcomponents/ec-canvas/ec-canvas"
            }
            // #endif
    }
}

将ec-canvas目录放在main.js同级目录下的wxcomponents目录下，然后将echarts.js移除
将ec-canvas.js中涉及到echarts的内容替换为this.data.echarts

在使用的时候除了默认示例的props外，额外添加echarts

Component({
    properties: {
        canvasId: {
            type: String,
            value: "ec-canvas",
        },

        ec: {
            type: Object,
        },

        forceUseOldCanvas: {
            type: Boolean,
            value: false,
        },
        // 新增的
        echarts: {
            type: Object,
        },
    },
    // ...
}

在vue文件中使用

npm install echarts

<!-- html部分    -->
<view class="mx-auto h-400rpx w-400rpx">
    <ec-canvas
        id="mychart-dom-bar1"
        canvas-id="mychart-bar1"
        :ec="ec"
        :echarts="echarts"
    ></ec-canvas>
</view>

// vue文件中js部分（setup）,当然采用传统的optionsApi也是可以的
// 利用vite自带rollup的摇树，进行裁剪代码，大概正常采用饼图、折线图、仪表盘、柱状图大概需要440kb左右代码空间
// 但是相对H5比较友好，在少量改动情况下即可兼容h5\(^o^)/~
import * as echarts from "echarts/core";
import { GaugeChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import { reactive } from "vue";

echarts.use([GaugeChart, CanvasRenderer]);
const ec = reactive({
    lazy: true, // 自己查看wx组件用这个属性的用途
    onInit: (canvas, width, height, dpr) => {
        let chart = null;
        chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr, // new
        });
        canvas.setChart(chart);
        var option = {
           // echarts的options配置
        };
        chart.setOption(option);
        return chart;
    },
});

# echarts的一些数据格式

# 微信小程序使用echarts

echarts的一些数据格式

微信小程序使用echarts