Echarts 同时显示多图（附带 调整标题和图例说明的相对位置以及字体大小的方法）

有一个课程作业要做数据可视化，用到了Echarts，老师要求不能只有一个图表，让我们加了些柱形图、曲线图，然后我就进行了Echart多图显示的探索，发现很简单

第一步，在HTML页面，添加div块，记得要标上id号（不能重复哦）

多图展示，要多少个图，就加多少个div即可，如果图之间间隔太小，可以直接简单粗暴，用一个style 然后加上 margin-top 样式简单调整即可

  <!--可视化展示-->
        <div>
             <!--多图展示，要多少个图，就加多少个div即可，如果图之间间隔太小，可以直接简单粗暴，用一个style 然后加上 margin-top 样式简单调整即可-->
            <div id="line_smooth" style="height: 350px;margin-top: 50px"></div>
            <div id="bar" style="height: 350px;margin-top: 50px"></div>
        
        </div>

第二步，js文件添加初始化内容（下面代码中包含了 如何调整标题 图例说明 相对位置 字体大小）

 var line_smooth = echarts.init(document.getElementById('line_smooth'));
 var bar = echarts.init(document.getElementById('bar'));
// 曲线图的option 不同的图标的option不同哦
option_line = {
        title: {
            // 调整标题相对位置，左右 （该部分仅为了说明用法，可以删除）
            left:'35%',
            text: '境外输入趋势'
            // 调整标题字体大小 注意echart字体大小是不需要带单位的
            textStyle:{
                fontSize:20
            }
        },
         // 调整图例说明的相对位置，左右 还有字体大小（该部分仅为了说明用法，可以删除）
        legend: {
            left: '38%',
             textStyle:{
                fontSize:10
            }
         },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
         },
          xAxis: {
        type: 'category',
         // x轴显示内容  
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
        yAxis: {
            type: 'value'，
             // y轴显示内容 可以自己添加
            data:[]
        },
        series: [{
            type: 'line',
            smooth: true,
            itemStyle : { normal: {label : {show: true}}},
            name:"境外输入趋势"
        }]
    };

// 设置了曲线图的option后要进行setOption
    line_smooth.setOption(option_line);


// 柱形图的option 
    option_bar ={
          title: {
            text: '境外输入Top10省市'
        },
        xAxis: {
                type: 'category',
                data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
                 {
                        // type=bar 显示效果就是 柱形图
                        type: 'bar',
                         // barCategoryGap  调整柱线之间的间距
                        barCategoryGap: '50%',
                        barGap: '10%',
                        itemStyle: {
                            // 这个是为了渐变色
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#ff7182'},
                                    {offset: 0.5, color: '#ff3544'},
                                    {offset: 1, color: '#ff3c16'}
                                ]
                            )
                        },

                 }
        ]
    };

// 柱形图的option后要进行setOption
bar.setOption(option_bar);

最后上效果图

（我后面自己动态加载了数据，上面那段仅仅是初始化代码，若想要有数据显示，要在初始化代码中加入数据），是不是还不错，若对你有帮助，请给我点个赞，非常感谢！！！

附上百度echarts 测试工具（可以自己上去多玩玩）地址https://echarts.apache.org/examples/zh/editor.html?c=bar-gradient