Echarts常见图表中设置样式技巧

在前端开发中，Echarts的应用已经成为一个常见需求。这篇博客将会记录一些Echarts应用中常见的样式设置技巧，包括x轴时间的设置、图中提示框的设置、折线图位置的设置、饼状图的legend两列设置、自定义legend和label、进度条的设置、图表宽度自适应、双进度条、饼图叠加底色阴影。

首先我们来看看如何设置x轴时间的格式。默认情况下，x轴会显示为数字格式，但我们可以通过使用XAxis.axisLabel.formatter来设置它显示为日期或其他格式。例如：

xAxis: {
  type: 'time',
  axisLabel: {
    formatter: function(value) {
      return moment(value).format('YYYY-MM-DD');
    }
  }
}

此外，我们还可以通过使用XAxis.axisLabel.rotate来设置x轴标签的旋转角度。

xAxis: {
  type: 'time',
  axisLabel: {
    rotate: 45
  }
}

接着，我们再来看看如何设置图中提示框的样式。默认情况下，提示框会显示为一个简单的文本框，但我们可以通过使用Tooltip.textStyle来设置其字体、颜色等。

tooltip: {
  textStyle: {
    fontSize: 16,
    color: '#fff'
  }
}

接下来，我们来看看如何设置折线图的位置。默认情况下，折线图会绘制在坐标系的中心，但我们可以通过使用Series.position来设置其位置。例如：

series: {
  type: 'line',
  position: 'bottom'
}

然后，我们再来看看如何设置饼状图的legend两列。默认情况下，legend会显示为一行，但我们可以通过使用Legend.orient来设置它显示为两列。

legend: {
  orient: 'vertical',
  left: 'right'
}

最后，我们再来看看如何设置饼状图的自定义legend和label。我们可以通过使用Legend.formatter来设置legend的文本，通过使用Series.label.formatter来设置label的文本。

legend: {
  formatter: function(value) {
    return value + ' (' + percentage(data[value]) + '%)';
  }
},
series: {
  label: {
    formatter: '{b}: {c}'
  }
}

总的来说，Echarts是一款非常灵活的图表库，它提供了非常丰富的样式设置选项。我们可以在实际应用中根据自己的需要来设置图表的样式，从而使图表更加美观、易于理解。