Data visualization

  • D3
  • Echarts
  • three.js
  • HighCharts
  • Charts
  • G2

Color application

The application of color is an important part of data visualization. The same data, the same chart type, if made by different people or different companies, may present completely different effects. The important difference may be the application of color. The different Echarts charts come with a default set of theme colors, so they look good even if we don’t set the colors. The Echarts diagram has many different color Settings, including, but not limited to, the ones shown below (the official demo) :

The Echarts configuration manual has a detailed description of how to set the options for each part mentioned in the figure above. Here, it focuses on some of the most important parts of the work that are not often used. From an implementation level, there are two types of color Settings: option property Settings and CSS style Settings. The answer can be found in the DOM structure above. Each Echarts instance generally contains two elements: Canvas and DIV (the box labeled part), div is responsible for displaying the tooltip of the chart (the part circled by the yellow box), and Canvas is responsible for everything except the yellow box. For simple colors, like the one shown above, the Option color is sufficient, but for accent colors like the one shown below, the option color is too limited. Mixed colors are used to enhance the data display in the title and tooltip:

The emphasis color in tooltip is a dom element manipulation, so it’s easy to create the effect shown above by styling the div element and its children, like:

Option = {tooltip: {trigger: 'axis', backgroundColor: 'rgba(0,0,0,.8)', textStyle: {color: '#b4d1e6'}, /* The formatter property is applied directly to the inline CSS style operation */ formatter: function (val) { return val[0].name + ':<span style="color:#ffbf00; font-weight: bold; font-size:14px; padding: 0 5px;" > '+ addSeparator (val [0]. Data) +' < / span > '}}... Other Settings}Copy the code

Blending colors for titles or other parts of the chart is not as easy as it would be if it didn’t accept the direct styling of DOM elements like Tooltip, but Echart has enough entry points to address this need: Rich text tag (rich), official explanation, such as the above section of mixed color title, can be implemented in this way, code copy to the official demo, you can view the effect, more usage can view the official example:

Title: {show: true, left: 'center', top: 15, text: '{a | 2017 year entire province total statistics: applicant} {165338} | b} {c | people', textStyle: {rich: {a: {color: '#8bb8e8', fontSize: 14, fontWeight: 'bold' }, b: { color: '#ffcf2a', fontSize: 16, fontWeight: 'bold' }, c: { color: '#8bb8e8', fontSize: 14, fontWeight: 'bold' } } } }Copy the code

Application of AutoToolTip

Echarts uses normal/emphasis, tooltip, and hover/unhover states to make diagrams more interactive. In particular, the tooltip customization mentioned above takes the presentation to the next level. But as a front-end visualization, it is often displayed on a large screen for visiting and displaying, so it is unlikely for visitors to use the mouse to view specific data one by one hover, which requires us to use automatic rotation instead of hover trigger tooltip. To this end, the official provided dispatchAction method and official demo, can also refer to an article on the Internet to provide ideas and source code, packaging a chart general automatic rotation tool, I also package a, welcome to refer to, the following is the map using rotation effect diagram.

  • The dispatchAction method of Echarts does not support Radar images in common charts. I know that the supported charts are pie, BAR, Line, Map and Scatter. In order to solve the single-axis hover and automatic wheel broadcast Radar image, I wrote a method, and it is also wrapped in the autoShowTip object, the specific implementation can refer to the personal blog article: from 0 start a support single-axis wheel broadcast Radar graph last article;

  • It is also important to control the position of toolTip, as shown on the left side of the image below. Echarts provides methods to do this, such as adding the following code to achieve the effect shown on the right:

    position: function (pos, params, dom, rect, size) { var obj = {top: '10%'}; / / y direction, its fixed position / / obj [[' left ', 'right'] [+ (pos [0] < size. ViewSize [0] - 20)]] = 5; if (pos[0] > (size.viewSize[0] - 100)) { obj['right'] = 0; } else { obj['left'] = pos[0]; } return obj; }Copy the code

  • In addition, automatic rotation can also better display data, when our data is too long, and the display space is limited, we can cut the data to both ends or even multiple segments, through automatic rotation switch, so that you can in limited space, show the best effect, the following is a Demo I do, source code and renderings:

    myChart = this.$echarts.init(target); let step =0; option.xAxis.data = labelData.slice(0,length); option.series[0].data = realData.slice(0,length); option.series[1].data = symbolData.slice(0,length); myChart.setOption(option); this.$echarts.AutoShowTip(myChart, option, 3000,{ refreshOption: function () { step = ((step + length)>labelData.length)? 0:(step+length); let endStep = ((step + length)>labelData.length)? 8:(step+length); option.xAxis.data = labelData.slice(step,endStep); option.series[0].data = realData.slice(step,endStep); option.series[1].data = symbolData.slice(step,endStep); }, isRefresh: labelData.length>length });Copy the code

