更新记录

1.0.0（2023-06-02）

组件首次发布

平台兼容性

Vue2 Vue3
√ ×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-nvue × √ × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

ECharts封装全端通用组件(支持APP/H5/微信小程序等)

  • 支持支持APP/H5/微信小程序等平台使用
  • 函数及属性说明
序号 函数名称 函数说明
1 onEchartsComplete() 组件函数，echarts初始化完成
2 echartClick(e) 组件函数，echarts点击事件函数
3 option 组件属性，与echarts的options参数格式一致

  • 初始化完成函数 onEchartsComplete()说明:

    该函数为echarts初始化完成的回调函数，可在该函数中改变echarts的option

  • echarts点击事件函数 echartClick(e)说明：

    该函数返回echarts点击事件一致的参数，示例如下：
{
 "componentType":"series",
 "componentSubType":"line",
 "componentIndex":0,
 "seriesType":"line",
 "seriesIndex":0,
 "seriesId":"\u0000series\u00000\u00000",
 "seriesName":"series\u00000",
 "name":"-8:00",
 "dataIndex":7,
 "data":323,
 "value":323,
 "color":"#EE82EE",
 "dimensionNames":[
     "x",
     "y"
 ],
 "encode":{
     "x":[
         0
     ],
     "y":[
         1
     ]
 },
 "$vars":[
     "seriesName",
     "name",
     "value"
 ],
 "type":"click"
}

    注意事项、注意事项、注意事项

    1、导入插件后请将插件中的echarts.js文件复制一份到你的项目static目录下；
2、也可以自行从echarts官网(https://echarts.apache.org/zh/builder.html)构建你的echarts.js文件替换插件的echarts.js文件
3、点击HBuilderX预览，点击事件失效问题，在项目main.js中最底下添加如下代码：
// #ifdef H5
window.wx = {}
// #endif

  • 使用示例

    <template>
    <view class="uni-column">
        <view class="charts-box">
            <jushiEcharts :option="option" @onEchartsComplete="onEchartsComplete" @echartClick="echartClick"></jushiEcharts>
        </view>
    </view>
</template>

<script>
    import jushiEcharts from '@/uni_modules/jushi-uniECharts/components/jushi-echarts.vue'
    export default {
        components: {
            jushiEcharts
        },
        data() {
            return {
                option: {}
            }
        },
        onLoad() {

        },
        created() {
            this.$nextTick(() => {
                setTimeout(()=>{
                    // this.getData()
                },1000)
            })
        },
        methods: {
            onEchartsComplete(){//echarts初始化完成回调
                this.getData()
            },
            echartClick(e){//echarts点击事件
                console.log(e.dataIndex)
            },
            getData() {
                var date = new Date()
                var hour = date.getHours()
                let xArr = []
                let dArr = []
                for (var i = 1; i <= 24; i++) {
                    xArr.push((hour - i) + ':00')
                    dArr.push(i * (Math.floor(Math.random() * 20 + 1)))
                }
                let xData = ['12:00', '13:00', '14:00']
                let datas = [99, 66, 88]
                this.option = this.getOption(xArr.reverse(), dArr.reverse())
            },
            getChartData(xData, datas) {
                return {
                    "categories": xData,
                    "series": [{
                        "name": "",
                        "data": datas
                    }]
                }
            },
            getOption(xData, datas) {
                return {
                    title: {
                        text: '24小时数据趋势图',
                        textStyle: {
                            color: '#EE82EE',
                            fontSize: 16
                        },
                        left: '45%',
                        top: '5',
                        bottom: '10'
                    },
                    "tooltip": {
                        "show": true,
                        "trigger": "axis",
                        "axisPointer": {
                            "lineStyle": {
                                "color": "transparent"
                            }
                        }
                    },
                    "grid": {
                        "left": "5%",
                        "top": "15%",
                        "right": "5%",
                        "bottom": "85"
                    },
                    "dataZoom": [{
                            "type": "inside",
                            "start": 0,
                            "end": 50,
                            "zoomLock": true
                        },
                        {
                            "type": "slider",
                            "start": 0,
                            "end": 50,
                            "zoomLock": true,
                            "bottom": "10",
                            "height": 18,
                            "brushSelect": false,
                            "showDetail": false
                        }
                    ],
                    "xAxis": [{
                        "type": "category",
                        "data": xData,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#6A989E',
                            }
                        },
                        axisLabel: {
                            inside: false,
                            textStyle: {
                                color: '#1a1a1a', // x轴颜色
                                fontWeight: 'normal',
                                fontSize: 12,
                                lineHeight: 22
                            },
                            interval: 0,
                            rotate: 55,
                            // align: 'right',
                            margin: 10
                        },
                        "boundaryGap": true
                    }],
                    "yAxis": [{
                        "name": "个",
                        "nameGap": 8,
                        "offset": -10,
                        nameTextStyle: {
                            color: '#999999',
                            fontSize: 12
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(135,140,147,0.2)'
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(135,140,147,0.2)'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            formatter: '{value}',
                            color: '#999999',
                            fontSize: 11
                        }
                    }],
                    "series": [{
                        "symbolSize": 6,
                        "symbol": "emptyCircle",
                        "type": "line",
                        smooth: false, //平滑曲线
                        "yAxisIndex": 0,
                        "data": datas,
                        "itemStyle": {
                            "normal": {
                                "borderWidth": 1,
                                "color": "#EE82EE"
                            }
                        },
                        "label": {
                            "show": true,
                            "position": "top",
                            "distance": 2,
                            "fontSize": 12,
                            "color": "#EE82EE"
                        },
                    }]
                }
            }
        }
    }
</script>

<style>
    .charts-box {
        width: 100%;
        height: 600rpx;
    }
</style>

  • 备注

    欢迎来邮件咨询和讨论，邮箱：1052775690@qq.com

    其它插件

    安卓原生插件

  • 文件在线预览

  • 银联支付线上收银台（通用版） 封装

  • 阿里云RTC音视频通话

  • 权限请求

  • 文字转语音

  • MQTT连接

  • 获取手机通讯录联系人

  • 快捷工具悬浮窗

  • 日历日程事件

  • 获取本地音频文件信息

  • 根据经纬度获取位置信息

  • WebSocket连接

  • 高德地图封装安卓原生地图扩展组件

  • 使用ECharts封装的安卓原生扩展组件

  • 给图片添加水印

  • 自定义通知栏通知

    UTS插件

  • 安卓权限请求UTS插件

  • 安卓文字转语音UTS插件

  • 安卓获取音频文件UTS插件

    前端插件

  • ECharts封装全端通用组件

  • 图片添加水印，支持微信小程序、H5

  • 手写签名、电子签名组件

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...