echarts common configuration items

1. Modify the color of the chart legend

Define the textStyle attribute in the legend configuration item to set the color.

let option = {
    legend: {
        textStyle: {
            color: 'white'
        },
    },
}

2. Modify the x/y axis line color of the chart

Add the axisLine configuration item to the x/y axis for modification.

let option = {
    xAxis: {
        axisLine: {
            lineStyle: {
                color: "rgb(35, 208, 229)"
            }
        },
    },
    yAxis: {
        axisLine: {  
            lineStyle: {
                color: "rgb(35, 208, 229)",
            }
        },
    },
}

3. Modify the default color of the chart

Add the color configuration item in the series to set the color.

let option = {
  series: [
    {
      color: ["rgb(40,135,193)"],
      type: "bar",
      data: [425, 821, 522, 522],
    },
    {
      color: ["rgb(231,137,58)"],
      type: "line",
      data: [21, 85, 98, 21],
    },
  ],
};

4. Add description text on the x/y axis of the chart

Just add a name attribute to the x/y axis.

let option = {
    yAxis: {
        name: "(million vehicles)",
    },
}

5. Remove the grid lines from the chart background

Add the splitLine attribute to the x/y axis and set show to false.

let option = {
    xAxis: {
        splitLine: {
            show: false
        },
    },
}

6. Set the width of the column chart

Add the barWidth attribute to the series to set the required value.

let option = {
    series: [
        {type: 'bar', barWidth: 12,},
        {type: 'bar', barWidth: 12,}
    ]
}

7. Set the inclination of the x-axis text of the chart

Add the axisLabel attribute to the x-axis to set the required angle value.

let option = {
    xAxis: {
        axisLabel: {
            interval: 0,
            rotate: 40,//Degree of inclination
        },  
    },
}

8. Set the background color of the chart

Add the backgroundColor configuration item to the option to set the color.

let option = {
    backgroundColor: ["rgb(5,7,59)"],
}

9. The pie chart display information allows its value and percentage to be displayed

Add the itemStyle configuration item to the series configuration and display it as needed.

let option = {
    series: [
        itemStyle: {
            normal: {
                label: {
                    show: true, //show
                    formatter: '{b} : {c} ({d}%)', //b: name; c: value; d: percentage
                },
                labelLine: {
                    show: true, //show
                },
            }
        },
    ]
}

10. Adjust the spacing between the column chart and the top legend

Add the grid configuration item in option to set the required value.

let option = {
        grid: {
            left: '5%',
            right: '6%',
            bottom: '3%',
            top: "20%",
            containLabel: true
        },
    }

11. Add a text description in the middle of the pie chart

Just add the required text under the option.

let option = {
        title: {
            text: "86.5%", //value
            left: "center", //in the center
            top: "50%", //50% from the top
            textStyle: { //text style
                color: "rgb(30,30,30)", //text color
                fontSize: 16, //font size
                align: "center" //in the center
            }
        },
        graphic: {
            type: "text", //type
            left: "center", //in the center
            top: "40%", //40% from the top
            style: {
                text: "penalty rate", //value
                textAlign: "center", //in the center
                fontSize: 16, //font size
            }
        },
    }

12. The indicator line of the pie chart is displayed and hidden

Add the labelLine attribute to the series configuration item to make it true or false.

let option = {
    series: [{
        labelLine: {
            show: false,
          },
    }]
}

13. Chart width and height adaptive

It is mainly achieved through the resize() method, and a layer of div is placed outside the chart container, and then the width and height of the div of the chart are set to 100%, and the width and height of the outer div can be set.

<div class="columnarStyle">
		<div id="columnarChart" :style="{ width: '100%', height: '100%' }"></div>
</div>

methods: {
    radarEcharts() {
      let radarVariable = document.getElementById("radarChart"); //get id
      let myChartOne = this.$echarts.init(radarVariable); //Initialize the graph
      let option = {
        //configuration item
        // ......
      };
      window.addEventListener("resize", function () {
        myChartOne.resize(); //myChartOne is the value initialized above
      });
    },
  },

14. Adjust the spacing between the pie chart and the title

Just set the value of top in the legend configuration item in option.

let option = {
    legend: {
        top: '0%',
        left: 'center'
    },
}

15. Change the top of the column chart into an arc shape

Add itemStyle configuration item in option to set its radian.

let option = {
    itemStyle:{
        barBorderRadius:[20,20,0,0]//From left to right: top left, top right, bottom right, bottom left
    },
},

16. Add download function to the chart

Add the toolbox configuration item to the option to set its properties.

let option = {
    toolbox: {
        feature: {
            saveAsImage: {
                title: 'save as picture',//The title can be adjusted by yourself
                type: 'png',//download in png format
            }
        }
    },
}

17. Too many words in x/y display ellipsis

Add the following code to the xAxis/yAxis method.

axisLabel: {
  formatter: function (value) {
    if (value.length > 4) {
      return `${value.slice(0, 4)}...`;
    }
    return value;
  },
},

18. Adjust the position of the pie chart

Add the center configuration item to the series to set the corresponding value.

let option = {
    series: [{
        center: ["50%", "48%"],//Horizontal and vertical
    }]
}

19. The screen shakes when the mouse moves into echarts

This problem occurs because the mouse hover event is frequently triggered after using the tooltip configuration item. The solution is to add the transitionDuration attribute to the tooltip and set the value to 0.

let option = {
    tooltip: {
            transitionDuration:0,//Let the tooltip follow the mousetip
      },
}

20. Add a scroll bar for the x/y axis when the amount of data is large

