使用echarts的多柱状图和多折线图做结合

最新推荐文章于 2023-12-07 16:13:30 发布

eternity_zzy

最新推荐文章于 2023-12-07 16:13:30 发布

阅读量4k

点赞数 4

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/eternity_zzy/article/details/109811460

本文介绍了如何利用Echarts库创建一个同时包含多个柱状图和多个折线图的组合图表，展示数据的对比和趋势。通过配置项设置，可以自定义颜色、标签、数据项等，实现灵活的图表设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var myCharts = echarts.init(document.getElementById('hdqkyc1'), myEchartsTheme);
var mData = [50, 100, 150, 80, 120, 150, 200, 250, 220, 250, 300, 350, 400, 380, 440, 450, 500, 550, 500];
var option = {
    backgroundColor:'#FFFFFF',
    tooltip: {
        trigger: 'axis',
    },
    legend: {
        data:['考试','作业','考勤','练习']
    },
    title:{
        text:'',
        left:'center',
        textStyle:{
            color:'#d5d5d5',
            fontSize:13,
        }
    },
    grid:{
        height:'62%',
        top:'5%',
        width:'80%',
        left:'12%'
    },
    xAxis: [{
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
        axisLabel:{
            color:'#00000',
            fontSize:10,
            interval:0,
        }
    }, ],
    yAxis: {
        type: 'value',
        interval:500,
        axisLabel:{
            color:'#757575',
            fontSize:10
        }
    },
    series: [
        {
            name:'考试',
            data: [120, 180, 150, 80, 70, 110, 130, 130, 130, 130, 130, 130],
            type: 'bar',
            varWidth:'12px',
            itemStyle:{
                color:'#CC0000'
            }
        },{
            name:'作业',
            data: [40, 55, 32, 55, 88, 4, 25, 4, 58, 33, 99, 100],
            type: 'bar',
            varWidth:'12px',
            itemStyle:{
                color:'#009999'
            }
        },,{
            name:'考勤',
            data: [154, 21, 44, 88, 98, 45, 77, 22, 75, 52, 55, 22],
            type: 'bar',
            varWidth:'12px',
            itemStyle:{
                color:'#FFCC99'
            }
        },,{
            name:'练习',
            data: [125, 142, 55, 74, 35, 55, 58, 55, 88, 365, 44 ,125],
            type: 'bar',
            varWidth:'12px',
            itemStyle:{
                color:'#666666'
            }
        },
        {
            xAxisIndex:1,
            data: [120, 200, 150, 80, 70, 110, 130, 130, 130, 130, 130, 130],
            type: 'line',
            itemStyle:{
                color:'#CC0000'
            },
            symbol:'none',
            silent: true
        },
        {
            xAxisIndex:1,
            data: [40, 55, 32, 55, 88, 4, 25, 4, 58, 33, 99, 100],
            type: 'line',
            itemStyle:{
                color:'#009999'
            },
            symbol:'none',
            silent: true
        },
        {
            xAxisIndex:1,
            data: [154, 21, 44, 88, 98, 45, 77, 22, 75, 52, 55, 22],
            type: 'line',
            itemStyle:{
                color:'#FFCC99'
            },
            symbol:'none',
            silent: true
        },
        {
            xAxisIndex:1,
            data: [125, 142, 55, 74, 35, 55, 58, 55, 88, 365, 44 ,125],
            type: 'line',
            itemStyle:{
                color:'#666666'
            },
            symbol:'none',
            silent: true
        },
    ]
};
// 增加了一个隐藏的x轴，用来控制线图的点的位置
option.xAxis[1] = {
    type: 'value',
    max: option.xAxis[0].data.length * 100,
    show: false
}
option.series[6].data = option.series[6].data.map(
    (x, i) =>
        [27 + i * 100, x]
);
option.series[7].data = option.series[7].data.map((x, i) => [30 + i * 100, x]);
option.series[8].data = option.series[8].data.map((x, i) => [50 + i * 100, x]);
option.series[9].data = option.series[9].data.map((x, i) => [60 + i * 100, x]);
myCharts.setOption(option);

最终效果: