This article has participated in the activity of “New person creation Ceremony”, and started the road of digging gold creation together.

Source configuration

  • At present, I am working on a large screen project of visualization chart based on the front end, so I can use various charts. Currently, I mainly useAntV-Charts. (Of course, actuallyThe EchartsThe basic configuration of the chart is similar, and most of it can be the same.
  • Here we share some basic and unusual configurations of custom functions. Although the official documents will be written, but when we really put our own project into practice, we always find that it does not work.
  • I’m going to share with you some unusual configurations of various charts
  • Other configurations that will be used in the future will be added irregularly, and you also need to refer to the official documents.

1, the Column

Change the shape, position, spacing, etc of the legend

  const legend = {
    layout: 'horizontal',
    position: 'right-top',
    margin: [10.10.10.0],
    marker: {
      symbol: 'circle',}};Copy the code
Change graphic annotation position and font size

// Bar diagram text constlabel = {
    position: 'middle',
    style: {
      fill: '#FFFFFF',
      fontSize: 13,
      cursor: 'pointer',
    },
    rotate: 0};Copy the code
X-axis click event registration
  • Reference Documentation describes the event name type
        onReady={(plot) = > {
              plot.on('axis-label:click'.() = > {
                modalRef.current.handleChangeVisible();
              });
            }}
Copy the code
The bar chart is colored according to the variables
// bar spacing const marginRatio = [0.2]; const setColor = { legend:false, // Set it tofalse
    colorField: 'rank'// seriesField color: ({rank}) => {if (rank === 1) {
        return '#fc7275';
      }
      return '#31bff5'; }};Copy the code

How to add bar chart auxiliary annotation

  • This requirement may be less common on a bar chart, that is, to display the average value of the corresponding data on the bar chart, or whatever. Add the corresponding auxiliary line flags.
  • Of course, the official API has corresponding API configuration, here is mainly to share the practice, how to apply to our code.

The example here is to show two average line configurations, see the code for details The code data depends,

  annotations={[
                      {
                        type: 'line',
                        start: ['min', total[1].y],
                        end: ['max', total[1].y],
                        text: {
                          content: `${total[1].x}:${total[1].y}${titleUnit}`,
                          offsetY: -2,
                          offsetX: 700,
                          style: {
                            textAlign: 'left',
                            fontSize: 16,
                            fill: '#ba997e',
                            textBaseline: 'bottom',
                          },
                        },
                        style: {
                          stroke: '#ba997e',}}},]Copy the code

2, the Line,

On the line chart, set the Y-axis scale

  yAxis={{
          min: 0.// minLimit: 10,
         tickCount: 7.nice: true,}}Copy the code