Organize some common configurations of echarts (with code examples)

I won’t go into the basic usage of echarts. There are many demos on the official website, which can be run by copying and pasting. Here we mainly summarize the author’s common configurations in the company.

1. Dual Y-axis

When your data has multiple polylines, and some lines have large data, and some lines have very small data, if they are all placed on one Y If the data is displayed on the axis, the small amount of data will be very close to the .

You only need to configure options.yAxis, and then configure for each data in options.series yAxisIndex is enough, 0 is the left side and 1 is the right side.

options = {
    series: [
        {
            data: [...],
            type: "line",
            yAxisIndex: 0,
        },
        {
            data: [...],
            type: "line",
            yAxisIndex: 1,
        },
        ...
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}',
        },
        alignTicks: true,
        axisLine: {
          show: true,
        },
      },
      {
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}',
        },
        alignTicks: true,
        axisLine: {
          show: true,
        },
      },
    ],
}

2. Loading effect

echarts comes with loading. You can call showLoading() when loading data, and hideLoading() when canceling loading. .

3.no-data placeholder

echarts does not provide any good no-data placeholder, you can only use the title magic modification. When there is no data, first manually clear the X-axis and Y-axis, and then add the title; when there is data, delete the title.

options = {
  title: {
    text: '此时间段暂无数据',
    textStyle: {
      color: 'black',
      fontWeight: 'normal',
      fontSize: 25,
    },
    left: '45%',
    top: '30%',
  },
};

4. Label with unit

The default label of echarts does not have a unit, and echarts provides unit configuration. Just configure tooltip.valueFormatter in each polyline of the series.

If you are not satisfied with the style of label display, echarts also allows you to customize the html of the label. At this time, you can use formatter Add units inside the html.

The configuration is as follows, change it according to your own project:

<br/>

The above is the detailed content of Organize some common configurations of echarts (with code examples). For more information, please follow other related articles on the PHP Chinese website!