echarts多种特殊柱状图表实现的方式

简介: 这里是对echarts特殊柱状图表实现的方式记录
学习过程中将笔记跟大家分享,希望对大家也有所帮助,共同成长进步💪~\
如果大家喜欢,可以点赞或留言💕 ~~,谢谢大家⭐️⭐️⭐️~

这里是对echarts特殊柱状图表实现的方式记录

1.echarts双柱状图里边带小方格

image.png

代码如下:

mychart() {
    myChart = echarts.init(document.getElementById('profitTotal5'));
    let colors = [{
        one: "#67E0E3",
        two: "#0181DE",
    }, {
        one: "#9336FF",
        two: "#146AFF",
    }, {
        one: "#082757",
        two: "#02B093",
    }];
    let echartData = [{
        name: "火电",
        value: 254.00,
        value2: 254.00,
    },
    {
        name: "水电",
        value: 914.87,
        value2: 254.00,
    },
    {
        name: "风电",
        value: 319.59,
        value2: 254.00,
    },
    {
        name: "光伏",
        value: 738.01,
        value2: 254.00,
    },
    {
        name: "煤炭",
        value: 448.69,
        value2: 254.00,
    },
    {
        name: "化工",
        value: 566.43,
        value2: 254.00,
    },
    {
        name: "运输",
        value: 16.31,
        value2: 2254.00,
    },
    {
        name: "其他",
        value: 1021.87,
        value2: 254.00,
    }
    ];
    let xAxisData = echartData.map(v => v.name);
    let yAxisData = echartData.map(v => v.value);
    let yAxisData2 = echartData.map(v => v.value2);

    //计算最大值
    // let maxy = Math.max(...yAxisData)
    let maxy = 4000;
    let yAxisDatabig = [];
    yAxisData.map(item => {
        yAxisDatabig.push(maxy)
    })
    option = {
        grid: {
            left: '15%',
            top: '20%',
            right: '8%',
            bottom: '28%',
        },
        legend: {
            data: ['累计投资计划', '累计投资完成额'],
            orient: "horizontal",//vertical
            x: 'center',
            // y: 'bottom',
            bottom: '4%',
            icon: "roundRect",
            selectedMode: false,//取消图例上的点击事件
            itemWidth: 16,  // 设置宽度
            itemHeight: 10, // 设置高度
            itemGap: 10,// 设置间距
            textStyle: {
                //文字根据legend显示 
                color: "#FFFFFF",
                fontSize: 12,
            },
        },
        xAxis: {
            type: 'category',
            data: xAxisData,
            triggerEvent: true,//设置坐标点击事件
            axisLine: {
                show: false
            },
            axisLabel: {
                color: "#FFFFFF",
                fontSize: '14',
            },
            axisTick: {
                // show: false,
                alignWithLabel: true,
                lineStyle: {
                    color: 'rgba(12, 87, 169, 1)',
                    type: 'solid'
                }
            }
        },
        yAxis: {
            type: 'value',
            max: maxy,
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#0C4F81"
                }
            },
            nameTextStyle: {
                color: '#81ACCF',
                fontSize: '60%',
            },
            axisLabel: {
                color: "#4F88BD",
                fontSize: '12',
                formatter: '{value}'
            },
            splitLine: {
                lineStyle: {
                    type: "dotted",
                    color: "#0C4F81"
                }
            },
            axisTick: {
                show: false
            },
        },
        series: [
            {
                name: '累计投资计划',
                type: 'pictorialBar', //设置类型为象形柱状图
                symbol: 'roundRect', //图形类型,带圆角的矩形
                symbolOffset: [-5, 0],
                symbolMargin: '1', //图形垂直间隔
                barWidth: '14', //柱图宽度
                // animationDelay: (dataIndex, params) => {
                //     //每个图形动画持续时间
                //     return params.index * 50;
                // },
                itemStyle: {
                    normal: {
                        color:'#FF4A8C',
                    },
                },
                //设置图表上方显示文字
                //label: {
                    //show: true,
                    //position: 'top',
                    //color: '#ffffff',
                    //zlevel: 4,
                    //z: 10,
                    //formatter:'{c}'
                //},
                z: 1,
                barGap: 0, //柱间距离
                symbolRepeat: true, //图形是否重复
                symbolSize: [14, 5], //图形元素的尺寸
                animationEasing: 'elasticOut', //动画效果
                stack: '2',
                data: yAxisData,
            },
            {
                name: '累计投资完成额',
                type: 'pictorialBar', //设置类型为象形柱状图
                symbol: 'roundRect', //图形类型,带圆角的矩形
                barWidth: '14', //柱图宽度
                symbolOffset: [5, 0],
                barMaxWidth: '26', //最大宽度
                symbolMargin: '1', //图形垂直间隔
                // animationDelay: (dataIndex, params) => {
                //     //每个图形动画持续时间
                //     return params.index * 50;
                // },
                itemStyle: {
                    normal: {
                        color: '#359EFF',
                    },
                },
                z: 1,
                barGap: 0, //柱间距离
                symbolRepeat: true, //图形是否重复
                symbolSize: [14, 5], //图形元素的尺寸
                animationEasing: 'elasticOut', //动画效果
                stack: '1',
                data: yAxisData2,
            },
            {
                name: '背景',
                type: 'bar',
                barWidth: '15',
                barGap: 0.5,
                itemStyle: {
                    normal: {
                        color: '#21477F',
                        barBorderRadius: 6,
                        borderColor: '#AB3F66',
                    },
                },
                z: -1,
                symbolOffset: [5, 0],
                data: yAxisDatabig,
            },
            {
                name: '背景',
                type: 'bar',
                barWidth: '15',
                barGap: 0.5,
                itemStyle: {
                    normal: {
                        color: '#21477F',
                        barBorderRadius: 6,
                        borderColor: '#53ACFF',
                    },
                },
                z: -1,
                symbolOffset: [5, 0],
                data: yAxisDatabig,
            },
        ]
    };
    myChart.setOption(option);
    window.onresize = () => {
        myChart.resize()
    }
    window.addEventListener('resize', () => {
        myChart.resize()
    })
},

