Echarts数据可视化第7章 Echarts不同场景Dashboard制作案例 7.1 电商销售情况可视化案例

川长思鸟来 2024-03-25 20:45 24阅读 0赞

#### Echarts数据可视化 ####

#### 文章目录 ####

*   *   *  Echarts数据可视化
         *  第7章 Echarts不同场景Dashboard制作案例
         *   *  7.1 电商销售情况可视化案例

> Echarts数据可视化：入门、实战与进阶

#### 第7章 Echarts不同场景Dashboard制作案例 ####

##### 7.1 电商销售情况可视化案例 #####

Dashboard 是商业智能仪表盘的简称，主要用来呈现数据可视化效果。

它可以用可视化的方式为企业和用户展现度量信息和关键业务指标，通常由一些关键指标和多张可视化图组成。

举个栗子

首先将所有文字信息都放在title 的列表中，主要包括文字内容、x方向偏移、y方向偏移、字体大小等。

title: [ // 所有文字信息
        {
        
            text: '今日订单总金额', x: 'center', y: '4.5%',
            textStyle: {
        fontSize: 20}
        },
        {
        
            text: '今日成交订单数', x: '14.7%', y: '18%',
            textStyle: {
        fontSize: 20}
        },
        {
        
            text: '34220', x: '15.3%', y: '23%',
            textStyle: {
        fontSize: 40}
        },
        {
        
            text: '订单成功占比', x: 'center', y: '18%',
            textStyle: {
        fontSize: 20}
        },
        {
        
            text: '93.25%', x: 'center', y: '23%',
            textStyle: {
        fontSize: 40}
        },
        {
        
            text: '今日取消订单数', x: '74.5%', y: '18%',
            textStyle: {
        fontSize: 20}
        },
        {
        
            text: '2310', x: '76%', y: '23%',
            textStyle: {
        fontSize: 40}
        },
        {
        
            text: '购买用户\n\n设备分布',
            x: '19.8%', y: '45%',
            textAlign: 'center', textBaseline: 'middle',
            textStyle: {
        fontSize: 20}
        },
        {
        
            text: '购买用户\n\n年龄分布',
            x: '49.8%', y: '45%',
            textAlign: 'center', textBaseline: 'middle',
            textStyle: {
        fontSize: 20}
        },
        {
        
            text: '购买用户\n\n渠道分布',
            x: '79.8%', y: '45%',
            textAlign: 'center', textBaseline: 'middle',
            textStyle: {
        fontSize: 20}
        },
        {
        
            text: '4509834', x: 'center', y: '9%',
            textStyle: {
        fontSize: 60}
        },
        {
        
            text: '订单量 TOP10 城市', x: '18%', y: '60%',
            textStyle: {
        fontSize: 20}
        },
        {
        
            text: '订单量分时段统计', x: '65%', y: '60%',
            textStyle: {
        fontSize: 20}
        }],

然后通过grid 指定条形图与折线图的位置及所占空间区域需要通过grid 来设定，

grid: [
        {
        
        left: '5%', // 网格部分
        right: '55%',
        top: '65%',
        bottom: '5%',
        containLabel: true
    },
        {
        
            gridindex: 1,
            left: '50%',
            right: '5%',
            top: '65%',
            bottom: '5%',
            containLabel: true
        }],

上面还通过上下左右方位设定了可视化图所占空间区域。且图的gridIndex需要与x 轴、y轴匹配，且一般会省略gridIndex 为 0 的情况，将gridIndex 设为1。因为Dashboard 中有多张图，所以要把握好这些图之间的关系。