Add the dataZoom configuration item in option to set the property.

let option = {
    dataZoom: [
        {
            type: 'slider',//type
            show: true,//show
            yAxisIndex: [0],//Use the index of the y-axis, the default value is 0
            left: '93%',//Percentage from left position
            start: 0, //The starting percentage of the data window range
            end: 40//Ending percentage of data window range
        },
        {
            type: 'inside',//type
            yAxisIndex: [0],//Use the index of the y-axis, the default value is 0
            start: 0,//The starting percentage of the data window range
            end: 36//Ending percentage of data window range
        }
    ],
 }

21. If there is no data in the chart, the words "no data" are displayed

By judging the length of the array, you can make "no data" display and hide.

 let showed = this.rightPie.length ? false : true
 let option = {
	 title: {
    	show: showed, // Whether to display the title
    	text: 'No data',//displayed text
    	left: 'center',//center horizontally
    	top: 'center',//center vertically
	},
 }

22. Modify the icon icon of the title

You can select the type you want through the icon attribute.

let option = {
	legend: {
  		textStyle: {
    		color: "black",//set text color
    		fontSize: '14' // font size
  		},
  		itemWidth: 14, // icon width
  		itemHeight: 14, // icon height
  		icon: "roundRect", //Control shape, including circle, rect, roundRect, triangle, diamond, pin, arrow, none
	},
}

23. The external text of the pie chart is too long to display incompletely

Just put this method in the series configuration item.

label: {
        show: true,
        fontSize: "12",
        normal: {
            formatter(v) {
                let text = v.name;
                return text.length < 4 ?
                    text :
                    `${text.slice(0, 4)}\n${text.slice(4)}`;
            },
        },
    },

24. The value of the histogram is displayed directly on the column

Put the label configuration item in the object that needs to be displayed in the series configuration item.

label: {
  show: true,
// formatter: '{b}\n{c}%', //Add this line of code if you need the unit 
},

25. Chart switching full screen

This operation can be achieved by putting the toolbox method in the option.

If you are using an svg image, copy the attribute value of d in the svg tag (d="", take out the content in the quotation marks) and paste it behind icon:"path://";

If you are using an external link image, you need to write like this: icon:'image:// https://s1.ax1x.com/2022/04/19/L0GpM4.png' , which is equivalent to image:// + "external link address".

toolbox: {
      show: true,//Whether to display the toolbar
      feature: {
        myFull: {
          show: true,
          title: "View full screen",
          icon: "",
          onclick: () => {
            let element = document.getElementById("pillarsChart");
            // Compatibility with some browsers
            if (element.requestFullScreen) {
              // HTML W3C proposal
              element.requestFullScreen();
            } else if (element.msRequestFullscreen) {
              // IE11
              element.msRequestFullScreen();
            } else if (element.webkitRequestFullScreen) {
              // Webkit (works in Safari5.1 and Chrome 15)
              element.webkitRequestFullScreen();
            } else if (element.mozRequestFullScreen) {
              // Firefox (works in nightly)
              element.mozRequestFullScreen();
            }
            // Exit Full Screen
            if (element.requestFullScreen) {
              document.exitFullscreen();
            } else if (element.msRequestFullScreen) {
              document.msExitFullscreen();
            } else if (element.webkitRequestFullScreen) {
              document.webkitCancelFullScreen();
            } else if (element.mozRequestFullScreen) {
              document.mozCancelFullScreen();
            }
          },
        },
        saveAsImage: { show: true },
      },
    },

26. Hide the x/y axis tick marks

Add the axisTick configuration item to the x/y axis and set true/false.

xAxis: {
    axisTick: {
        show: false,  //hide tick marks
    },
},

27. Set the gradient color of the area chart

This can be achieved by adding the areaStyle configuration item in the series method.

series: [
  {
    type: "line",
    yAxisIndex: 1,
    areaStyle: {},
    smooth: false, //Whether the area chart is changed to an arc shape
    lineStyle: {
      width: 2, //Outer Line Width
      color: "rgb(124,255,255)", //outer line color
    },
    showSymbol: false, //Remove area chart node circles
    areaStyle: {
      //Area Fill Gradient Color
      color: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "rgba(124,255,255, 0.3)", //0% color
          },
          {
            offset: 1,
            color: "rgba(44,56,74, 1)", //100% color
          },
        ],
      },
    },
  },
];

28. There are too many words on the x/y axis and an ellipsis is set

Add the axisLabel configuration item in the xAxis/yAxis method to set the matching conditions.

axisLabel: {
    formatter: function (value) {
        if (value.length > 3) {
            return `${value.slice(0, 3)}...`;
        }
        return value;
    },
},

29. Display values ​​on the echarts map

Add the label configuration item in the series method to set the matching conditions.

series: [
  {
     label: {
      normal: {
        show: true,
        color: "#e0e0e0",
        formatter: function (params) {
           return (
                  params.name +
                  (!params.value ? "" : "(" + params.value + ")")
                ); //Display text + value on the map
        },
      }
    },
  }
]

30.echarts pie chart data is too small to display

Add the minAngle attribute to the series method to set the minimum angle.

series: [
  {
    minAngle: 3,//The minimum sector angle (0 ~ 360), used to prevent the sector from being too small to affect interaction if a certain value is too small.
  },
],

31. The y-axis coordinate in echarts is not a decimal

Add the minInterval attribute to 1 in the yAxis method.

 yAxis: {
   minInterval: 1,
 },

Tags: Front-end Javascript echarts

Posted by fr0mat on Sat, 04 Mar 2023 18:07:27 +1030