Echarts之柱状图Demo

最新推荐文章于 2023-12-23 09:54:31 发布

smile radiantly

最新推荐文章于 2023-12-23 09:54:31 发布

阅读量471

点赞数

分类专栏：前端插件文章标签： echarts

本文链接：https://blog.csdn.net/zhixingwu/article/details/103012801

版权

前端插件专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前后端无分离，在jsp中导入echarts，制作柱状图。

下面有关echarts.js文件都是从echarts官网下载而来，也可以从bootCDN直接引入。
bootstrap官网
 BootCDN官网
 echarts官网

Demo：

<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
	<%--echarts相关文件引入--%>
    <script type="text/javascript" src="echarts/echarts.js"></script>
    <script type="text/javascript" src="echarts/macarons.js"></script>
    <script type="text/javascript" src="echarts/vintage.js"></script>
    <script type="text/javascript" src="echarts/shine.js"></script>
    <script type="text/javascript" src="echarts/dark.js"></script>
</head>
<body>
	<div>
		<div id="bug" style="width: 100%;height: 320px;"></div>
        <script type="text/javascript">
            var charts_bug = echarts.init(document.getElementById('bug'));
            //自定义一个颜色数组，多系时会按照顺序使用自己定义的颜色数组，若不定义则使用默认的颜色数组
            var colors = ['#FD2446','#248EFD','#C916F2','#6669B1','#5FA0FA'];     
            var option_bug = {
                backgroundColor: '',//背景颜色透明
                color: colors,
                title: {
                    // text: '2018&2019 automationBug',
                    // subtext: '',
                    // left: 'center'
                },
                tooltip: {
                    trigger: 'axis',    // 鼠标经过提示
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'cross',        // 默认为直线，可选为：'line' | 'shadow'
                        label: {
                            backgroundColor: '#6a7985'      // 提示标签的背景颜色
                        },
                    }
                },
                dataset: {
                    source: [
                        ['projectName', 'automationBug' ],
                        <c:forEach items="${bugList}" var="bug">
                        ['${bug.projectName}','${bug.automationBug}'],
                        </c:forEach>

                    ]
                },
                legend: {
                    type: 'plain',
                    orient: 'horizontal',
                    // orient: 'vertical',
                    // pageButtonPosition: 'end',
                    // right: 10,
                    // top: 'bottom',
                    left: 'center',
                    // bottom: -50,
                    icon: "roundRect",     // circle  roundRect
                    data: ['automationBug'],
                    selected: {     // 图例默认的显示与隐藏

                    },
                    textStyle: {    //图例文字的样式
                        color: '#000',
                        fontSize: 14
                    }
                },
                grid: {
                    left: '0%',
                    right: '3%',
                    top: '15%',
                    bottom: '16%',
                    containLabel: true
                },
                toolbox: {
                    show: false,
                    feature: {
                        // dataView : {show: true, readOnly: false},
                        magicType: {show: true, type: ['bar']},
                        dataZoom: {
                            yAxisIndex: 'none',
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    },
                    left: 'right',
                    orient: 'horizontal',
                    // orient: 'vertical',
                    top: '0'
                },
                calculable: true,
                xAxis: {
                    type: 'category',
                    boundaryGap: true,     //数据从坐标轴开始
                    axisLine: {onZero: false},
                    show: true     //隐藏x轴
                    /*data: [].map(function (str) {
                        return str.replace(' ', '\n')
                    })*/
                },
                yAxis: [
                    {//第一个y轴位置在左侧
                        show: true,    //隐藏y轴
                        position: 'left',
                        type: 'value',
                        name: '',
                        axisLine: {
                            lineStyle: {
                                color: colors[1]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} '
                        },
                        // 控制网格线
                        splitLine: {
                            show: false,    //去除网格线
                            //  改变轴线颜色
                            lineStyle: {
                                // color: '#2a2a2d'
                            }
                        },
                        axisTick: {       //y轴刻度线
                            show: true
                        },
                    },

                ],
                dataZoom: [// 这个dataZoom组件，若未设置xAxisIndex或yAxisIndex，则默认控制x轴。
                    {
                        type: 'slider',//这个 dataZoom 组件是 slider 型 dataZoom 组件（只能拖动 dataZoom 组件导致窗口变化）
                        xAxisIndex: 0, //控制x轴
                        start: 0, 	// 左边在 10% 的位置
                        end: 100, 	// 右边在 60% 的位置
                        // orient: 'vertical',
                        // left: 'left'
                    },
                    {
                        type: 'inside',//这个 dataZoom 组件是 inside 型 dataZoom 组件（能在坐标系内进行拖动，以及用滚轮（或移动触屏上的两指滑动）进行缩放）
                        xAxisIndex: 0,//控制x轴
                        start: 0,
                        end: 100
                    },

                ],
                series: [
                    {
                        type: 'bar',yAxisIndex: '0', /*areaStyle: {}     areaStyle: {normal: {}}     显示区域面积*/
                        itemStyle: {
                            normal: {
                            	//这里不定义颜色时，根据上文的定义的color显示
                                color: colors[4],   //柱状图颜色
                                label: {    //柱状图上指的显示
                                    show: false,
                                    position: 'top',
                                    textStyle: {
                                        fontSize: 16
                                    }
                                }
                            },
                            emphasis: {
                                color: colors[0],   //鼠标悬浮时柱状图颜色
                            }
                        },
                        /*markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },*/
                        /*markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }*/
                    },

                ]
            };
            charts_bug.setOption(option_bug);

        </script>
	
	</div>
</body>

项目中实现的效果图：
柱状图效果

备注：上文是采用的dataset数据集
具体查看官网：https://echarts.apache.org/zh/index.html

之前版本Demo:

<script type="text/javascript">
    var warm_boot_chart = echarts.init(document.getElementById("ddpm"),'macarons');
    var option = {
        title : {
            text: 'DDPM',
            subtext: '时延分析',
            left: 'center'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            type: 'scroll',
            orient: 'horizontal',
            // pageButtonPosition: 'end',
            // right: 10,
            top: 'bottom',
            // bottom: 20,
            icon: "circle",
            data:[
                <c:forEach var="i" begin="0" end="${testSceneList2.size()-1}">
                '${testSceneList2[i].model}',
                </c:forEach>
            ],
        },
        toolbox: {
            show : true,
            feature : {
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['bar', 'line']},
                restore : {show: true},
                saveAsImage : {show: true}
            },
            left: 'right',
            orient: 'vertical'
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['社交','影音/媒体','游戏','阅读/浏览','自研'],
                axisLabel : {
                    interArrival : 0,
                    // rotate: -30,
                },
            }
        ],
        yAxis : [
            {
                type: 'value',
                name: '平均值总和',
                min: 0,
                max: 36.0,
                interval: 6,
                axisLabel: {
                    formatter: '{value} s'
                }

            },
        ],
        series : [
            <c:forEach var="i" begin="0" end="${testSceneList2.size()-1}">
            {
                name:'${testSceneList2[i].model}',
                type:'bar',
                data:[
                    '${testSceneList2[i].social_sum}',
                    '${testSceneList2[i].video_media_sum}',
                    '${testSceneList2[i].game_sum}',
                    '${testSceneList2[i].read_browse_sum}',
                    '${testSceneList2[i].self_innovate_sum}',
                ],
                /*markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },*/
                /*markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }*/
            },
            </c:forEach>


        ]
    };
    warm_boot_chart.setOption(option);
</script>