更新记录

1.0.5（2025-08-02）

优化

1.0.4（2025-08-02）

优化

1.0.3（2025-08-02）

优化

平台兼容性

云端兼容性

uni-app(4.07)

uni-app x(4.07)

其他

qiao-renderjs-echarts

简介

基于renderjs开发的echarts插件，支持echarts的所有图表，包括3D图表

市场上有一些基于renderjs开发的echarts的插件，但是都难免有些问题，比如echarts的 function 配置项丢失不生效报错之类的， 这款插件是结合市场插件修复了很多问题后产生的，支持渲染echarts的所有图表，包括3D图表

使用方法

1、准备工作，项目根目录的static文件夹一定先放上echarts的两个相关js，插件会用到，下载后，自己创建文件复制进去吧

echarts.min.js

echarts-gl.min.js

示例是 Vue3 语法糖
<script lang="ts" setup>
    import { ref } from 'vue'

    const refCharts = ref()

    const option = ref({
        animation: false,
        grid: {
            top: 0,
            left: 10,
            right: 0,
            bottom: 5,
            containLabel: true
        },
        tooltip: {
            show: false
        },
        legend: {
            show: false
        },
        xAxis: [
            {
                id: 'xAxis1',
                type: 'category',
                data: [],
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255, 244, 215,0.3)'
                    }
                },
                axisLabel: {
                    fontSize: 14,
                    color: '#FFFFFF',
                    showMinLabel: false,
                    showMaxLabel: false,
                }
            }
        ],
        yAxis: [
            {
                id: 'yAxis1',
                type: 'value',
                splitNumber: 10,
                minInterval: 0.01,
                boundaryGap: ['1%', '1%'],
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255, 244, 215,0.3)'
                    }
                },
                axisLabel: {
                    width: 35,
                    overflow: 'truncate',
                    ellipsis: '',
                    fontSize: 14,
                    color: '#FFFFFF',
                    showMinLabel: false,
                    showMaxLabel: false,
                    hideOverlap: true,
                    formatter: function (value) {
                        return Math.abs(value);
                    }
                },
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: ['#000000'],
                    },
                },
            }
        ],
        series: [
            {
                id: 'series1',
                name: '数值',
                type: 'line',
                smooth: true,
                data: [],
                showSymbol: false,
                symbol: 'none',
                smoothMonotone: 'x',
                sampling: 'lttb',
                lineStyle: {
                    color: '#edff1e',
                    width: 1
                }
            },
        ],
        dataZoom: [
            {
                type: 'inside',
                orient: 'vertical',
                filterMode: 'empty',
                throttle: 0,
                preventDefaultMouseMove: false,
            },
            {
                type: 'inside',
                orient: 'horizontal',
                filterMode: 'empty',
                throttle: 0,
                preventDefaultMouseMove: false,
            }
        ]
    })

    const show = (xData : any, yData : any) => {
        // 动态赋值数据
        option.value.xAxis[0].data = [1,2,3,4,5]
        option.value.series[0].data = [10,15,8,20,15]
    }
    defineExpose({
        show
    })
</script>

<template>
    <qiao-renderjs-echarts ref="refCharts" :option="option" :borderWarning="true"></qiao-renderjs-echarts>
</template>

注意事项

如果option里边需要用到echarts的实例，需要加 window.echarts 例如：window.echarts.graphic.clipRectByRect({})

参数介绍

option: { //echarts的配置项
    type: Object,
    default () {
        return {}
    }
},
borderWarning: { //滑到边缘是否显示提醒边框，默认隐藏
    type: Boolean,
    default: false,
},

Echarts配置项手册

Echarts配置项手册 Echarts 3D配置项手册