eCharts-散点图 配置说明

本文介绍了一个使用ECharts实现的空气质量图表实例,展示了2018年广州市空气首要污染物天数的占比情况。图表通过随机生成的数据模拟了不同日期的空气质量级别,并提供了丰富的交互功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

// 实例化eChart图表
function initEchart( idName, option ) {
    var myEchart = echarts.init( document.getElementById( idName ) );

    myEchart.setOption( option );
}

// 随机数生成
function randomNum( digitNumber, holdNumber ) {
    var random = Math.random();
    random = Math.pow( 10, digitNumber ) * random;
    random = random.toFixed(holdNumber);

    return random;
}
var option = {
        title: {
            text: "2018年广州市空气首要污染物天数占比",
            subtext: "",
            x: '16', textStyle: {fontWeight: 'normal'}
        },
        toolbox: {
            orient: 'horizontal',
            feature: {
                magicType: {
                    type: ['line', 'bar']
                },
                restore: {show: true},
                saveAsImage: {show: true}
            },
            bottom: 15,
            right: 20
        },
        grid: {     // 上下左右边距
            top: "20%",
            bottom: "10%",
            left: "8%",
            right: "8%",
            containLabel: true
        },
        tooltip: {
            padding: 10,
            backgroundColor: '#222',
            borderColor: '#777',
            borderWidth: 1,
            formatter: function (obj) {
                var value = obj.value;
                return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                        + obj.seriesName + ' ' + value[0] + '日:'
                        + value[2]
                        + '</div>'
                        + value[1] + '<br>';
            }
        },
        xAxis: {
            type: 'value',
            name: '时间',
            nameTextStyle: {
                color: '#6d9269',
                fontSize: 14
            },
            nameGap: 16,
            max: 23,
            splitLine: {        // 竖线
                show: false
            }
        },
        yAxis: {
            type: 'value',
            name: '单位:吨',
            nameLocation: 'end',
            nameGap: 20,
            nameTextStyle: {
                color: '#6d9269',
                fontSize: 16
            },
            axisTick: {         // 轴的刻度
                show: false
            },
            axisLine: {         // 轴线
                show: false
            }
        },
        series: [
            {
                name: '北京',
                type: 'scatter',
                itemStyle: {
                    normal: {
                        color: '#6d9269',      //散点的颜色
                    }
                },
                data: [
                    [1, randomNum(4, 0), "优"],
                    [2, randomNum(4, 0), "优"],
                    [3, randomNum(4, 0), "优"],
                    [4, randomNum(4, 0), "优"],
                    [5, randomNum(4, 0), "优"],
                    [6, randomNum(4, 0), "优"],
                    [7, randomNum(4, 0), "优"],
                    [8, randomNum(4, 0), "优"],
                    [9, randomNum(4, 0), "优"],
                    [10, randomNum(4, 0), "优"],
                    [11, randomNum(4, 0), "优"],
                    [12, randomNum(4, 0), "优"],
                    [13, randomNum(4, 0), "优"],
                    [14, randomNum(4, 0), "优"],
                    [15, randomNum(4, 0), "优"],
                    [16, randomNum(4, 0), "优"],
                    [17, randomNum(4, 0), "优"],
                    [18, randomNum(4, 0), "优"],
                    [19, randomNum(4, 0), "优"],
                    [20, randomNum(4, 0), "优"],
                    [21, randomNum(4, 0), "优"],
                    [22, randomNum(4, 0), "优"],
                    [23, randomNum(4, 0), "优"]
                ]
            }
        ]
    }


var echartId = 'lineChart-01';
initEchart(echartId, option);

ECharts是一个强大的数据可视化库,而ECharts-Stat是一个基于ECharts的统计图表插件,它提供了一些高级统计分析图表的功能。散点图(Scatter Chart)在ECharts中用于展示两个变量之间的关系,每个点代表一对数值,通过颜色、大小等属性可以表示更多的信息。 指数回归线(Exponential Regression Line)通常用于描述非线性的增长趋势,ECharts-Stat可以帮助你在散点图上绘制并显示指数函数拟合的结果,这对于理解复杂的数据模式很有帮助。 线性提示(Linear Trend Line)则适用于呈现数据的趋势,特别是在线性模型下。ECharts允许你在散点图上添加一条线性预测线,并显示其方程。 R平方(R-squared),也称为决定系数,是用来衡量模型解释因变量变异的程度。ECharts-Stat可能会在散点图中计算并显示这个值,它表示了模型解释的变异性占总变异性比例的百分比,越高说明模型拟合越好。 要在ECharts中创建这样的图表,你需要先安装EChartsECharts-Stat,然后配置一个包含散点图、回归线和R平方的选项,例如: ```javascript var chart = echarts.init(document.getElementById('main')); chart.setOption({ series: [{ type: 'scatter', data: ..., symbolSize: function (val) { return val[2] || 5; // 指定点的大小 } }], stats: { regression: { type: 'exponential', // 设置回归类型为指数 show: true, rSquared: true // 显示R平方值 } }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c}% ({d})" // 自定义提示信息,包含R平方 } }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值