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

知其黑、受其白

2024-04-04 帮助1人

1、仪表盘

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

<!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 = {
            tooltip: {
                formatter: '{a}<br/>{b}:{c}%'
            },
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                },
            },
            series: [{
                name: '',
                type: 'gauge',
                detail: {
                    formatter: '{value}%'
                },
                data: [ { value: 65, name: '完成率' }]
            }
            ]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

学新通

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>

学新通

这篇好文章是转载于：学新通技术网

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

1、仪表盘

2、漏斗图

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

怎样阻止微信小程序自动打开

excel下划线不显示怎么办

excel打印预览压线压字怎么办

photoshop蒙版画笔没反应怎么办