echarts柱状立体图

最新推荐文章于 2024-07-11 09:38:37 发布
拒绝码字的码农
最新推荐文章于 2024-07-11 09:38:37 发布
阅读量220
点赞数 3
文章标签： echarts 前端 javascript
本文链接：https://blog.csdn.net/JAVmx/article/details/137922740
版权
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="./js/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 800px;height:700px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 模拟数据
    const aDataList = [
        { name: '贾汪区', value: 421 },
        { name: '丰县', value: 563 },
        { name: '沛县', value: 147 },
        { name: '铜山区', value: 365 },
        { name: '睢宁区', value: 413 },
        { name: '新沂区', value: 741 },
        { name: '邳州市', value: 951 },
        { name: '徐州市', value: 951 }
    ];

    const bDataList = [
        { name: '贾汪区', value: 421 },
        { name: '丰县', value: 563 },
        { name: '沛县', value: 147 },
        { name: '铜山区', value: 365 },
        { name: '睢宁区', value: 413 },
        { name: '新沂区', value: 741 },
        { name: '邳州市', value: 951 },
        { name: '徐州市', value: 951 }
    ];
    const cDataList = [
        { name: '贾汪区', value: 421 },
        { name: '丰县', value: 563 },
        { name: '沛县', value: 147 },
        { name: '铜山区', value: 365 },
        { name: '睢宁区', value: 413 },
        { name: '新沂区', value: 741 },
        { name: '邳州市', value: 951 },
        { name: '徐州市', value: 951 }
    ];

    option = {
        backgroundColor:"#e5e5e5",
        xAxis: [
            {
                type: 'category',
                data: aDataList.map((item) => item.name)
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            // a
            {
                name: '去年人数',
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 1, 0, 0,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(255,208,0,0.30)' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#FF9E00' // 100% 处的颜色
                                }
                            ],
                            false
                        )
                    }
                },
                data: aDataList.map((item) => item.value),
                barGap: 0
            },
            {
                name: '去年人数',
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 1, 0, 0,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(255,208,0,0.30)' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#FFB000' // 100% 处的颜色
                                }
                            ],
                            false
                        )
                    }
                },
                barGap: 0,
                data: aDataList.map((item) => item.value),
                // label: {
                //     show: true,
                //     position: 'top',
                //     textStyle: {
                //         color: 'white',
                //         fontSize: 10
                //     }
                // }
            },
            {
                name: '去年人数',
                tooltip: {
                    show: false
                },
                type: 'pictorialBar',
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#FFC000',
                    color: '#FFC000' // 控制顶部方形的颜色
                },
                symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',
                symbolSize: ['20', '7'], // 第一个值控制顶部方形大小
                symbolOffset: ['-20', '-4'], // 控制顶部放行 左右和上下
                symbolRotate: -16,
                symbolPosition: 'end',
                data: aDataList.map((item) => item.value),
                z: 3
            },

            // b
            {
                name: '今年人数',
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,1,0,0,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(3,200,195,0.20)' // 100% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(3,200,195,.5)' // 0% 处的颜色
                                }
                            ],
                            false
                        )
                    }
                },
                data: bDataList.map((item) => item.value),
                barGap: 0
            },
            {
                name: '今年人数',
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 1, 0, 0,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(3,200,195,0.20) ' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(3,200,195,.9)' // 100% 处的颜色
                                }
                            ],
                            false
                        )
                    }
                },
                barGap: 0,
                data: bDataList.map((item) => item.value),
                // label: {
                //     show: true,
                //     position: 'top',
                //     textStyle: {
                //         color: 'white',
                //         fontSize: 10
                //     }
                // }
            },
            {
                name: '今年人数',
                tooltip: {
                    show: false
                },
                type: 'pictorialBar',
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#03C8C3',
                    color: '#03C8C3' // 顶部方块的颜色
                },
                symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',
                symbolSize: ['20', '7'], // 第一个值控制顶部方形大小
                symbolOffset: ['0', '-4'], // 控制顶部放行 左右和上下
                symbolRotate: -16,
                symbolPosition: 'end',
                data: bDataList.map((item) => item.value),
                z: 3
            },
            // c
            {
                name: '今年人数',
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,1,0,0,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(3,20,195,0.20)' // 100% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(3,20,195,.5)' // 0% 处的颜色
                                }
                            ],
                            false
                        )
                    }
                },
                data: cDataList.map((item) => item.value),
                barGap: 0
            },
            {
                name: '今年人数',
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 1, 0, 0,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(3,200,195,0.20) ' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(3,20,195,.9)' // 100% 处的颜色
                                }
                            ],
                            false
                        )
                    }
                },
                barGap: 0,
                data: cDataList.map((item) => item.value),
                // label: {
                //     show: true,
                //     position: 'top',
                //     textStyle: {
                //         color: 'white',
                //         fontSize: 10
                //     }
                // }
            },
            {
                name: '今年人数',
                tooltip: {
                    show: false
                },
                type: 'pictorialBar',
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#03C8C3',
                    color: '#03C8C3' // 顶部方块的颜色
                },
                symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',
                symbolSize: ['20', '7'], // 第一个值控制顶部方形大小
                symbolOffset: ['20', '-4'], // 控制顶部放行 左右和上下
                symbolRotate: -16,
                symbolPosition: 'end',
                data: cDataList.map((item) => item.value),
                z: 3
            },
        ]
    };








    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


</script>
</body>
</html>
symbolOffset: ['-20', '-4'], // 控制顶部方位的位置左右和上下