preface
Blogger developers have a habit of demanding that they do as much as possible to reproduce the graphics of their UI design. Echarts is used a lot. The custom of legend. Icon style is shared now. After all, it is better to be happy alone than to be happy with others.
After reading the review, simple legend in the end what is good to share
Check the official echarts configuration item address first
1. Icon of default legend item
circle, rect, roundRect, triangle, diamond, pin, arrow, none
legend: {
top: '5%'.left: 'center'.itemWidth: 20.itemHeight: 20.data: [{icon: 'circle'.name: 'Search engines'},
{icon: 'rect'.name: 'Direct access'},
{icon: 'roundRect'.name: 'Email marketing'},
{icon: 'triangle'.name: 'Affiliate advertising'},
{icon: 'diamond'.name: 'Video advertising'},
{icon: 'pin'.name: 'SEO'},
{icon: 'arrow'.name: 'Fixed drop'}}]Copy the codeThey correspond to the following ICONS
None means nothing, so it’s not playing
Use image links or Base64 images
Image to base64 online tool address
Images are prefixed with image://
The following is an example:
legend: {
top: '5%'.left: 'center'.itemWidth: 30.itemHeight: 30.data: [{icon: 'image://https://profile.csdnimg.cn/F/0/1/3_rudy_zhou'.name: 'Search engines'},
{icon: 'image://data:image/jpg; base64,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'.name: 'Fixed drop'}},Copy the codeResults the following
This way, you can customize any UI design icon, but there is no support for dynamic gray, can not follow the default chart data color
Use vector paths
Recommended usage
Echarts uses a vector path as its default icon. Let’s see what a vector path is.
The most common shapes in SVG images are drawn using vector paths
Echarts uses vector path notation prefixed with:path://
legend: {
top: '5%'.left: 'center'.itemWidth: 20.itemHeight: 20.icon: L66.494 'path: / / M78.625, 93.094, 72.081 l12.132 21.013 h24.264 l12.132, 21.013 l - 12.132, 21.013 H78.625 z M95.547, l4.79 80.377 to 8.296 L - 4.79-8.296 h - 9.579 l - 4.79, 8.296 l4.79, 8.296 H95.547 z '
},
Copy the codeResults the following
1. It can be seen that the legend icon turns into a hollow hexagon, and the color of icon corresponds to the color of the block in the chart
Even if the chart block is set to gradient, the legend icon can complete the gradient color rendering
2. Also visible in echarts 5 is the barrier pattern for people with color discrimination (the current icon is hollow, so it is not obvious)
3. Click the legend to cancel the display of the gray effect can also be applied to the icon, which is not available using image links or base64
In simple terms, using vector path, the display effect is the same as the default ICONS, but the icon shape has been changed to custom.
Vector paths are also supportedThe compound path, such as:
legend: {
top: '5%'.left: 'center'.itemWidth: 20.itemHeight: 20.data: [{icon: L66.494 'path: / / M78.625, 93.094, 72.081 l12.132 21.013 h24.264 l12.132, 21.013 l - 12.132, 21.013 H78.625 z M95.547, l4.79 80.377 to 8.296 L - 4.79-8.296 h - 9.579 l - 4.79, 8.296 l4.79, 8.296 H95.547 z '.name: 'Search engines'},
{icon: 'path: / / M153.651, 224.468-21.867 c, 0-39.658-17.791-39.658-39.658 c0-21.87, 17.791, 39.661, 39.658 to 39.661 ,39.66 c21.869, 0, 17.791, 39.66, 39.661 C193.312, 206.677, 175.521, 224.468, 153.651, 224.468 z M153.651, 159.149 C - 14.148, 0-25.658, 11.512-25.658, 25.661 c0, 14.148, 11.51, 25.658, 25.658, 25.658 s25.66-11.51, 25.66 to 25.658 C179.312, 170.661, 167.8, 159.149, 153.651, 159.149 z M165.791, 172.67 h - 24.277 v24.277 h24.277 V172.67 z '.name: 'Direct access'}},Copy the code
The compound path of the ring and rectangle in the second icon
Because MY more common way to export vector path is to use Adobe Ilustrator under normal circumstances to ask UI little sister for help
If you can’t use Adobe Ilustrator, you can go to www.iconfont.cn/ Ali icon library and find the icon you want
SVG is previewed here, or you can copy the D property of the path tag here.
Note: Only paths (or compound paths) of a single shape are copied as completed ICONS (see section 4 below for examples of differences).
If you want to learn how to edit and export vector paths, you can look at the pit below as well. Even the simple compound path graph at the top may not be known by the beginner UI
1-3. DEMO of the above examples
Click on the custom demo to see the legend change icon
Click edit source code in demo to view
Create a vector path and export it
Bloggers have a little experience with flat surfaces, so they use Adobe Ilustrator, and other tools that you can use
Start with a GIF illustration
1. Create a file
2. Select the graphical tool and draw a graph
3. Set the border width of the graph, then click Object => Path => Outline Stroke, so that the thick border becomes a five-star ring
4. Right-click the figure again, ungroup it, and use the selection tool (the first arrow in the left menu) to select the small five-pointed star in the center to zoom out
Note: after zooming out, you don’t need to set the color. After all, the color exported here has no effect, we only use the path
5. Select the five star ring again, click object => Path => Compound path => Create menu (this is very important, if you do not create compound path, then the final export is a Mosaic of two shapes, not a shape, the initial UI, may not care about these, but echarts vector path only supports one path)
6. Click file again => Script => Export SVG, open SVG file (default browser open)
7. Finally review the element, see that there is a path tag in the SVG tag d attribute is the vector path we need
Compare the difference between creating a compound path and not creating a compound path
Create composite path export SVG:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer _1" x="0px" y="0px" width="340.16 px" height="340.16 px" viewBox="0 0 340.16 340.16" style="Enable-background :new 0 0 340.16 340.16; xml:space="preserve">
<path d="M133.911, 128.744 l3.526 l7.884 7.144, 1.146 l - 5.705, 5.561 l1.347, 7.852 l - 7.052-3.707 l - 7.052, 3.707 l1.347-7.852 l - 5.705-5.561 L133.911 l7.884-1.146, 128.744 z M154.792, 149.494 l20.881 20.354 l - 28.857-4.193 l - 12.905-12.905, 26.149 l to 26.149 l - 28.857, 4.193 L20.881, 20.354 l - 4.929, 28.74 l25.811 l25.811-13.569, 13.569 L154.792, 149.494 z M121.382 l2.393 159.955-13.952 l - 10.136-9.88 L14.008 l14.008 2.036 l6.265 12.693 l6.265, 12.693, 2.036 l - 10.136, 9.88 l2.393, 13.952 l - 12.529-6.587 L121.382, 159.955 z"/>
</svg>
Copy the codeSVG without creating a composite path export:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer _1" x="0px" y="0px" width="340.16 px" height="340.16 px" viewBox="0 0 340.16 340.16" style="Enable-background :new 0 0 340.16 340.16; xml:space="preserve">
<polygon points="133.911,128.744 137.437,135.888 145.321,137.034 139.616,142.595 140.963,150.447 133.911,146.74 126.859,150.447 128.206, 142.595, 122.501, 137.034, 130.385, 135.888,"/>
<path d="M159.722, 178.234 l - 25.811-13.569 l - 25.811, 13.569 L92.148 l4.929-28.74, 129.14 l12.905 l12.905 l28.857 4.193-26.149, 26.149 L28.857, 4.193 l - 20.881 and 20.354 L159.722, z M133.911 178.234, 153.368 l12.529, 6.587 l - 2.393-13.952 l10.136-9.88 l - 14.008-2.036 L - 6.265-12.693-6.265 l and 12.693 l - 14.008, 2.036 l10.136, 9.88 l - 2.393, 13.952 L133.911, 153.368 z"/>
</svg>
Copy the codeThe two pentacles, the code, and the SVG source file are displayed
In addition to looking at the code posted above, you can also open the console directly to review elements
The pentagram without a compound path will be found. The pentagram ring and the middle pentagram are rendered in two elements
Legend. Icon not only supports vector paths
Line symbol is also supported. Click to see the Demo
Of course, not only these, handle.icon (scroll bar), toolbox.icon (tool icon) and other support, you can use vector path in the way above.
conclusion
Originally wanted to find an online version of the editing path tool, but only found PS online version, AI did not find, have found friends can leave a message below
Any omissions or errors in the above information are welcome to correct