在ECharts中,要配置柱状图和折线图混合的效果,通常需要使用两个系列(series),一个用于柱状图,另一个用于折线图。以下是一个简单的示例:
option = {
    title: {
        text: '柱状图和折线图混合示例'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data:['柱状图', '折线图']
    },
    xAxis: [
        {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '柱状图',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                formatter: '{value} ml'
            }
        },
        {
            type: 'value',
            name: '折线图',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} °C'
            }
        }
    ],
    series: [
        {
            name: '柱状图',
            type: 'bar',
            data: [50, 120, 180, 80, 70, 110, 130]
        },
        {
            name: '折线图',
            type: 'line',
            yAxisIndex: 1,
            data: [15, 10, 25, 10, 20, 15, 30]
        }
    ]
};

在这个例子中,我们定义了两个系列,一个是柱状图(type: 'bar'),另一个是折线图(type: 'line')。它们分别在 y 轴上使用不同的坐标轴(yAxisIndex: 0 和 yAxisIndex: 1),确保它们在同一图表中但在不同的轴上。

可以根据实际需求调整数据和其他配置项。


转载请注明出处:http://www.zyzy.cn/article/detail/5404/ECharts