Optimization of coordinate system

In addition to the above mentioned, setting the scale of the value axis is also one of the things you need to be careful about when working on a bar, line, or extension series based on both. In this way, such as the following two pictures if single, feel nothing, but if there are multiple such in a big columnar or graph, some line between three or four root, some eight or nine root, there are no split, this kind of visual representation, can give a person a kind of shaky feeling, according to personal experience, to control the interval line under 6 root, experience is better.

There are two types of unfriendly data presentation charts shared above, so how can we optimize them better? Now I will give you my thoughts when I was working on a project of my company. You can explore the specific implementation by yourself, but if the back end of your home has already calculated the units for you and handled the first two steps, then you only need to do the last step. Why not directly set the min, Max, spiktLine of Yaxis to control the interval line and interval? It should be noted that the number of segmented segments is only an estimate, and the actual number of segments displayed will be adjusted based on the readability of the scale displayed on the axis after segmentation. Because splitNumber is an estimated value, the actual scale calculated according to the policy may not achieve the desired effect. In this case, interval, min, and Max can be used to forcibly set the scale division. Generally, it is not recommended to use:

Map application

Echarts maps, which can be set to the Geo map engine or Baidu map engine, seems to support other maps, as long as you know the coordinate system conversion relationship. Geo map download service has been temporarily suspended due to some data does not comply with the provisions of the National Surveying and Mapping Law, but you can still find it, such as Echarts Github account. The map appears to serve as a background for a chart, but in reality it serves more as a coordinate system – a latitude and longitude coordinate system. About the use of Echarts Geo map, I have some experience to share:

  • Map of different versions of js or json data, presented the effect of the difference is very big, big to the test to you bugs, such as shown in the following two pictures, figure on the left of the name, t he has extended his minions entirely ya, and mianyang is like has been swallowed up in deyang, oneself compared the data, left a map of the json data is compressed, The image on the right is uncompressed, but to be fair, the two json versions are not the same:

  • The setting of GEO is necessary. As mentioned earlier, the important role of GEO is to serve as the chart coordinate system. So when you have multiple series that need to be able to set data in the same coordinate system, setting geo is very necessary. However, it is worth noting that once the global GEO is set as the reference coordinate system in the series, i.e. the geoIndex is specified, the serial-map. map attribute and style configuration such as serial-map. itemStyle are no longer in effect. Roam: True should be used sparingly. Set a scaling interval.
  • If government projects are involved and boundary areas are sensitive, the best choice is to use Bmap as the map coordinate system;

Custom series

At that time learned Echarts soon, see Gallery above some cool examples, oneself also want to start to do a, can look at Echarts source code, a face meng force, and then looked at zRender and admire zhe teacher’s water polo map, feel into a point door, but from make cool effect or some gap. Until recently, I found that version 4.0 introduced the custom series, made a pseudo-3D fill and 2d coordinate histogram effect (it took some time to load the animation). If you are interested, you can study it by yourself:

Make a summary

Feels like this experience post is starting to sound like an Echarts poster. I’ve been doing data visualization on my own for almost a year now, but it feels like I’m in a door, as a branch of the front end, as deep as water. If you don’t have the concept of visualization yet, I recommend ant Financial’s G2, a former Echarts author, for more theoretical visualization diagrams, the G2 Visualization Basics document. In order to have an intuitive performance, I built a visual Demo with Vue, interested can leave your email. By the way hit a body selling advertising: I am now in the resignation, if which god’s company needs to find a brick, please accept my knee, online resume, chengdu coordinates. This article was first published at: http://closertb.site, please note when reprinted