echarts数据格式分析

最新推荐文章于 2024-05-13 08:38:21 发布

一只小泰迪

最新推荐文章于 2024-05-13 08:38:21 发布

阅读量2.5k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_38644630/article/details/109959875

版权

前端专栏收录该内容

42 篇文章 4 订阅

订阅专栏

数据图表数据分析

说明：根据demo图标列出查询条件以及数据结构，不用在意效果样式，后期功能实现完毕后可进行美化

日期：2020年11月20日

作者：谯坤

一、各个门店客单量分析

原型图

折线图\散点图

x轴（表示？？？）y轴表示(客单量？)

api参考数据格式

{
  "status": 200,
  "data": [
    {
      "storeId": "0001",
      "storeName": "旗舰店",
      "storeData": [
        { "x轴（自定义名称）": "10", "y轴（客单量?）": "8000" },
        { "x轴（自定义名称）": "20", "y轴（客单量?）": "1500" },
        { "x轴（自定义名称）": "30", "y轴（客单量?）": "20" },
        { "x轴（自定义名称）": "40", "y轴（客单量?）": "10" },
        { "x轴（自定义名称）": "50", "y轴（客单量?）": "5" },
        { "x轴（自定义名称）": "60", "y轴（客单量?）": "2" },
        { "x轴（自定义名称）": "70", "y轴（客单量?）": "1" }
      ]
    },
    {
      "storeId": "0002",
      "storeName": "社区大卖场",
      "storeData": [
        { "x轴（自定义名称）": "10", "y轴（客单量?）": "6000" },
        { "x轴（自定义名称）": "20", "y轴（客单量?）": "1200" },
        { "x轴（自定义名称）": "30", "y轴（客单量?）": "15" },
        { "x轴（自定义名称）": "40", "y轴（客单量?）": "12" },
        { "x轴（自定义名称）": "50", "y轴（客单量?）": "8" },
        { "x轴（自定义名称）": "60", "y轴（客单量?）": "6" },
        { "x轴（自定义名称）": "70", "y轴（客单量?）": "4" }
      ]
    }
  ]
}

前端整理数据参考格式

// x轴数据
xAxis: {
        data: ['10', '20', '30', '40', '50', '60', '70']
    },
// y轴数据
 series: [
        {
            name: '旗舰店',
            type: 'line',
            stack: '旗舰店',
            smooth: true,
            data: [8000, 1500, 20, 10, 5, 2, 1]
        },
        {
            name: '社区大卖场',
            type: 'line',
            stack: '社区大卖场',
            smooth: true,
            data: [6000, 1200, 15, 12, 8, 6, 4]
        },
        {
            name: '社区综超',
            type: 'line',
            stack: '社区综超',
            smooth: true,
            data: [7000, 1800, 18, 9, 4, 2, 1]
        },
        {
            name: '精品超市',
            type: 'line',
            stack: '精品超市',
            smooth: true,
            data: [5000,1200 , 15, 12, 10, 9, 3]
        },
        {
            name: '郊区超市',
            type: 'line',
            stack: '郊区超市',
            smooth: true,
            data: [6500, 1300, 10, 9, 8, 7, 6]
        },
         {
            name: '社区精品超市',
            type: 'line',
            stack: '社区精品超市',
            smooth: true,
            data: [1200, 100, 9, 6, 5, 4, 1]
        }
    ]

参考效果图（样式需要优化）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6567n09y-1606040389090)(C:\Users\86177\AppData\Roaming\Typora\typora-user-images\1605855294583.png)]$

二、具体某一门店顾客单为1的商品购买频次以及重要度

原型图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NJ1LpKol-1606040389095)(C:\Users\86177\Desktop\数据图片截图\具体某一门店顾客单为1的商品购买频次以及重要度.png)]

分析：柱状图：x周表示：商品，y周表示销售：购买频次和重要度

api参考数据格式

{
  "status":200,
  "data":[
    {"goodname":"营养粉","saleNum(销量)":320,"important(重要度)":3.16},
    {"goodname":"康师傅矿泉水","saleNum(销量)":302,"important(重要度)":2.80},
    {"goodname":"女装上衣","saleNum(销量)":301,"important(重要度)":3.90},
    {"goodname":"泰山（红将","saleNum(销量)":334,"important(重要度)":5.90},
    {"goodname":"云烟","saleNum(销量)":390,"important(重要度)":5.00},
    {"goodname":"娃哈哈","saleNum(销量)":330,"important(重要度)":6.00},
    {"goodname":"南京","saleNum(销量)":320,"important(重要度)":7.00}
  ]
}

前端参考数据结构

// x轴数据
xAxis: {
       data: ['营养粉', '康师傅矿泉水', '女装上衣', '泰山（红将）', '云烟', '娃哈哈', '南京']
    },
// y轴数据
 series: [
        {
            name: '销量',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
            name: '重要度',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [3.16, 2.80, 3.90, 5.90, 5, 6,7]
        }
    ]

参考效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J3JsPTPY-1606040389103)(C:\Users\86177\AppData\Roaming\Typora\typora-user-images\1605857766969.png)]

三、具体某一门店的商品关联图谱

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P3HUsbDi-1606040389108)(assets/具体某一门店的商品关联图谱.png)]

分析：查询某一具体门店下的商品关系信息

api参考格式

