Echarts做漏斗图

最新推荐文章于 2024-07-04 10:44:31 发布
啊啊啊脑子要没了
最新推荐文章于 2024-07-04 10:44:31 发布
阅读量696
点赞数 11
文章标签： echarts
本文链接：https://blog.csdn.net/z912631832/article/details/137178191
版权
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="js/echarts.js"></script>

</head>

<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM--->
    <div id="main" style="width: 800px; height: 600px"></div>
    <script type="text/javascript">
        // 基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        // 指定图表的配置项和数据
        var option = { 
            color: ['lightblue', 'rgba(0,150,0,0.5)', 'rgba(255,200,0,0.5)',
                'rgba(155,200,50,0.5)', 'rgba(44,44,0,0.5)', 'rgba(33,33,30,0.5)',
                'rgba(255,66,0,0.5)', 'rgba(155,23,31,0.5)', 'rgba(23,44,55,0.5)'//设置漏斗每个信息框架的颜色与透明度
            ],
            //标题设置
            title: {
                textStyle: {
                    color: 'pink'
                },
                text: '实训3漏斗图'
            },
            backgroundColor: 'rgba(128, 128, 128, 0.1)', //背景，前面三个设置颜色，后一个设置透明度
            tooltip: {
                trigger: 'item',//数据项图形触发
                formatter: "{a} <br/>{b} : {c} ({d}%)"//详情提示框
            }, // 配置提示框组件
            toolbox: {
                left: 555,
                top: 0,//上下左右的位置
                feature: {
                    dataView: {//数据视图工具，可以展现当前图表所用的数据   
                    },
                    restore: {},//刷新还原
                    saveAsImage: {}//下载图片
                }
            }, // 配置工具箱组件
            legend: {
                left: 40,// 图例的上下左右位置
                top: 30,
                data: ['市场调查', '潜在客户', '客户跟踪',
                    '客户邀约', '客户谈判', '签订合同'
                ]
            }, 
            calculable: true,
            series: [ // 配置数据系列
                {
                    name: '漏斗图',
                    type: 'funnel',//形状类型
                    left: '3%',
                    sort: 'descending', //金字塔:'ascending'; 漏斗图:'descending'
                    top: 60,
                    bottom: 60,//整体长度
                    width: '80%',//整体宽度
                    min: 0,
                    max: 50000,//宽度最大的值
                    minSize: '0%', // 设置每一块的最小宽度
                    maxSize: '1000', // 设置每一块的最大，一次去除掉尖角
                    gap: 2, // 设置每一块之间的间隔
                    label: {
                        show: true,
                        position: 'inside'
                    }, // 设置标签显示在里面|外面
                    labelLine: {
                        length: 10, // 设置每一块的名字前面的线的长度
                        lineStyle: {
                            width: 1, // 设置每一块的名字前面的线的宽度
                            type: 'solid' // 设置每一块的名字前面的线的类型
                        }
                    },
                    itemStyle: {
                        normal: { // 设置图形在正常状态下的样式 
                            label: {
                                show: true,//汉字是否显示
                                fontSize: 15,//字体大小
                                color: 'black',//汉字颜色
                                position: 'inside',//汉字位置
                            },
                            borderColor: 'pink', // 设置每一块的边框颜色
                            borderWidth: 5, // 设置每一块边框的宽度
                            shadowBlur: 5, // 设置整个外面的阴影厚度
                            shadowOffsetX: 0, // 设置每一块的y轴的阴影,y的位置
                            shadowOffsetY: 50, // 设置每一块的x轴的阴影，x的位置
                            shadowColor: 'rgba(255,192,203,0.4)' //  设置阴影颜色与透明度
                        }
                    },
                    // 设置鼠标hover时高亮样式
                    emphasis: {
                        label: {
                            fontFamily: "黑体",
                            color: 'red',
                            fontSize: 30
                        }
                    },
                    data: [ // 设置在漏斗图中展示的数据 
                        {
                            value: 25000,
                            name: '市场调查'
                        }, {
                            value: 22075,
                            name: '潜在客户'
                        },
                        {
                            value: 18074,
                            name: '客户跟踪'
                        }, {
                            value: 15063,
                            name: '客户邀约'
                        },
                        {
                            value: 12005,
                            name: '客户谈判'
                        }, {
                            value: 10634,
                            name: '签订合同'
                        },
                    ]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>

</html>