1. Analysis of the problem that the echarts per capita income histogram window system cannot display the national flag
1. As shown in the figure below: the histogram only displays emoji characters under the window. Whether it can be converted depends on whether the system supports it or not. country flag icon
2. Let the effect of Apple computer display the same effect under windows
The general idea is to display the national flags of corresponding countries through rich dynamic matching (including Chinese and English corresponding to countries all over the world and js coded, including codes and uniquely identified js of countries all over the world, and a list of pictures named after country logos)
Note: At present, by comparing js, I know that the codes of Canada and the United States are both 1. You need to modify the code js and pictures of one of the countries by yourself,
as shown in the figure below:
1. Dynamically match the country code corresponding to the Chinese name
2. Use the country code to match the corresponding country identification name
3. Dynamically set rich to match the corresponding picture
1. Assign value to yAxis with the Chinese name and get the corresponding country logo to the name parameter
2. Define the formatter and get the corresponding country name through the value value (Is the name of yAxis useless? But the name of yAxis above It is used to display the y-axis data formatter can only get the value, so you have to use the value to match the country logo), setting rich to empty is to dynamically process the rich later 3. Dynamically set the rich
and use the value in the formatter (country logo) corresponds to the svg named after the country logo
By dynamically setting yAxis, formatter and rich, you can achieve any desired effect
Of course, this method also has certain limitations, such as only supporting fixed parameters and fixed custom parameters (but these fixed parameters can also be dynamicized through the interface)
The final effect is as shown below
Dynamically adding data will encounter that the data has been updated but the interface is not displayed
Add monitoring event:
//The data is automatically refreshed, so a monitoring mechanism is necessary to tell Echarts to reset the data
option: { //Observe the change of the option
handler(newVal, oldVal) { if (this.myChart) { if (newVal) { this. myChart.setOption(newVal); } else { this.myChart.setOption(oldVal); } } else { this.init(); } }, deep: true //Monitoring of object internal properties, the key. } init(){ // Based on the prepared dom, initialize the echarts instance var myChart = this.$echarts.init(document.getElementById('myQueueEchart')) // Draw the chart, this.option is the data myChart.setOption(this .option, true) },
The data that needs to be dynamic can be directly passed this.option.xxxx = obj;
file link
Link: https://pan.baidu.com/s/13ArNtqK-4_R8nJm58CO2zw Extraction code: vhwt