更新记录

1.0(2023-06-05) 下载此版本

插件初始化


平台兼容性

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

使用方法


import echarts from '../../static/h5/echarts.min.js'
<!-- 散点图 -->
        <div id="chartSdtV" style="width: 96vw; height: 96vw; margin-top: 20px; margin-left: 0vw;">

        </div>

HTML代码部分


<template>
    <view class="content">

        <!-- 散点图 -->
        <div id="chartSdtV" style="width: 96vw; height: 96vw; margin-top: 20px; margin-left: 0vw;">

        </div>

    </view>
</template>

JS代码 (引入组件 填充数据)


<script>
    import echarts from '../../static/h5/echarts.min.js'

    export default {
        data() {
            return {

            }
        },
        mounted() {

            //  模拟散点图数据
            let dataDict = {
                "otherComs": [
                    ["0.166", "0.948"],
                    ["0.366", "0.248"],
                    ["0.766", "0.248"],
                    ["0.566", "0.248"],
                    ["0.166", "0.248"],
                    ["0.6686", "0.8948"],
                    ["0.5686", "0.848"],
                    ["0.686", "0.448"],
                    ["0.386", "0.4448"],
                    ["0.8686", "0.8448"],
                    ["0.9686", "0.3448"],
                    ["0.7686", "0.48"],
                    ["0.786", "0.268"],
                    ["0.36", "0.753"],
                    ["0.756", "0.8434"]
                ],
                "localComs": [
                    ["0.3386", "0.8648"]
                ]
            };

            let curSeries = [{
                    name: "其他同事",
                    type: 'scatter',
                    symbolSize: 4,
                    data: dataDict.otherComs
                },
                {
                    name: "我的位置",
                    type: 'scatter',
                    symbolSize: 6,
                    data: dataDict.localComs
                }
            ]
            var option = {
                // 设置间距
                grid: {
                    left: '0%',
                    right: '12%',
                    bottom: '7%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // Use axis to trigger tooltip
                        type: 'none' // 'shadow' as default; can also be 'line' or 'shadow'
                    },
                    textStyle: {
                        fontSize: 10,

                    },
                    padding: [8, 8],
                    position: [6, 6],
                    show: true,

                },

                xAxis: {
                    name: '业绩',
                    splitLine: {
                        show: false
                    },
                    min: 0,
                    max: 1,

                },
                yAxis: {
                    name: '成长',
                    splitLine: {
                        show: false
                    },
                    min: 0,
                    max: 1
                },
                legend: {
                    // 
                    data: ['我的位置', '其他同事']
                },
                series: curSeries
            };
            //  专利含金量图
            var dom = document.getElementById("chartSdtV");
            var myChart = echarts.init(dom);

            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }

        },

        methods: {

        }
    }
</script>

CSS


<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
</style>

隐私、权限声明

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

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

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

许可协议

MIT协议

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