vue.js - Echarts - 如何在vuejs中绘制不同数据值的组合图表

Question

我正在使用 Echarts 来表示我的 VueJS 应用程序中的数据，并且遇到了一个问题，我需要绘制具有多种组合的 echart。问题是 EChart 期望所有系列对象在数据对象中具有相同数量的值。是否可以让它使用不同的值？

我的代码：

series : [
        {
            z: -1, // optional, makes the yAxis' splitLines appear on top
            name:'联盟广告',
            type:'line',
        smooth: true,
        showSymbol: false,
        lineStyle: {
            width:0
        },
            areaStyle: {color: '#708090'},
            data:[170, 182, 161, 184, 160, 180, 165]
        },
        {
            z: -1, // optional, makes the yAxis' splitLines appear on top
            name:'邮件营销',
            type:'line',
        lineStyle: {
            width:0
        },
        smooth: true,
        showSymbol: false,
            areaStyle: {color: '#F3F3F3', opacity: 1},
            data:[120, 132, 111, 134, 110, 130, 115]
        },{
        data: [80, 92, 71, 84, 60, 85, 170, 183, 205, 255, 300],
        type: 'line',
        smooth: true
    }]

这里前 2 个图表有 7 个值，最后一个有 11 个值。但 Echrats 只考虑 11 个中的前 7 个。

标签： vue.jschartsvuejs2echarts

Answer 1

通过设置为长度为 11 的数组，将一些类别数据添加到您的xAxis对象。xAxis.data

xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']
},

然后您的 ECharts 组件将自动将该数组映射到类别轴上，允许您将限制扩展到 11 而不是 7：