笔记：Echarts - 柱状折线图

最新推荐文章于 2023-12-07 16:13:30 发布

小虾Suki

最新推荐文章于 2023-12-07 16:13:30 发布

阅读量504

点赞数

分类专栏：前端开发文章标签： echarts3-0

本文链接：https://blog.csdn.net/qq_39108466/article/details/78478094

版权

前端开发专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柱状折线图demo</title>
    <style>
        .section {
            width: 915px;
            border: 1px solid #ccc;
        }
        .chart {
            width: 810px;
            height: 400px;
        }
    </style>
</head>
<body>
<div class="section">
    <div class="chart" id="chartBarLineDemo"></div>
</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script>

    var axisData = ["语文", "政治", "地理", "数学", "英语", "历史", "生物", "音乐", "体育", "物理", "化学", "美术"];
    var seriesBarData = [4, 5, 9, 8, 6, 5, 4, 8, 9, 8, 6, 4];
    var seriesLineData = [20, 22, 33, 45, 63, 100, 66, 80, 70, 50, 60, 90];
    initChartBarLine("chartBarLineDemo", axisData, seriesBarData, seriesLineData);

    /**
     * 初始化柱状折线图
     * @param domChartId 统计图dom容器id
     * @param axisData 轴线label数组
     * @param seriesBarData 柱状图series data数组
     * @param seriesLineData 折线图series data数组
     */
    function initChartBarLine(domChartId, axisData, seriesBarData, seriesLineData) {
        var chart = echarts.init(document.getElementById(domChartId));
        var opt = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data: ['≥60%（单位：个）', '平均值（%）'],
                y: 'bottom' // 图例位置
            },
            xAxis: [{
                type: 'category',
                data: axisData
            }
            ],
            yAxis: [{
                type: 'value',
                name: '人数',
//                    min: 0,
                max: Math.max.apply(Math, seriesBarData) * 3 // 让柱状图在折线图下方
                /*,interval: 50,
                axisLabel: {
                    formatter: '{value} 个'
                }*/
            },
                {
                    type: 'value',
                    name: '学科兴趣指数均值'/*,
                    min: 0,
                    max: 25,
                    rmatter: '{value}%'// 单位
                    }*/
                }
            ],
            series: [{
                name: '≥60%（单位：个）',
                type: 'bar',
                data: seriesBarData,
                barWidth: 10,
                itemStyle: {
                    emphasis: {//柱形图圆角
                        barBorderRadius: 30
                    },
                    normal: {
                        barBorderRadius: [10, 10, 10, 10],//柱形图圆角，初始化效果
                        color: '#2196f3'
                    }
                }
            },
                {
                    name: '平均值（%）',
                    type: 'line',
                    symbolSize: 10,//设置折点大小
                    yAxisIndex: 1,
                    data: seriesLineData,
                    itemStyle: {
                        normal: {
                            color: '#2ecdbb'
                        }
                    },
                    label: {
                        show: true
                    }
                }
            ],

            label: {
                normal: {
                    show: true, //显示数据
                    position: 'top'
                }
            }
        };
        chart.setOption(opt);
    }
</script>
</body>
</html>

效果图：
这里写图片描述

小虾Suki

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
笔记：Echarts - 柱状折线图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>柱状折线图demo</title> <style> .section { width: 915px; border: 1px solid #ccc; }
复制链接

扫一扫

专栏目录