温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Echarts怎么通过dataset数据集实现创建单轴散点图

发布时间:2023-02-24 10:15:37 阅读:116 作者:iii 栏目:开发技术
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

本篇内容主要讲解“Echarts怎么通过dataset数据集实现创建单轴散点图”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Echarts怎么通过dataset数据集实现创建单轴散点图”吧!

dataset创建单轴散点图

由于使用echarts作图时,我很喜欢用dataset作为数据源,但是官方案例中,又没有给出相关示例,于是,在翻阅官方文档相关案例之后,结合官方文档使用dataset的示例,成功使用dataset绘制单轴散点图!

配置项

//配置项
const option = {
    title:[],
    dataset:[
        {
            //使用 dimensions:["week","hours","count"], 方式时,
            //transform识别不到!         
            source:[//原始数据集
                ["week","hours","count"],
                [0, 0, 5], [011], [020], [030], 
                [0, 4, 0], [050], [060], [070], 
                [0, 8, 0], [090], [0100], [0112], 
                [0, 12, 4], [0131], [0141], [0153], 
                [0, 16, 4], [0176], [0184], [0194], 
                [0, 20, 3], [0213], [0222], [0235], 
                [1, 0, 7], [110], [120], [130], 
                [1, 4, 0], [150], [160], [170], 
                [1, 8, 0], [190], [1105], [1112], 
                [1, 12, 2], [1136], [1149], [11511], 
                [1, 16, 6], [1177], [1188], [11912], 
                [1, 20, 5], [1215], [1227], [1232], 
                [2, 0, 1], [211], [220], [230], 
                [2, 4, 0], [250], [260], [270], 
                [2, 8, 0], [290], [2103], [2112], 
                [2, 12, 1], [2139], [2148], [21510], 
                [2, 16, 6], [2175], [2185], [2195], 
                [2, 20, 7], [2214], [2222], [2234], 
                [3, 0, 7], [313], [320], [330], 
                [3, 4, 0], [350], [360], [370], 
                [3, 8, 1], [390], [3105], [3114], 
                [3, 12, 7], [31314], [31413], [31512], 
                [3, 16, 9], [3175], [3185], [31910], 
                [3, 20, 6], [3214], [3224], [3231], 
                [4, 0, 1], [413], [420], [430], 
                [4, 4, 0], [451], [460], [470], 
                [4, 8, 0], [492], [4104], [4114], 
                [4, 12, 2], [4134], [4144], [41514], 
                [4, 16, 12], [4171], [4188], [4195], 
                [4, 20, 3], [4217], [4223], [4230], 
                [5, 0, 2], [511], [520], [533], 
                [5, 4, 0], [550], [560], [570], 
                [5, 8, 2], [590], [5104], [5111], 
                [5, 12, 5], [51310], [5145], [5157], 
                [5, 16, 11], [5176], [5180], [5195], 
                [5, 20, 3], [5214], [5222], [5230], 
                [6, 0, 1], [610], [620], [630], 
                [6, 4, 0], [650], [660], [670], 
                [6, 8, 0], [690], [6101], [6110], 
                [6, 12, 2], [6131], [6143], [6154], 
                [6, 16, 0], [6170], [6180], [6190], 
                [6, 20, 1], [6212], [6222], [6236]
            ]
        },
    ],
  tooltip: {
    formatter:param=>{
        return `
            week:${week[param.value[0]]}
            <br/>hour:${hours[param.value[1]]}
            <br />count:${param.value[2]}
        `
    },
    
    position: 'bottom'
  },
  singleAxis: [],//单轴配置
  series: []
}

//24小时数组
const hours = [
    '12a''1a''2a''3a''4a''5a''6a',
    '7a''8a''9a''10a''11a',
    '12p''1p''2p''3p''4p''5p',
    '6p''7p''8p''9p''10p''11p'
];

//星期数组
const week = ['Saturday''Friday''Thursday',
    'Wednesday''Tuesday''Monday''Sunday']


for(let index = 0 ; index <7;index++){
    option.title.push(
        {
            top: ((index + 0.5) * 100) / 7 + '%',//标题显示位置
            text: week[index]//标题
        }
    )
    //通过transform从dataset.source中获取目标数据
    option.dataset.push(
        {
            transform: {
                type: 'filter',//使用transform过滤器
                //条件:week维度值=index的值
                config: { dimension: 'week'value: index },
            }
        },
    );
    option.singleAxis.push(
        {
            left: 150,
            boundaryGap: false, 
            //使用24小时数组为刻度
            type: 'category',
            data: hours,

            top: (index * 100) / 7 + 5 + '%',
            height: 100 / 7 - 10 + '%',
            axisLabel: {
                interval: 2,
            }
        }
    );
    option.series.push(
        {
            datasetIndex: index + 1,//使用对应转换好的数据源
            singleAxisIndex: index,
            coordinateSystem: 'singleAxis',
            type: 'scatter',
            encode: {
                //数据的第2列和第三列为展示数据
                //transform数据源["hour","count"]无法识别
                single:[1,2]
            },
            symbolSize: function (dataItem) {
                return dataItem[2] * 4;
            }
        }
    )
}

效果图

Echarts怎么通过dataset数据集实现创建单轴散点图

官方案例效果图:

Echarts怎么通过dataset数据集实现创建单轴散点图

到此,相信大家对“Echarts怎么通过dataset数据集实现创建单轴散点图”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×