完整实现代码：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>电商销售情况可视化案例</title>
        
        <script src="../js/echarts.js"></script>
    </head>
    <body>
    
    <div id="main" style="width:1800px;height: 1000px">
    
    </div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
    
        // 指定图表的配置项和数据
        var option = {
          
            title: [ // 所有文字信息
                {
          
                    text: '今日订单总金额', x: 'center', y: '4.5%',
                    textStyle: {
          fontSize: 20}
                },
                {
          
                    text: '今日成交订单数', x: '14.7%', y: '18%',
                    textStyle: {
          fontSize: 20}
                },
                {
          
                    text: '34220', x: '15.3%', y: '23%',
                    textStyle: {
          fontSize: 40}
                },
                {
          
                    text: '订单成功占比', x: 'center', y: '18%',
                    textStyle: {
          fontSize: 20}
                },
                {
          
                    text: '93.25%', x: 'center', y: '23%',
                    textStyle: {
          fontSize: 40}
                },
                {
          
                    text: '今日取消订单数', x: '74.5%', y: '18%',
                    textStyle: {
          fontSize: 20}
                },
                {
          
                    text: '2310', x: '76%', y: '23%',
                    textStyle: {
          fontSize: 40}
                },
                {
          
                    text: '购买用户\n\n设备分布',
                    x: '19.8%', y: '45%',
                    textAlign: 'center', textBaseline: 'middle',
                    textStyle: {
          fontSize: 20}
                },
                {
          
                    text: '购买用户\n\n年龄分布',
                    x: '49.8%', y: '45%',
                    textAlign: 'center', textBaseline: 'middle',
                    textStyle: {
          fontSize: 20}
                },
                {
          
                    text: '购买用户\n\n渠道分布',
                    x: '79.8%', y: '45%',
                    textAlign: 'center', textBaseline: 'middle',
                    textStyle: {
          fontSize: 20}
                },
                {
          
                    text: '4509834', x: 'center', y: '9%',
                    textStyle: {
          fontSize: 60}
                },
                {
          
                    text: '订单量 TOP10 城市', x: '18%', y: '60%',
                    textStyle: {
          fontSize: 20}
                },
                {
          
                    text: '订单量分时段统计', x: '65%', y: '60%',
                    textStyle: {
          fontSize: 20}
                }],
            tooltip: {
          
                trigger: 'axis',
                axisPointer: {
          type: 'shadow'}
            },
            backgroundColor: 'rgba(20,20,100,1)', // 背景色
            grid: [
                {
          
                    left: '5%', // 网格部分
                    right: '55%',
                    top: '65%',
                    bottom: '5%',
                    containLabel: true
                },
                {
          
                    gridindex: 1,
                    left: '50%',
                    right: '5%',
                    top: '65%',
                    bottom: '5%',
                    containLabel: true
                }],
            xAxis: [{
          
                type: 'value', // x轴
                axisLabel: {
          
                    formatter: '{value} 件'
                },
                boundaryGap: [0, 0.02]
            },
                {
          
                    gridIndex: 1,
                    type: 'category',
                    boundaryGap: false,
                    data: ['0时', '1时', '2时', '3时', '4时', '5时',
                        '6时', '7时', '8时', '9时', '10时', '11时',
                        '12时', '13时', '14时', '15时', '16时', '17时',
                        '18时', '19时', '20时', '21时', '22时', '23时']
                }],
            yAxis: [{
          
                type: 'category', // y轴
                data: ['城市A', '城市B', '城市C', '城市D', '城市E',
                    '城市F', '城市G', '城市H', '城市I', '城市J'],
                axisLabel: {
          interval: 0}
            },
                {
          
                    gridIndex: 1,
                    type: 'value',
                    axisLabel: {
          formatter: '{value} '}
                }],
            series: [{
          
                type: 'bar', // 条形图
                label: {
          
                    normal: {
          
                        show: true,
                        position: 'right'
                    }
                },
                data: [4320, 3529, 3105, 2304, 2094,
                    1790, 1565, 1120, 780, 409]
            },
                {
          
                    type: 'pie', // 饼图
                    center: ['20%', '45%'],
                    radius: ['15%', '20%'],
                    label: {
          normal: {
          formatter: '{b} :\n{c}({d}%)'}},
                    data: [{
          value: 1032, name: 'Mac'},
                        {
          value: 10096, name: 'iphone'},
                        {
          value: 1240, name: 'iPad'},
                        {
          value: 15098, name: 'Android'},
                        {
          value: 4098, name: 'Windows'},
                        {
          value: 2656, name: '其它'}]
                },
                {
          
                    type: 'pie', // 饼图
                    center: ['50%', '45%'],
                    radius: ['15%', '20%'],
                    label: {
          
                        normal: {
          formatter: '{b} :\n{c}({d}%)'}
                    },
                    data: [{
          value: 11045, name: '小于25岁'},
                        {
          value: 20230, name: '25岁-40岁'},
                        {
          value: 2945, name: '大于40岁'}]
                },
                {
          
                    type: 'pie', // 饼图
                    center: ['80%', '45%'],
                    radius: ['15%', '20%'],
                    label: {
          normal: {
          formatter: '{b} :\n{c}({d}%)'}},
                    data: [{
          value: 1851, name: '天猫'},
                        {
          value: 10234, name: '淘宝'},
                        {
          value: 14575, name: '京东'},
                        {
          value: 7560, name: '拼多多'}]
                },
                {
          
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    type: 'line', // 折线图
                    data: ['416', '382', '318', '184', '215', '265',
                        '557', '954', '1627', '1180', '2416', '2678',
                        '3021', '2590', '2100', '1809', '2300', '2539'],
                    smooth: true,
                    markPoint: {
          
                        data: [{
          type: 'max', name: '最大值', symbolSize: 60},
                            {
          type: 'min', name: '最小值', symbolSize: 60}],
                        itemStyle: {
          normal: {
          color: '#F36100'}}
                    },
                    markLine: {
          
                        data: [{
          type: 'average', name: '平均值'}]
                    }
                }
            ]
        };
    
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    </body>
    </html>

浏览器渲染效果

![在这里插入图片描述][6c0d63f440ae4b94876ca4d0a1bb8888.png_pic_center]

[6c0d63f440ae4b94876ca4d0a1bb8888.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/6cbc9ccd394d403f9dc97ffd82e5e8ab.png