component-Echarts柱状图堆叠图与折线图的实现

最新推荐文章于 2024-05-21 17:27:48 发布

哟哟耶耶

最新推荐文章于 2024-05-21 17:27:48 发布

阅读量236

点赞数 1

分类专栏： component 文章标签： echarts 信息可视化前端

本文链接：https://blog.csdn.net/2301_76671906/article/details/137924176

版权

component 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.效果

2.代码

<!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: ['green', 'red','yellow'], 
        // 提示
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none',
                // 设置背景颜色为白色半透明
                label: {
                    backgroundColor: 'rgba(255, 255, 255, 0.7)', 
                }
            }
        },
        // 标记
        legend: {
            top: 8,
            itemWidth: 10,
            itemHeight: 10,
            data: ['进度1','进度2','进度3', '相差率']  
        },
        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',
                },
                // splitLine:{show: false},//去除网格线
                //设置轴线样式
                axisLine: {show: false},
                // 定制坐标轴上刻度线的样式
                axisTick: {show: false},
                // 坐标轴上标签的样式
                axisLabel: {
                    margin: 2,
                    interval: 15,
                    color: '#999999',
                }
            }
        ],
        series: [
            {
                name: '进度1',
                type: 'bar', // 这个是柱状图的类型，设置成这个就是柱状图
                barWidth: 20, // 柱子的宽度，设置一个就行了，别的也会采用这个宽度
                stack: 'Ad', // 设置这个就会成为堆叠柱状图
                data:  [20, 4, 15, 3, 30]
            },
            {
                name: '进度2',
                type: 'bar',
                // stack 属性都设置为 'stack'，表示这三个个系列将会堆叠在一起显示
                stack: 'Ad',
                data: [0, 20, 50, 30, 23]
            },
            {
                name: '进度3',
                type: 'bar',
                stack: 'Ad',
                data: [0, 60, 20, 3, 30]
            },
            {
                name: '相差率',
                type: 'line',
                color:['#4da6ff'],  //折线条的颜色
                // smooth 是折线图系列中的一个属性，用于设置折线的平滑程度。当 smooth 设置为 true 时，折线会变得更加平滑；当设置为 false 时，折线会保持直线。
                smooth: true,
                yAxisIndex: 0,
                // itemStyle 是用于设置图表数据项样式的属性
                itemStyle: {
                    shadowBlur: 2
                },
                data:  [0, 40, 60, 90, 15, 25, 35, 10, 14, 12, 15,15]
            },
        ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>