关于echart使用数据集的数据格式转化问题

let data = [
    { product: '电脑', count: 223, score: 95.8, price: 8799, sold: 105, month: 1, },
    { product: '手机', count: 635, score: 81.4, price: 2799, sold: 439, month: 1, },
    { product: '笔记本', count: 342, score: 91.2, price: 6299, sold: 127, month: 1, },
    { product: '键盘', count: 988, score: 76.9, price: 399, sold: 655, month: 1, },
    { product: '电脑', count: 473, score: 89.2, price: 7699, sold: 235, month: 2, },
    { product: '手机', count: 575, score: 91.7, price: 2299, sold: 399, month: 2, },
    { product: '笔记本', count: 612, score: 79.8, price: 6799, sold: 327, month: 2, },
    { product: '键盘', count: 1128, score: 84.1, price: 299, sold: 575, month: 2, },
    { product: '电脑', count: 354, score: 89.2, price: 7699, sold: 187, month: 3, },
    { product: '笔记本', count: 578, score: 79.8, price: 6799, sold: 297, month: 3, },
    { product: '键盘', count: 867, score: 84.1, price: 299, sold: 672, month: 3, },
]
// 这种格式的数据集转化为下面这种echart的数据集格式
// [
//  ['month', '电脑', '手机', '笔记本', '键盘'],
//  ['1月', 223, 635, 342, 988],
//  ['2月', 473, 575, 612, 1128],
//  ['3月', 354, 0, 578, 867]
// ]


// 下边是我的代码,感觉有点臃肿
let products = [] // 包括的产品
let source = [] // 最终数据集
let map = {}
products.push('month')
for (let rec of data) {
    map[rec.month] = map[rec.month] || {}
    map[rec.month][rec.product] = rec.count
    products.push(rec.product)
}
products = [...new Set(products)]
source.push(products)
for (let k in map) {
    let arr = []
    source[0].forEach(item => {
        if (item !== 'month') {
            if (map[k][item]) {
                arr.push(map[k][item])
            }else{
                arr.push(0)
            }
        }
    })
    source.push([`${k}月`,...arr])
}

想请教下更好的写法,好学习一下。
还有一处地方就是下边是echart的option配置,效果图如下:

option = {
  legend: {},
  tooltip: {},
  dataset: {
    source: [
      ['month', '电脑', '手机', '笔记本', '键盘'],
      ['1月', 223, 635, 342, 988],
      ['2月', 473, 575, 612, 1128],
      ['3月', 354, 0, 578, 867]
    ]
    
    // 如果dataset使用这种格式的数据,option改哪些地方才可以实现下图的效果?
    //dimensions: ['month', '电脑', '手机', '笔记本', '键盘'],
    //source: [
    //  { month: '1月', 电脑: 223, 手机: 635, 笔记本: 342, 键盘: 988 },
    //  { month: '2月', 电脑: 473, 手机: 575, 笔记本: 612, 键盘: 1128 },
    //  { month: '3月', 电脑: 354, 手机: 0, 笔记本: 578, 键盘: 867 }
    //]
  },
  xAxis: [
    { type: 'category', gridIndex: 0 },
    { type: 'category', gridIndex: 1 }
  ],
  yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
  grid: [{ bottom: '55%' }, { top: '55%' }],
  series: [
    // These series are in the first grid.
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    // These series are in the second grid.
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
  ]
};


如果数据集dataset写成对象数组形式要怎么写option才能做到和上图一样的效果

阅读 1.9k
1 个回答

这个意思吗,没明白啥意思,大概写了下。

let data = [
    { product: '电脑', count: 223, score: 95.8, price: 8799, sold: 105, month: 1, },
    { product: '手机', count: 635, score: 81.4, price: 2799, sold: 439, month: 1, },
    { product: '笔记本', count: 342, score: 91.2, price: 6299, sold: 127, month: 1, },
    { product: '键盘', count: 988, score: 76.9, price: 399, sold: 655, month: 1, },
    { product: '电脑', count: 473, score: 89.2, price: 7699, sold: 235, month: 2, },
    { product: '手机', count: 575, score: 91.7, price: 2299, sold: 399, month: 2, },
    { product: '笔记本', count: 612, score: 79.8, price: 6799, sold: 327, month: 2, },
    { product: '键盘', count: 1128, score: 84.1, price: 299, sold: 575, month: 2, },
    { product: '电脑', count: 354, score: 89.2, price: 7699, sold: 187, month: 3, },
    { product: '笔记本', count: 578, score: 79.8, price: 6799, sold: 297, month: 3, },
    { product: '键盘', count: 867, score: 84.1, price: 299, sold: 672, month: 3, },
]
const xarr=[];
const yarr1=[];
const yarr2=[];
const yarr3=[];
data.forEach((item)=>{
  xarr.push(item.product);
  yarr1.push(item.score);
    yarr2.push(item.count);
      yarr3.push(item.price);
})
console.log(data)
option = {
  legend: {data:['电脑','手机']},
  tooltip: {},

  xAxis:{
     data:xarr,
  },
  yAxis: [ {
      type: 'value'
    }],
  grid: [{ bottom: '55%' }, { top: '55%' }],
  series: [
 
    { type: 'bar', data: yarr1, seriesLayoutBy: 'row' },
    { type: 'bar', data: yarr2, seriesLayoutBy: 'row' },
    { type: 'bar', data: yarr3, seriesLayoutBy: 'row' },
  
  ]
};

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题