Wechat official account: [Dafront-end Yizhan] Follow Dafront-end Yizhan. Questions or suggestions, welcome the public account message.
preface
For our front-end development, especially those in the field of data visualization, it is common to use Echarts. Echarts can help us easily display data in various graphs and facilitate the readability of data. But at the same time I also found that most students for echarts understanding is not thorough, of course it is also because most of the time the business requirements of the above requirements may not be particularly high, only require programmers to implement some simple bar charts, line chart or pie chart, these are echarts fur, arguably have hands on line operation. I would suggest that you learn to go a little deeper and add these more advanced operations to your Arsenal.
In my last job, I happened to meet some difficult requirements. At that time, I often did some projects related to data visualization, such as some large visual screens, etc. The interface effect was relatively high. At this time, I spent some time to improve my echarts level, and had a lot of harvest. Here simply take some advanced cases for a summary.
Echarts official case gallery. Echartsjs’ new URL portal
Echarts advanced operation
Stereoscopic histogram: pictorialBar
Click to see a sample configuration
A pictorialBar is a higher-order use of Echarts. A pictorialBar can be thought of as: it is first a bar chart, but the bars of the bar chart are not shown. These columns are called “reference bars”, according to which various pictographs (including pictures) are positioned and displayed.
In this example configuration, we used four pictograph configurations, the ellipse above and below the cylinder and the ring decoration at the bottom, and then configured the gradient of the column and so on
Column diagram of multilateral body: PATH
The use of PATH can be said to be the biggest harvest of my research on Echarts. The configuration is simple, practical and easy to understand. I feel that it can be used to achieve many different needs, those who have used SVG are not unfamiliar with path path.
In this example, we need to implement a hexapod bar graph. We need to define a path path. If we can’t write the path, we can ask our UI colleagues to export SVG for us.
Optimal solution: PATH
Year-over-year comparisons are pretty common in business, and the average Echarts developer might just use a double bar or hyperbola, but I recommend that if you learn to use path, the arrows should be the best solution and the most readable
Since there are two trends of up and down, we define two sections of PATH in the configuration, and then judge whether we use the up or down path according to the positive or negative values of the data, forming a PATH array for traversal.
Write in the last
Are you in the 10%? If not, work on it, you are
Echarts has a lot of beauty, we need to study step by step, if you think it is useful to you, please click “like” to collect the operation!
[Share, like, watch] Let more people join us