echarts双柱状堆叠图

大力水手~

已于 2024-04-02 12:50:58 修改

阅读量351

点赞数 1

文章标签： echarts 前端 javascript

于 2024-03-29 14:54:11 首次发布

本文链接：https://blog.csdn.net/weixin_44705979/article/details/137145361

版权

文章详细描述了一个使用JavaScript进行数据可视化的option对象，包含图表类型（如柱状图）、轴标签、数据zoom、堆叠设置等，展示了如何配置一个带有多个堆叠系列的折线图实例。

摘要由CSDN通过智能技术生成

效果
在这里插入图片描述

代码

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (params) {
var res='<div><p>时间：'+params[0].name+'</p></div><hr><div><p>2021：</p></div>' 
for(var i=0;i<params.length;i++){
res+='<p>'+params[i].marker+params[i].seriesName+':'+params[i].data+'</p>'
if(i == 3){
    res+='<hr><div><p>2022：</p></div>'
}
}
return res;
},
    },
    legend: {
        data: ['村镇办', '南屿村']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
        }
    ],
    dataZoom: [
    {
        type: 'slider',
        show: true,
        xAxisIndex: [0],
        left: '5%',
        start: 0, //数据窗口范围的起始百分比
        end:100 // 滚动条所占百分比
    },
    {
        type: 'inside',
        xAxisIndex: [0],
        start: 0,
        end: 36
    }
],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '车企',
            type: 'bar',
            barWidth: 35,
            stack: '1',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '非车企',
            type: 'bar',
            stack: '1',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '电商',
            type: 'bar',
            stack: '1',
            data: [55, 66, 77, 88, 99, 20, 36]
        },
        {
            name: '渠道',
            type: 'bar',
            stack: '1',
            data: [555, 566, 577, 588, 599, 520, 536]
        },
        {
            name: '车企',
            type: 'bar',
            barWidth: 35,
            backgroundColor:'#e5e5e5',
            stack: '2',
            data: [620, 732, 701, 734, 1090, 1130, 1120]
        },
        {
            name: '非车企',
            type: 'bar',
            stack: '2',
            data: [120, 132, 101, 134, 290, 230, 220]
        },
        {
            name: '电商',
            type: 'bar',
            stack: '2',
            data: [155, 166, 177, 188, 199, 120, 136]
        },
        
    ]
};