这种图表，用echarts的哪个类型图形渲染好？

Question

这种图表，用echarts的哪个类型图形渲染好？

Answer 1

如果需求方没有特殊需求，就是用 series-line。

如果有就按照需求方调整对应 series 的类型。

---

黑色的几个折线设置 showSymbol: false， itemStyle.opacity: 0，然后开启 smooth 属性。

option = {
  backgroundColor: '#fff',
  tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
  legend: {
    show: true
  },
  grid: { left: 40, right: 20, top: 40, bottom: 50 },
  xAxis: { type: 'value', min: 0.06, max: 0.92, name: 'x' },
  yAxis: { type: 'value', min: 0.8, max: 6.8, name: 'y' },
  series: [
    { name: '喷振',      type: 'line', data: data_spray, showSymbol: true, smooth: 0, lineStyle: { width: 2 }, color: '#f4b400' },
    { name: '堵塞',      type: 'line', data: data_block, showSymbol: true, smooth: 0, lineStyle: { width: 2 }, color: '#4285f4' },
    { name: '最小转速',  type: 'line', data: data_rpm_min, showSymbol: true, smooth: 0, lineStyle: { width: 2 }, color: '#34a853' },
    { name: '最大转速',  type: 'line', data: data_rpm_max, showSymbol: true, smooth: 0, lineStyle: { width: 2 }, color: '#ea4335' },

    { name: '多项式(喷振)',     type: 'line', data: fit_spray,     smooth: true, showSymbol: false, itemStyle: { opacity: 0 }, lineStyle: { width: 3, color: '#000' } },
    { name: '多项式(堵塞)',     type: 'line', data: fit_block,     smooth: true, showSymbol: false, itemStyle: { opacity: 0 }, lineStyle: { width: 3, color: '#222' } },
    { name: '多项式(最小转速)', type: 'line', data: fit_rpm_min,   smooth: true, showSymbol: false, itemStyle: { opacity: 0 }, lineStyle: { width: 3, color: '#444' } },
    { name: '多项式(最大转速)', type: 'line', data: fit_rpm_max,   smooth: true, showSymbol: false, itemStyle: { opacity: 0 }, lineStyle: { width: 3, color: '#000' } }
  ]
};

var data_spray = [
  [0.08,1.6],[0.12,1.7],[0.18,1.9],[0.24,2.4],[0.30,3.0],
  [0.38,3.6],[0.46,4.2],[0.54,4.9],[0.60,5.8],[0.66,6.1]
];
var data_block = [
  [0.12,1.2],[0.20,1.1],[0.30,1.1],[0.40,1.2],[0.50,1.4],
  [0.60,1.7],[0.70,2.1],[0.78,2.5],[0.84,2.9],[0.90,3.2]
];
var data_rpm_min = [
  [0.10,1.6],[0.16,1.5],[0.22,1.4],[0.28,1.3],[0.34,1.25],
  [0.40,1.2],[0.46,1.15],[0.52,1.1],[0.58,1.08]
];
var data_rpm_max = [
  [0.62,6.2],[0.66,6.1],[0.70,6.0],[0.74,5.8],[0.78,5.5],
  [0.82,5.0],[0.86,4.2],[0.88,3.6],[0.90,3.0]
];

var fit_spray = [
  [0.08,1.6],[0.20,2.3],[0.32,3.2],[0.44,4.1],[0.56,5.1],[0.66,6.0]
];
var fit_block = [
 [0.36,1.3],[0.48,1.5],[0.60,1.9],[0.72,2.3],[0.84,3.0]
];
var fit_rpm_min = [
  [0.10,1.6],[0.22,1.4],[0.34,1.26]
];
var fit_rpm_max = [
  [0.62,6.2],[0.70,6.0],[0.78,5.4],[0.84,4.6],[0.90,3.2]
];

Answer 2

根据你提供的图片链接（image.png），我无法直接查看图片内容。但基于常见的图表需求，结合 ECharts 的图形类型，以下是通用建议：

1. 柱状图/条形图（Bar）

   • 适用场景：比较不同类别的数据（如销售额、用户数量等）。
   • 使用 type: 'bar'。

2. 折线图（Line）

   • 适用场景：展示数据随时间或连续变量的变化趋势（如股价走势、温度变化）。
   • 使用 type: 'line'。

3. 饼图/环形图（Pie）

   • 适用场景：显示部分与整体的比例关系（如市场份额、预算分配）。
   • 使用 type: 'pie'。

4. 散点图/气泡图（Scatter）

   • 适用场景：分析两个变量之间的相关性或分布（如身高体重关系）。
   • 使用 type: 'scatter'。

5. 雷达图（Radar）

   • 适用场景：多维数据对比（如技能评估、产品属性分析）。
   • 使用 type: 'radar'。

6. 地图（Map）

   • 适用场景：地域数据分布（如人口密度、疫情热力图）。
   • 使用 type: 'map' 或 geo 组件。

需要你补充的关键信息：

• 图表目标：你想展示数据的什么特征？（比较、趋势、分布、占比等）
• 数据结构：数据类型是什么？（数值、类别、时间序列、地理位置等）
• 横/纵轴内容：坐标轴代表什么？（时间、类别、数值范围等）

提供具体描述后，我可以推荐最精确的 ECharts 图形类型和配置代码示例！
（例如：描述图中的坐标轴、有无时间序列、是否有多个数据系列等）