Number of words in this article :3957        Estimated reading time :10 minute

Due to the recent project needs to do visual data display , That is to show the data with charts , He also has a very high-end name :“ Big data visualization ”( Refer to figure 1 ), First of all, what chart library should be chosen as the basic development , It is generally accepted that
Hcharts,Echarts,AntV.

introduce :

* Hcharts: A chart Library Abroad , It's the leader of the chart library

* Echarts: Data visualization library developed by Baidu , Development of domestic chart database “ Leaders ”

* AntV: It is a data visualization library developed by ant financial services

Summarize the following advantages and differences Echarts,Hcharts Which is more suitable :

1, How easy it is to learn
: Just understand JS, Then I believe you can get started soon . The two scores are the same . But it's made by Baidu Echarts For domestic cities, there has been a corresponding configuration , It's very convenient to call . So when it comes to mapping ,Echarts
be a stroke above .

2, Big data expressiveness
: Some netizens said , When the amount of data reaches 10000 ,Highcharts Multi table linkage based on XML , Auto scaling has a stronger advantage , and Echarts Then there will be obvious Caton , Need to set datazoom. therefore
Hcharts A complete victory .

3, Document friendliness
:Echarts It's Baidu ,Hcharts It's foreign . in addition ,Echarts It's like a manual , and Highcharts It's like a blog . Individuals still prefer documents like instructions , Easy to locate , So I'm here for you
Echarts Turn around and light up .

4, Beauty of chart : Look at two examples Echarts,Hcharts,Echarts
It's over ! and Echarts be based on Canvas, about 3D Drawing has absolute advantage , It can draw beautiful pictures .

5, Degree of freedom of chart configuration :Hcharts be based on SVG, Convenient customization , Chart of the same type ,Hcharts Can play out 100 A pattern .

6, The richness of the chart :Echarts Rich chart types , And amazing 3D effect , Sling Hcharts.

last , What's more important is that ,Echarts Free Admission ,Hcharts Authorization is also required for commercial use , Personal time is free , But it will be shown on the chart logo, If you are a cleanliness addict, you can only make a detour .

therefore , It's up to you ,Echarts!

It is not recommended for personal use Vue-Echarts edition , because Echarts It's not very difficult in itself , Although the document is a little bit like  “ instructions ”, But it's all right , It's understandable to take some time .

introduce :

stay Vue Used in Echarts It can be introduced in the way of plug-ins

1, use npm install Echarts:
npm install echarts --save
 2, Global introduction Echarts:
//main.js Not recommended import echarts from "echarts"; Vue.prototype.$echarts = echarts;
I personally don't recommend working in main.js The way of global introduction , Use according to project Echarts It can be introduced on demand :

3, On demand introduction Echarts:
let Echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar'); // Chart required
Easy to use : 

First of all, it should be clear Echarts The graph must satisfy four rigid conditions before it can be drawn :

* Prepare a container with width and height (container);
* Initialization is required before each painting (init);
* Configuration must be set , Otherwise, there is no way to draw (option);
* When changing data, you must pass in the changed data , Otherwise, new data cannot be monitored (setOption);
Four steps are indispensable , It can be simply understood as marrying a daughter-in-law in daily life :

* Find a suitable girlfriend for marriage (container);
* After knowing each other for a period of time, determine the relationship (init);
* After the relationship is established, you need to buy , She'll keep going with you (option);
* When the relationship heats up further, we can marry him home (setOption);
use :
<!-- Prepare containers with width and height --> <div style="width: 100%; height: 100%" ref="chart"></div>
<script> let Echarts = require('echarts/lib/echarts'); // Basic examples Be careful not to use import
require('echarts/lib/chart/bar'); // On demand introduction bar = Histogram export default { data() {
return { chart: null } }, // Chart example mounted() { this.init() }, methods: { init() {
//2. initialization this.chart = Echarts.init(this.$refs.chart); //3. Configuration data let option = {
xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat',
'Sun'] }, //X axis yAxis: { type: 'value' }, //Y axis series: [{ data: [120, 200, 150,
80, 70, 110, 130], type: 'bar' }] // Configuration item }; // 4. incoming data
this.chart.setOption(option); } } }; </script>
 

Adaptive window size :

For compatibility , It is necessary to make each chart adaptive in width and height according to the screen changes

* single  / Multiple charts are in effect : mounted() { window.addEventListener('resize', () => {
this.chart.resize(); }); }
Effect display :

  ------  full text finish ! ------

It's not easy to make , If this blog post helps you solve the development problem , Please don't be stingy with your little heart !❤ 

 

Technology
©2019-2020 Toolsou All rights reserved,
c Language implementation 《 Student management system 》 No hole is the future of mobile phone ? There are still many problems to be solved Junior , A little sense , Just for mutual encouragement How to use Vue Used in Echarts Visual Library The 11th Blue Bridge Cup Java The second provincial competition B Group part Python- be based on OpenCV Contour fill for flooding algorithm hole filling 【C#】 The realization of student achievement information management system List Common interview questions in the collection and simple ideas China Mobile Science Popularization : Why do mobile networks call “ Cellular mobile network ”【Golang Basic series 10 】Go language On conditional sentences if