Echarts 可视化之漏斗图、仪表盘

ゝ一纸荒年。 2023-10-06 22:15 67阅读 0赞

#### 阅读目录 ####

*  1、仪表盘
 *  2、漏斗图

## 1、仪表盘 ##

仪表盘是一种表示事件进度的可视化图，在Echarts中，绘制仪表盘需要先将 `series` 中的 `type` 参数 `1` 值设置为 `gauge` 。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_20_color_FFFFFF_t_70_g_se_x_16]

## 2、漏斗图 ##

funnel

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="'utf-8">
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    </head>
    
    <body>
    <div id="main" style="width: 600px; height: 400px;"></div>
    <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
          
        title: {
          
            text: '漏斗图',
        },
        tooltip: {
          
            trigger: 'item',
            formatter: '{a}<br/>{b}:{c}%'
        },
        toolbox: {
          
            feature: {
          
                dataView: {
           readOnly: false },
                restore: {
          },
                saveAsImage: {
          }
            },
        },
        legend: {
          
            data: ['注册', '登录', '加购', '下单', '付款'],
        },
        series: [{
          
            name: '漏斗图',
            type: 'funnel',
            left: '10%',
            top: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
          
                show: true,
                position: 'inside'
            },
            itemStyle: {
          
                borderColor: '#fff',
                borderWidth: 10
            },
            emphasis: {
          
                label: {
          
                    fontSize: 25
                }
            },
            data: [
                {
           value: 100, name: '注册' },
                {
           value: 86, name: '登录' },
                {
           value: 70, name: '加购' },
                {
           value: 35, name: '下单' },
                {
           value: 25, name: '付款' }
            ]
        }
        ]
    };
    myChart.setOption(option);
    </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_20_color_FFFFFF_t_70_g_se_x_16 1]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/6048bbf36fca4f92a5aa1eabe10d0e8a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2lsbGVtX3dn,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/d1305f2864d84dad956b151248319d3e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2lsbGVtX3dn,size_20,color_FFFFFF,t_70,g_se,x_16