echarts堆叠柱状图加折线图详细介绍

最新推荐文章于 2023-07-18 10:18:54 发布

小新爱编程

最新推荐文章于 2023-07-18 10:18:54 发布

阅读量5.5k

点赞数 7

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/z45351/article/details/122346546

版权

先介绍一下成品图
在这里插入图片描述
这个图形主要就是采用echarts，直接上代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
   var option = {
        color: ['#EFA90D', '#006BB0', '#059341','#DC2F1F'], // 柱子的颜色，几个柱子就可以设置几个颜色
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            top: 8,
            itemWidth: 10,
            itemHeight: 10,
            data: ['药品费','耗材费', '检验检查费', '其他费','偏差级别','药品费偏差级别',  '耗材费偏差级别','检验检查费偏差级别', '其他费偏差级别']  
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                axisLabel: {
                    color: '#999999',
                },
                axisLine: {show: false},
                axisTick: {show: false},
                boundaryGap: ['20%', '20%'],
                data:  ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '均费',
                nameTextStyle: {
                    color: '#999999',
                },
                axisLine: {show: false},
                axisTick: {show: false},
                axisLabel: {
                    margin: 2,
                    interval: 15,
                    color: '#999999',
                }
            }, {
                type: 'value',
                name: '增长率(%)',
                nameTextStyle: {
                    color: '#999999',
                },
                splitLine:{show: false},//去除网格线
                axisLine: {show: false},
                axisTick: {show: false},
                axisLabel: {
                    margin: 2,
                    interval: 15,
                    color: '#999999',
                }
            }
        ],
        series: [
            {
                name: '药品费',
                type: 'bar', // 这个是柱状图的类型，设置成这个就是柱状图
                barWidth: 20, // 柱子的宽度，设置一个就行了，别的也会采用这个宽度
                stack: 'Ad', // 设置这个就会成为堆叠柱状图
                data:  [4, 4, 5, 3, 3, 3, 3, 3, 3, 3, 3,3]
            },
            {
                name: '耗材费',
                type: 'bar',
                stack: 'Ad',
                data: [4, 4, 5, 3, 3, 3, 3, 3, 3, 3, 3,3]
            },
            {
                name: '检验检查费',
                type: 'bar',
                stack: 'Ad',
                data:  [4, 4, 5, 3, 3, 3, 3, 3, 3, 3, 3,3]
            },
            {
                name: '其他费',
                type: 'bar',
                stack: 'Ad',
                data: [4, 4, 5, 3, 3, 3, 3, 3, 3, 3, 3,3]
            },
            {
                name: '偏差级别',
                type: 'line', // 这个就是折线图的类型，设置成这个就是折线图了。
                smooth: true,
                color:['#1D1815'],  //折线条的颜色
                yAxisIndex: 1,
                itemStyle: {
                    shadowBlur: 2,
                },
                data:  [30, 60, 80, 90, 10, 20, 30, 15, 16, 15, 15,15]
            },
            {
                name: '药品费偏差级别',
                type: 'line',
                color:['#EFA90D'],  //折线条的颜色
                smooth: true,
                yAxisIndex: 1,
                itemStyle: {
                    shadowBlur: 2,
                },
                data:  [31, 62, 89, 40, 20, 30, 40, 25, 26, 25, 25,25]
            },
            {
                name: '耗材费偏差级别',
                type: 'line',
                smooth: true,
                color:['#006BB0'],  //折线条的颜色
                yAxisIndex: 1,
                itemStyle: {
                    shadowBlur: 2,
                },
                data:  [20, 40, 40, 60, 10, 20, 30, 15, 16, 15, 15,15]
            },
            {
                name: '检验检查费偏差级别',
                type: 'line',
                color:['#059341'],  //折线条的颜色
                smooth: true,
                yAxisIndex: 1,
                itemStyle: {
                    shadowBlur: 2,
                },
                data:  [30, 60, 84, 25, 14, 23, 16, 12, 16, 16, 16,16]
            },
            {
                name: '其他费偏差级别',
                type: 'line',
                color:['#DC2F1F'],  //折线条的颜色
                smooth: true,
                yAxisIndex: 1,
                itemStyle: {
                    shadowBlur: 2
                },
                data:  [-21, 40, 60, 90, 15, 25, 35, 10, 14, 12, 15,15]
            },
        ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>