更新记录

0.0.1（2025-01-18）

初始版本

平台兼容性

n-echarts 图表

本组件与其它类似插件的优势至于，其与echarts的版本完全去耦合，您可以自由选择echarts版本，甚至是自定义版本都可以适配，对包大小有要求的朋友可以选择本组件哦

本框架也支持vue3，不过vue3不支持官方定制版本（请项目中使用npm i echarts安装模块版本的echarts，若想要在vue3项目中使用定制版本，需要手动调整文件中部分代码，使其以模块形式输出相关API）

安装

在插件市场导入即可，首次导入可能需要重新编译

代码演示

基础用法

在使用本组件前，请先从ecahrts官网下载您需要的版本，或者是用自定义中去下载定制版本，并将下载好的ecahrts.min.js文件放在您的项目中

在将echarts文件放入项目中后，您就可以像如下示例代码中一样，先使用mountEchartsModule方法将echarts模块挂载到本组件中，之后您就可以使用draw方法绘制您想要的图表了

<template>
    <view class="chart-container">
        <n-echarts ref="nEchartsRef"></n-echarts>
    </view>
</template>

<script>
    // 如果是vue3版本 那么使用 import * as echarts from 'echarts';
    import * as echarts from './echarts.min.js';

    export default {
        mounted() {
            this.$refs.nEchartsRef.mountEchartsModule(echarts);
            this.$refs.nEchartsRef.draw({
                title: {
                    text: 'Stacked Line'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Email', 'Union Ads', 'Video Ads']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                        name: 'Email',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: 'Union Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: 'Video Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    }
                ]
            });
        }
    }
</script>

<style>
    .chart-container {
        height: 400upx;
    }
</style>

刷新图表

draw方法可以传入两个参数，第一个参数为options，而第二个参数则为回调函数，该回调函数会返回echartsInstance实例，您可以使用该实例调用echarts相关API，例如resize、setOption等等，如下案例，则是演示使用setOption定时刷新数据，用于模拟实时曲线图

<template>
    <view class="chart-container">
        <n-echarts ref="nEchartsRef"></n-echarts>
    </view>
</template>

<script>
    // 如果是vue3版本 那么使用 import * as echarts from 'echarts';
    import * as echarts from './echarts.min.js';

    export default {
        mounted() {
            this.$refs.nEchartsRef.mountEchartsModule(echarts);
            this.$refs.nEchartsRef.draw({
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true
                }]
            }, chartInstance => {
                this._chartInstance = chartInstance;

                //每3秒变化一次数据
                setInterval(() => {
                    this.updateData();
                }, 3000);
            });
        },
        methods: {
            updateData() {
                let data = [];
                for(let i = 0; i < 7; i++) {
                    const value = Math.random() * 500 + 700;
                    data.push(value);
                }

                this._chartInstance.setOption({
                    series: [{
                        data
                    }]
                });
            }
        }
    }
</script>

<style>
    .chart-container {
        height: 400upx;
    }
</style>

API

methods

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。