{
    status:200,
    data:{
      nodes: [
      {
        id: '0',
        name: '营养粉',
        attributes: { modularity_class: 0 }
      },
      { id: '1', name: '矿泉水', attributes: { modularity_class: 1 } },
      { id: '2', name: '苏打粉', attributes: { modularity_class: 2 } },
      {
        id: '3',
        name: '可口可乐',
        attributes: { modularity_class: 3 }
      }
    ],
    links: [
      { id: '0', source: '0', target: '1' },
      { id: '1', source: '0', target: '2' },
      { id: '2', source: '0', target: '3' }
    ]
    }
}

前端参考数据格式

// 节点信息数据
nodes: [
      {
        id: '0',
        name: '营养粉',
        attributes: { modularity_class: 0 }
      },
      { id: '1', name: '矿泉水', attributes: { modularity_class: 1 } },
      { id: '2', name: '苏打粉', attributes: { modularity_class: 2 } },
      {
        id: '3',
        name: '可口可乐',
        attributes: { modularity_class: 3 }
      }
    ],
// 关系信息数据
    links: [
      { id: '0', source: '0', target: '1' },
      { id: '1', source: '0', target: '2' },
      { id: '2', source: '0', target: '3' }
    ]

参考效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MiLGyHFn-1606040389117)(assets/1605869242143.png)]

四、销量变化原因

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QEImldnn-1606040389120)(assets/销售量变化原因分析.png)]

分析：查询每一个门店的销量

api格式参考

{
  "status":200,
  "data":[
    {
      "storeId":"0001",
      "storeName":"旗舰店",
      "storeSaleNum":120
    },
    {
      "storeId":"0002",
      "storeName":"精品社区",
      "storeSaleNum":200
    },
    {
      "storeId":"0003",
      "storeName":"门店三",
      "storeSaleNum":150
    },
    {
      "storeId":"0004",
      "storeName":"门店四",
      "storeSaleNum":80
    },
    {
      "storeId":"0005",
      "storeName":"门店五",
      "storeSaleNum":70
    },
    {
      "storeId":"0006",
      "storeName":"门店六",
      "storeSaleNum":110
    },
    {
      "storeId":"0007",
      "storeName":"门店七",
      "storeSaleNum":130
    }
  ]
}

前端参考数据格式

option = {
    xAxis: {
        type: 'category',
        data: ['旗舰店', '精品社区', '门店三', '门店四', '门店五', '门店六', '门店八']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    }]
};

效果参考图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-azyXxdOi-1606040389124)(assets/1605946109943.png)]

五、门店日期折线图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PxKa4qun-1606040389129)(assets/门店日期折线图.png)]

分析：查询某一门店具体日期销售数据折线图

api数据接口格式参考

{
  "status":200,
  "data":[
    ["2020-01-01",116],
    ["2020-01-02",117],
    ["2020-01-03",114],
    ["2020-01-04",118],
    ["2020-01-05",119]
      ...
    ['2020-12-31',110]
  ]
}

前端参考数据格式

// x轴数据
xAxis: {
       data: ['2020-01-01', '2020-01-02', '2020-01-02', '2020-01-02', ..., '2020-12-31']
    },
// y轴数据
 series: [
            data: [116, 117,...,110]
    ]

效果参考图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LbRN2sVd-1606040389137)(assets/1605947910324.png)]

六、门店日期品类热力图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VCeNQmxl-1606040389142)(assets/门店日期品类热力图.png)]

分析：根据日期查询商品分类销量情况

api参考数据结构

{
  "status":200,
  "data":{
    "date":[2020-01-01', '2020-01-02', '2020-01-03', '2020-01-04', '2020-01-05', '2020-01-06'],
    "category":['换购', '家电', '日用',
      '水果', '蔬菜','体育'],
      "data":[[0,0,2],[0,1,2],[0,2,1],[0,3,3],[0,4,6],[0,5,0],[0,6,7],[5,1,2],[5,2,1],[4,3,8]]
  }
}

前端参考数据说明

var hours = [
        '2020-01-01', '2020-01-02', '2020-01-03', '2020-01-04', '2020-01-05', '2020-01-06'];
var days = ['换购', '家电', '日用',
        '水果', '蔬菜','体育'];

// data中数据说明
[0,0,2]0表示y轴第一个，表示x轴第一个，2表示该处的值为2
[0,1,2]0表示y轴第一个，1表示x轴第二个，2表示该位置的值，为2
通俗来讲，前面两个数表示坐标位置，第三个数表示值，第一个数表示y轴，第二个数表示x轴，第三个数表示值

var data = [[0,0,2],[0,1,2],[0,2,1],[0,3,3],[0,4,6],[0,5,0],[0,6,7],[5,1,2],[5,2,1],[4,3,8]]

效果参考实现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aUpM7mnO-1606040389148)(assets/1605949550829.png)]

一只小泰迪

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
echarts数据格式分析

数据图表数据分析说明：根据demo图标列出查询条件以及数据结构，不用在意效果样式，后期功能实现完毕后可进行美化日期：2020年11月20日作者：谯坤一、各个门店客单量分析原型图折线图\散点图x轴（表示？？？）y轴表示(客单量？)api参考数据格式{ "status": 200, "data": [ { "storeId": "0001", "storeName": "旗舰店", "storeData": [ { "
复制链接

扫一扫

专栏目录