使用秋云uecharts的qiun-data-charts组件实现商户评价优良中差的排行

好的，可以使用 Qiun Data Charts 组件来实现商户评价优良中差的排行。以下是一个简单的示例：

HTML 代码：

<qiun-data-charts :option="option"></qiun-data-charts>

JavaScript 代码：

// 假设以下是商户评价数据
var data = [
  { name: '商户1', good: 32, normal: 12, bad: 6 },
  { name: '商户2', good: 24, normal: 19, bad: 7 },
  { name: '商户3', good: 18, normal: 14, bad: 10 },
  { name: '商户4', good: 28, normal: 10, bad: 6 },
  { name: '商户5', good: 20, normal: 16, bad: 8 }
];

// 将数据按照好评率从高到低排序
data.sort(function(a, b) {
  var aRate = a.good / (a.good + a.normal + a.bad);
  var bRate = b.good / (b.good + b.normal + b.bad);
  return bRate - aRate;
});

// 提取商户名称和好评率数据
var names = [], rates = [];
for (var i = 0; i < data.length; i++) {
  var rate = data[i].good / (data[i].good + data[i].normal + data[i].bad);
  names.push(data[i].name);
  rates.push(Math.round(rate * 10000) / 100 + '%');
}

// 使用 Qiun Data Charts 组件画柱状图
var option = {
  title: { text: '商户评价排行' },
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: names },
  yAxis: { type: 'value' },
  series: [
    { name: '好评率', type: 'bar', data: rates }
  ]
};

这段代码会生成一个柱状图，横轴为商户名称，纵轴为好评率，柱子的高度表示好评率大小，从高到低排列。可以根据实际情况调整样式和配置项。