2.echarts双柱状图制作

image.png

代码如下:

mychart() {
    myChart = echarts.init(document.getElementById('profitTota4'));
    let colors = [{
        one: "#F6F68C",
        two: "#FC8F3E",
    }, {
        one: "#F6F68C",
        two: "#FC8F3E",
    }, {
        one: "#F6F68C",
        two: "#FC8F3E",
    }];
    let echartData = [{
        name: "火电",
        value: 254.00,
        value2: 454.00,
    },
    {
        name: "水电",
        value: 514.87,
        value2: 454.00,
    },
    {
        name: "风电",
        value: 319.59,
        value2: 454.00,
    },
    {
        name: "光伏",
        value: 438.01,
        value2: 254.00,
    },
    {
        name: "煤炭",
        value: 748.69,
        value2: 454.00,
    },
    {
        name: "化工",
        value: 756.43,
        value2: 454.00,
    },
    {
        name: "运输",
        value: 316.31,
        value2: 454.00,
    },
    {
        name: "其他",
        value: 321.87,
        value2: 454.00,
    }
    ];
    let xAxisData = echartData.map(v => v.name);
    let yAxisData = echartData.map(v => v.value);
    let yAxisData2 = echartData.map(v => v.value2);
    option = {
        color: ['#00D1B6'], //图例颜色
        grid: {
            left: '15%',
            top: '20%',
            right: '8%',
            bottom: '28%'
        },
        legend: {
            data: ['年度投资计划', '年度投资完成额'],
            orient: "horizontal",//vertical
            x: 'center',
            // y: 'bottom',
            bottom: '4%',
            icon: "roundRect",
            selectedMode: false,//取消图例上的点击事件
            itemWidth: 16,  // 设置宽度
            itemHeight: 10, // 设置高度
            itemGap: 10,// 设置间距
            textStyle: {
                //文字根据legend显示 
                color: "#FFFFFF",
                fontSize: 12,
            },
        },
        axisPointer: {
            type: 'shadow',
            label: {
                show: true
            }
        },
        xAxis: {
            type: 'category',
            data: xAxisData,
            axisLine: {
                show: false
            },
            axisLabel: {
                color: "#FFFFFF",
                fontSize: '14',
                // interval: 0,
                // rotate: "45"//文字旋转角度
            },
            axisTick: {
                // show: false,
                alignWithLabel: true,
                lineStyle: {
                    color: '#0C4F81',
                    type: 'solid'
                }
            }
        },
        yAxis: {
            type: 'value',
            // max:100,
            axisLine: {
                lineStyle: {
                    color: "#0C4F81",
                }
            },
            nameTextStyle: {
                color: '#81ACCF',
                fontSize: '60%',
            },
            axisLabel: {
                color: "#4F88BD",
                fontSize: '12',
                formatter: '{value}'
            },
            splitLine: {
                lineStyle: {
                    type: "dotted",
                    color: "#0C4F81"
                }
            },
            axisTick: {
                show: false
            }
        },
        series: [
            {
                name: '年度投资计划',
                barMaxWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: [100, 0, 100, 0],
                        label: {
                            show: false,
                            position: 'top',
                            color: '#ffffff'
                        },
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: "rgba(255, 213, 45, 1)"
                        },
                        {
                            offset: 1,
                            color: "rgba(0, 255, 240, 1)"
                        }
                        ]),
                    }
                },
                data: yAxisData,
                type: 'bar'
            },
            {
                name: '年度投资完成额',
                barMaxWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: [100, 0, 100, 0],
                        label: {
                            show: false,
                            position: 'top',
                            color: '#ffffff'
                        },
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: "rgba(214, 126, 236, 1)"
                        },
                        {
                            offset: 1,
                            color: "rgba(123, 118, 252, 1)"
                        }
                        ]),
                    }
                },
                data: yAxisData2,
                type: 'bar'
            },
        ]
    };
    myChart.setOption(option);
    window.onresize = () => {
        myChart.resize()
    }
    window.addEventListener('resize', () => {
        myChart.resize()
    })
    },
感谢大家阅读⭐️⭐️⭐️,如果喜欢,可以点赞或留言哟💕💕💕
后续会持续更新记录😊~~~
目录
相关文章
|
2月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
70 1
|
2月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
358 0
|
3月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
4月前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
508 1
微信小程序使用echarts图表(ec-canvas)
|
4月前
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
4月前
Echarts——如何默认选中图表并显示tooltip
Echarts——如何默认选中图表并显示tooltip
71 1
|
4月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
4月前
|
JavaScript
Echarts——VUE中非根节点时不显示图表也无报错
Echarts——VUE中非根节点时不显示图表也无报错
39 1
|
5月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示
循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示
|
5月前
|
Apache
Axure rp9 引入Echarts图表 |手动引入图表 Apache Echarts
Axure rp9 引入Echarts图表 |手动引入图表 Apache Echarts
306 1

热门文章

最新文章