Echarts横向的柱状图

最新推荐文章于 2024-03-18 17:49:30 发布

夏已微凉、

最新推荐文章于 2024-03-18 17:49:30 发布

阅读量3w

点赞数 2

分类专栏： # Echarts 文章标签： echarts 横向柱状图

本文链接：https://blog.csdn.net/qq_36025814/article/details/81708363

版权

Echarts 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Echarts横向的柱状图

1、步骤：
   1)、封装Echarts折线图方法registerFunnelChart(),提取出公共的部分；
   2)、AJax获取后台数据传参至Echarts公共方法；
   3)、模拟后台获取的json数据；
   4)、给dayComment()方法值开始执行。

2、效果

3、代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts横向的柱状图</title>
    <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id='consume_y_bar' style="width:600px;height:400px;margin-left:20px;"> </div>
</body>
</html>
<script type="text/javascript">
    /*
	 * @todo 加载echarts方法
	 * @url:异步请求路径
	 * @chartId:请求的echart的id
	 * @title:标题
	 * @legend_name:图例名
	*/
    function dayComment(url,chartId, legend_name) {
        /*$.ajax({//Ajax请求你要展现的数据
            url :url,
            type : 'post',
            cache : false,
            dataType : 'json',
            async:false,	//改为同步
            data : { },	//查看方式
            success : function(data) {
                chartTool.registerFunnelChart( chartId,data.textname,  legend_name, data.yAxisData, data.seriesData);
            },
            error : function() {
                alert('服务器异常！')
            }
        });*/
        //Ajax模拟数据前台暂时写死
        var data = getStaticJsonData();
        chartTool.registerFunnelChart( chartId,data.textname, legend_name, data.yAxisData, data.seriesData);
    }

    var chartTool = {
        /**
         * @todo Echarts 横向柱状图
         * @param chartId	插件的div的ID
         * @param textname  标题名
         * @param legendData 图例名字
         * @param yAxisData  Y轴的数据
         * @param seriesData 实际展现的数据
         */
        registerFunnelChart : function( chartId, textname, legendData, yAxisData, seriesData ){
            var myChart = echarts.init(document.getElementById( chartId ));
            var option = {
                color:['#3398DB'],
                title: {
                    text:textname,	// '注册转化漏斗(总体转化率10%)',
                    left:'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: [legendData], //['用户数']
                    top:30,
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: yAxisData,	//['后续操作(3%)','完成注册(98%)','点击注册']
                },
                series: [
                    {
                        name: legendData, 	//'用户数',
                        barWidth: 30,		//设置柱子宽度
                        type: 'bar',
                        data: seriesData, //[ 104970, 131744, 630230]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption( option );
        },
    };

    //模拟AJax请求获取返回的json数据
    function getStaticJsonData() {
        var data = '{"textname":"注册转化漏斗(总体转化率40%)","yAxisData":["已消费(50%)","已登录(80%)","已注册"],"seriesData":[20,40,50]}';
        data = eval('(' + data + ')');
        return data;
    }

    dayComment('Ajax请求的路径', 'consume_y_bar', '用户数');
</script>

夏已微凉、

关注

2
点赞
踩
24

收藏

觉得还不错? 一键收藏
7
评论
Echarts横向的柱状图

Echarts横向的柱状图1、步骤： 1)、封装Echarts折线图方法registerFunnelChart(),提取出公共的部分； 2)、AJax获取后台数据传参至Echarts公共方法； 3)、模拟后台获取的json数据； 4)、给day...
复制链接

扫一扫