echarts显示多个图表之二（图表之间不联动，只需初始化echarts实例一次）

一、示例如下，表格之间不存在联动

二、options配置

1、配置grid ,height,top需根据具体需要进行配置

grid: [{
left: '3%',
right: '4%',
bottom: '3%',
height:'100px',
containLabel: true,
},{
left: '3%',
right: '4%',
bottom: '3%',
height:'100px',
top:'180px',
containLabel: true
}],

2、配置xAxis ，需要特别设置gridIndex选项，标识当前X轴对应的grid索引

xAxis: [{
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日'],
gridIndex: 0,
},
{
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日'],
gridIndex: 1,
}
],

3、配置yAxis，需要特别设置gridIndex选项，标识当前Y轴对应的grid索引

yAxis: [{
type: 'value',
gridIndex: 0,
},
{
type: 'value',
gridIndex: 1,
}
],

5、配置series中yAxis ,xAxis

series: [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210],
xAxisIndex: 0,
yAxisIndex: 0,
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310],
xAxisIndex: 1,
yAxisIndex: 1,

},

]

三、html代码，请自行下载echarts包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 400px;height:550px;"></div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '折线图堆叠'
        },
        legend:[
            {
                data:['邮件营销','联盟广告']
            }] ,
        tooltip: {
            show: true,
            trigger: 'axis',
        },
        grid: [{
            left: '3%',
            right: '4%',
            bottom: '3%',
            height:'100px',
            containLabel: true,
            top:'50px',
        },{
            left: '3%',
            right: '4%',
            bottom: '3%',
            height:'100px',
            top:'180px',
            containLabel: true
        }],
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: ['周一','周二','周三','周四','周五','周六','周日'],
            gridIndex: 0,
        },
            {
                type: 'category',
                boundaryGap: false,
                data: ['周一','周二','周三','周四','周五','周六','周日'],
                gridIndex: 1,
            }
        ],
        yAxis: [{
            type: 'value',
            gridIndex: 0,
        },
            {
                type: 'value',
                gridIndex: 1,
            }
        ],

        series: [
            {
                name:'邮件营销',
                type:'line',
                stack: '总量',
                data:[120, 132, 101, 134, 90, 230, 210],
                xAxisIndex: 0,
                yAxisIndex: 0,
            },
            {
                name:'联盟广告',
                type:'line',
                stack: '总量',
                data:[220, 182, 191, 234, 290, 330, 310],
                xAxisIndex: 1,
                yAxisIndex: 1,

            },

        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


</script>
</body>
</html>

echarts显示多个图表之二（图表之间不联动，只需初始化echarts实例一次）

猜你喜欢