第二部分展示多个图表

文章目录

第二部分展示多个图表
2. 展示多个图表
总结

2. 展示多个图表

导入多个图表其实很简单,只需在第一个案例的基础上,在创建一个新的dom,初始新的实例,配置对应的内容

展示案例图:

代码:

  // 基于准备好的dom，初始化echarts实例
    let box1 = document.querySelector('.box1')
    let box2 = document.querySelector('.box2')
    // 使用init方法,初始化echarts的实例
    let myCharts1 = echarts.init(box1)
    let myCharts2 = echarts.init(box2)
    // 设置配置项
    myCharts1.setOption({
        // title配置项专门设置标题
        title:{
            text:'echarts的基本使用(我是主标题)',
            subtext:'我是副标题',
            // 设置标题的位置
            left:'center',
            // 设置主标题字体样式
            textStyle:{
                color:"red",
                fontWeight:'bold',
                fontFamily:'微软雅黑'
            },
            // 设置副标题字体样式
            subtextStyle:{
                color:"#555",
                fontWeight:'lighter',
                fontFamily:'微软雅黑'
            }
        },
        // x轴
        xAxis:{
            data:['衣服','食品','生活用品','家具','厨具','裤子']
        },
        // y轴
        yAxis:{
            // 设置是否显示y轴线
            axisLine:{
                show:true
            },
            // 设置是否显示y轴刻度
            axisTick:{
                show:true
            }
        },
        // 设置图表的类型
        series:[
            {
                type:'bar',
                data:[10,45,23,67,30,12]
            }
        ]
    })


    myCharts2.setOption({
        title:{
            text:'我是第二个图表(主标题)',
            subtext:'我是副标题',
            left:'center'
        },
        xAxis:{
            data:['衣服','食品','生活用品','家具','厨具','裤子']
        },
        yAxis:{
            axisLine:{
                show:true
            },
            axisTick:{
                show:true
            }
        },
        series:{
            type:"line",
            data:[10,53,20,82,60,30]
        }
    })