Data visualization

Presenting data in the form of charts and graphs will greatly improve readability and reading efficiency

This example includes bar charts, line charts, scatter charts, thermal maps, complex bar charts, preview panels, etc

Technology stack

  • vue2.x
  • vuex Store common variables such as color values
  • vue-router routing
  • element-ui Ele. me develops a component library based on VUe2, and this example uses datePicker
  • echarts A rich chart library
  • Webpack, ES6, Babel, Stylus…

GitHub address (welcome to star and give advice ^_^) : github.com/SimonZhangI…

demo

This project is data visualization on PC, please check it on PC

Poke me with the online demo

Project screenshots

The development of

componentization

This project completely adopts the idea of componentization to develop. With vue-Router as routing, each page is a component, and each component contains multiple components. As you can see, titles, date filters, and so on are in a similar format for various charts, so both are made into components.

In addition, the checkbox used in the screening of products has also been written into a component, and friends who need it can also be separated and used separately (but the writing is rough ~).

Each chart is a separate component and can be used separately.

A histogram

This project contains a variety of charts, here select “bar chart” to say, other ICONS are similar.

<template>
<div class="multipleColumn">
  <v-header :name="name" :legendArr="legendArr" :myChart="myChart"></v-header>
  <v-filter :myChart="myChart" v-if="myChart._dom"></v-filter>
  <div class="main"></div>
</div>
</template>Copy the code

Page HTML can be seen that a complete icon is composed of three parts:

v-header

Header components that hold titles and different types of filters, etc

  • name Title of chart
  • legendArr There are many types of diagrams
  • myChart Current chart object

v-filter

Filter components, filter by date, and filter by product

  • myChart Current chart object

V-if = “mychart._dom” means that the filter component will be rendered after the dom element of the current chart is rendered

main

The body file of the diagram

Note that main must specify the width and height, otherwise Echarts cannot render the DOM

Initialize the

The mounted() method of vue is used for initialization, which ensures that all page elements have been loaded.

Mounted () { Initialize echarts instance this.mychart = echarts.init(document.querySelector('.multiplecolumn.main ')) This.mychart.setoption (this.options) //this.options is the configuration of echarts.Copy the code

If you want to execute in the created() method, you need to add

this.$nextTick(() => {
  this._init()
}) Copy the code

DashBoard

Dashboard is a preview of all the charts, with a click-toggle animation, and here’s an idea of how to do it.

html

<template lang="html"> <div class="dashboard"> <div class="flex-container column"> <div class="item one" @click="clickChart('1')" style="transform: Translate (-22.4%,-33.5%) scale(0.33)"> <multipleColumn></multipleColumn> </div> <div class="item two" @click="clickChart('2')" style="transform: <column></column> </div> <div class="item three" @click="clickChart('3')" style="transform: Translate (-22.4%,34.5%) scale(0.33)"> < V-line ></ V-line ></ div> <div class="item four active" @click="clickChart('4')" >< point></point> </div> </div> </div> </div> </template>Copy the code

As you can see, there are four chart wrappers, each containing a chart component. Switch by dynamically changing the style.

The overall idea is:

  • Use a percentage layout so that you can adapt to smaller screens
  • Determine the chart display ratio, aspect ratio
  • Just do one transform, so you can improve performance

performance

One more word about performance:

I’m sure you’ve all seen the demo of the online demo, where the switching between different charts not only involves the transformation of position, but also the transformation of size. Scale transform left, top transform left, top transform left, top transform left, top transform left, top transform left, top transform left

Obviously it’s not right, but it does work, but it’s very performance draining. A CSS property change is equivalent to one thread, so if you use left, top, and transform to open three threads at the same time, your computer temperature will shoot up very quickly

The correct solution is to stick with transform and use its translate, as in:

The transform: translate (22.4%, 0) scale (0.33)Copy the code

conclusion

This project is a very practical project, which makes the best use of the componentization idea of VUE.

Everyone interested can go to have a look, I hope to help you.

Github.com/SimonZhangI…