• notice
  • Congratulations on the launch of the Sought Tech site

An overview of the ECharts library and access to the project

Introduction to ECharts

ECharts As a project of Baidu, after meeting with you in 2014, it lasted 4 years and iterated to version 4.1.0.It has been updated all the time.It has been proved and improved by many projects, and it supports personalized customization.Detailed and clear Chinese documents, easy to understand.

EchartsIt is a pure Javascriptopen source visualization chart library, which can run smoothly on PC and mobile devices, compatible with most current browsers (IE8/10/11, chrome, Firefox, Safari, etc.).The underlying renderer is ZRenderand can be used EchartsMake intuitive, interactive, highly customizable data visualization charts.

ZRender)[ https://ecomfe.github.io/zrender-doc/public/ ] is a lightweight two-dimensional drawing engine that provides multiple rendering methods such as Canvas, SVG, and VML.

EChartsSupport CanvasSVGVMLin the form of rendering charts. VMLCompatible with low version of IE, SVGyou can solve the problem of mobile terminal memory, Canvascan easily cope with large amounts of data and effects of the display, you can choose different rendering according to different scenarios and environments that EChartscan have a better performance under various scenarios.

Features of ECharts

  • Rich visualization types

EChartsProvides regular line charts, histograms, scatter charts, pie charts, K-line charts, statistical box charts, maps, heat maps, and line charts for geographic data visualization, relationship diagrams for relational data visualization, treemap, Sunburst chart, parallel coordinates for multi-dimensional data visualization, as well as rich charts such as funnel charts for BI, dashboards and so on.

  • Multiple data formats can be used directly without conversion

Echarts4.0Built-in datasetattributes directly support a variety of formats, including incoming data sources such as two-dimensional table, by simply setting encodeproperties to complete the mapping from data to graphics, optimizing this way, facilitate the development of more interactive visualization in the province Go to the data conversion steps in most scenarios.

  • Front-end display of millions of data

ECharts4.0Provides incremental rendering technology, with various detailed optimizations, EChartscan show tens of millions of levels of data flow, and still be able to carry out smooth data interaction at this level of data.

  • Mobile optimization

Due to memory limitations of screen size and mobile end devices, ECharts end mobile interactive cunning do a more detailed excellent, fine-grained modularity and customized packaging mechanism allows EChartsthe use of mobile end break through the bottleneck, and have a better experience the effect.

  • Multi-rendering scheme, cross-platform use

EChartsThere rendering graphical form CanvasSVGVMLIt can be compatible with lower version of IE browser, can solve the memory problem of mobile terminal, and can run on PC browser. In addition to the browser, EChartsin nodethe environment can also be efficient server-side rendering, from the ECharts4.0start, also completed the adaptation of the applet.

EChartsWas originally a pure Javascriptchart library, the development so far, the community also offers to expand to other languages, there is Pythonthe pychartsRlanguage rechartsand so on. Community activity is relatively high.

  • In-depth interactive data exploration

Data interaction is an important way to discover information in data. EChartsI have been working hard on the road of interaction, providing tooltipout-of-the-box interactive components such as legend, visual mapping, data area zoom,, data scrubbing, etc., which can perform interactive operations such as multi-dimensional data filtering, view zooming, and displaying details on the data. It meets the basic requirements of data visualization interaction of "overview first, zoom and filter to view details on demand".

  • Multi-dimensional data support and rich visual coding methods

From the ECharts3beginning to support the incoming data multidimensional. With visual mapping component visualMaprich provide visual coding, it is possible to map the data to the different dimensions of serious, size, opacity, brightness and other different visual channels.

  • dynamic data

EChartsIt is driven by data, and changes in data drive changes in chart presentation. After knowing the difference between the two sets of data before and after, it EChartswill show the changes in the data according to the differences and through appropriate animations.

  • Gorgeous special effects

ECharts It provides eye-catching special effects for the visualization of geographic data such as line data and point data.

  • Realize more powerful and beautiful 3D visualization through GL

EChartsProvides the basis WebGLof ECharts GL, you can easily use ECharts GLto map out a three-dimensional charts, while also providing different levels of screen configuration items can be custom configured to get all kinds of artistic images.

  • Accessibility

The new version ECharts4.0comply with W3CRich Internet Applications accessible set of specifications developed (WAI-ARIA)to support the automatic generation of smart configuration according to the picture description, so that dyslexic people can understand what the chart with the help of reading devices.

New component file

The next step is to try to quote echartsand display the chart in the project .First, you need to create a new directory src/componets/Second.vueand vueadd the code as follows according to the relevant syntax:

<template>
   <div>
     <h2>{{title}}</h2>
   </div>
</template>
<script>
export default {
   name:'Second',
   data(){
     return {
       title: "An overview of the echarts library and access to the project"
     }
   }
}
</script>

At the same time src/index.js, you need to modify the routing file according to the following code , you can enter it on the browser to http://localhost:8080/#/secondview the content of the page

import Second from'@/components/Second'
// Add one more route under routes
// ...
   {
     path:'/second',
     name:'Second',
     component: Second
   }
// ...

The use of echarts in vue

One, install echarts dependency library

echartsTo use in the project , first download the dependency package, after downloading it will default to the latest version4.x

npm install echarts --save

2.Introduce ECharts dependency in the project

Use in the project EChartsthere are two general reference:

  • A mode of: echartsdefining on a global variable, the other components need, by modifying the prototype chain modified directly, to achieve a global variable called;

In the src/main.jsAdd the following code file

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

In src/component/Second.vuethe mountedlast method to print out directly to global variables can discern whether to EChartsbind to a global variable

<script>
export default {
   name: "Second",
   data() {
     return {
       title: "An overview of the echarts library and access to the project"
     };
   },
   mounted() {
     console.log('Global ECharts', this.$echarts)
   },
   methods: {
   }
};
</script>

avatar

  • Method 2: Re-quote each component when it needs to be used

Shield the code of method one first, and then modify it src/component/Second.vue

<script>
import echarts from'echarts'
export default {
   name: "Second",
   data() {
     return {
       title: "An overview of the echarts library and access to the project"
     };
   },
   mounted() {
     console.log('Partial ECharts', echarts)
   },
   methods: {
   }
};
</script>

avatar

We can see two ways of echartslibrary content can be used

  • Method 3: Introduce required libraries on demand

If two way before the introduction ECharts, is already loaded items obtained and all components charts EChartspackets, so the volume will be relatively large packaged items. May be selected using the graph to .vuea file introduced into the module needs demand, other uses of the same, e.g.

// Introduce the ECharts module
let echarts = require('echarts/lib/echarts')
// Introduce histogram
require('echarts/lib/chart/bar')
// Introduce the prompt box and title component
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

Reference

echarts

echarts features


Tags

Technical otaku

Sought technology together

Related Topic

1 Comments

author

cost lipitor 20mg & lt;a href="https://lipiws.top/"& gt;lipitor 80mg cost& lt;/a& gt; buy atorvastatin tablets

Mxovcu

2024-03-08

Leave a Reply

+