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.
Echarts
It is a pure Javascript
open 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 ZRender
and can be used Echarts
Make 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.
ECharts
Support Canvas
, SVG
, VML
in the form of rendering charts. VML
Compatible with low version of IE, SVG
you can solve the problem of mobile terminal memory, Canvas
can easily cope with large amounts of data and effects of the display, you can choose different rendering according to different scenarios and environments that ECharts
can have a better performance under various scenarios.
Features of ECharts
Rich visualization types
ECharts
Provides 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.0
Built-in dataset
attributes directly support a variety of formats, including incoming data sources such as two-dimensional table, by simply setting encode
properties 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.0
Provides incremental rendering technology, with various detailed optimizations, ECharts
can 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 ECharts
the use of mobile end break through the bottleneck, and have a better experience the effect.
Multi-rendering scheme, cross-platform use
ECharts
There rendering graphical form Canvas
, SVG
, VML
. It 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, ECharts
in node
the environment can also be efficient server-side rendering, from the ECharts4.0
start, also completed the adaptation of the applet.
ECharts
Was originally a pure Javascript
chart library, the development so far, the community also offers to expand to other languages, there is Python
the pycharts
, R
language recharts
and so on. Community activity is relatively high.
In-depth interactive data exploration
Data interaction is an important way to discover information in data. ECharts
I have been working hard on the road of interaction, providing tooltip
out-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 ECharts3
beginning to support the incoming data multidimensional. With visual mapping component visualMap
rich 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
ECharts
It 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 ECharts
will 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
ECharts
Provides the basis WebGL
of ECharts GL
, you can easily use ECharts GL
to 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.0
comply with W3C
Rich 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 echarts
and display the chart in the project .First, you need to create a new directory src/componets/Second.vue
and vue
add 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/#/second
view 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
echarts
To 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 ECharts
there are two general reference:
A mode of:
echarts
defining 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.js
Add the following code file
import echarts from 'echarts' Vue.prototype.$echarts = echarts
In src/component/Second.vue
the mounted
last method to print out directly to global variables can discern whether to ECharts
bind 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>
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>
We can see two ways of echarts
library 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 ECharts
packets, so the volume will be relatively large packaged items. May be selected using the graph to .vue
a 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
cost lipitor 20mg & lt;a href="https://lipiws.top/"& gt;lipitor 80mg cost& lt;/a& gt; buy atorvastatin tablets
Mxovcu
2024-03-08