Summary of echarts case Resources and Efficient Use of Echarts (Details)

I. Preface.

As we all know, in today’s development environment, data visualization (large screen) projects in front of the development of an increasing proportion. The most widely used plug-in is undoubtedly Apache Echarts. (PS: hereinafter referred to as echarts). This article uses the VUE framework to show you how to use Echarts quickly, efficiently, and elegantly in your projects. Of course, the end of this article will also provide readers with the most comprehensive and efficient collection of Echarts case sites on the web.

2. Echarts usage instructions and skills in VUE project.

1. Installation dependencies and precautions and corresponding solutions.

• Description:

If you install the latest echarts dependency package directly on the VUE, an exception not defined by the Init method of echarts may be displayed. In this case, uninstall the echarts dependency package of the current version and reinstall the specified stable version (for example, V4.8.0). —- import * as echarts from ‘echarts’

• Core code and legend:

NPM install echarts --save // If the echarts version you installed is too high, please install NPM uninstall echarts --save // Uninstall the currently installed ECahrts dependency NPM install [email protected] --save // reinstall the lower version ECahrts dependencyCopy the code

2. Componentization enables the independent management of each Echarts diagram, avoiding unnecessary coupling.

• Description:

The main component (parent component) is used only to hold the main content area and the external box corresponding to the ECHRTS diagram; A real container with sub-component implementations loads the entire chart and implements data and chart rendering for the corresponding chart.

• Core code:

Parent: <div class="p-section bg"> <div class="p-title"> Business type ratio </div> <! <ywlxzbChart></ywlxzbChart>Copy the code

<div id="ywlx" style="width: 100%; height: 195px" v-loading="ywlezbLoading" ></div> </template> <script> import echarts from "echarts"; import * as API from "api/home.js"; export default { data() { return { ywlezbLoading: false, myChartLine: null, formData: [], nameData: [], }; }, name: "ywlxzbChart", methods: {/ / get the data, Promise to ensure order execution and painting getProfessionalCardsCount () {return new Promise ((resolve, reject) => { this.ywlezbLoading = true; API.getProfessionalCardsCount() .then((res) => { this.ywlezbLoading = false; if (res.code == 200) { this.formData = res.data.professions; this.nameData = []; this.formData.map((i) => { this.nameData.push(i.name); }); } resolve(res); }) .catch((err) => { this.ywlezbLoading = false; reject(err); }); }); }, myEcharts() {this.myChartLine = echarts.init(document.getelementById ("ywlx")); Var option = {tooltip: {trigger: "item" formatter: "{a} <br/>{b} : {c} ({d}%)",}, color: ["#31ceee", "#20adeb", "#6be7e8"], legend: { orient: "vertical", x: "right", align: "left", padding: [10, 5, 0, 0], data: this.nameData, formatter: function (name) { var oa = option.series[0].data; var num = oa[0].value + oa[1].value + oa[2].value; for (var i = 0; i < option.series[0].data.length; i++) { if (name == oa[i].name) { return name; }}}}, series: [{name: "type of business accounted for," type: "pie", the radius: "68%", the center: [" 40% ", "50%"], data: this.formData, itemStyle: { normal: { label: { show: true, // position:'inside', formatter: "{b}: {d}%", }, }, labelLine: { show: true }, }, labelLine: { normal: { length: 1, }, }, }, ], }; // Display the chart using the configuration items and data you just specified. this.myChartLine.setOption(option); },}, mounted() {window.adDeventListener ("resize", () => {if (this.mychartLine) {this.mychartline.resize (); // If (this.mychartLine) {this.mychartline.  }}); this.getProfessionalCardsCount().then((res) => { this.myEcharts(); }); }, beforeDestroy() {// Call if (! this.myChartLine) { return; } this.myChartLine.dispose(); this.myChartLine = null; }}; </script> <style> </style>Copy the code

• Note:

1. The data and drawing of echarts chart are divided into two parts, respectively, which are clear and hierarchical.
2. The actual diagram drawing operation must be performed after the data request assignment; To ensure execution accuracy and reliability, Promise is used.
3. Reset the diagram when the component is destroyed.
4. To improve the user experience, it is strongly recommended to add loading state to chart containers.

• Effect:

3. The most complete echarts chart case and example resource site collation.

1. A resource:Share your I (Recommended index: ⭐⭐⭐⭐)

• Advantages: rich case resources, subject classification, retrievable, fast access.
• Disadvantages: No paging.

2. Resources:ISWWQ.com (Recommended index: ⭐⭐⭐⭐)

• Advantages: Rich case resources, searchable, subject classification.
• Disadvantages: No paging, slow access.

3. Three resources:PPChart (Recommended index:⭐ ⭐ ⭐ ⭐ ⭐)

• Advantages: rich case resources, subject classification and classification of fine, paging, retrievable, faster access.
• Disadvantages: None at present.

4. Resources:ECHARTS community (Recommended index: ⭐⭐⭐)

• Advantages: Rich case resources, subject classification and more detailed classification, pagination, searchable, login and community.
• Disadvantages: Slow access, advertising.

5. Resource five:Made A Pie (Recommended index: ⭐⭐⭐⭐)

• Advantages: Rich case resources, searchable, subject classification.
• Disadvantages: Slow access, no paging.

6. Resources 6:ECharts official case (Recommended index:⭐ ⭐ ⭐ ⭐ ⭐)

• Advantages: Official cases, stable resources, multiple subject categories, adjustable mode, and you can view the configuration items of corresponding cases directly.
• Disadvantages: fewer case resources, no pagination, no retrieval provided.

7. Seven resources:chartsdev.com (Recommended index: ⭐⭐)

• Advantages: Rich case resources, subject classification.
• Disadvantages: average access speed, not out of the box, poor typesetting, poor applicability, etc.

8. Resource eight:Imitation ECharts (Recommended index: ⭐⭐⭐)

• Advantages: More stable resources, icon effect loading speed.
• Disadvantages: less case resources, no pagination, no retrieval, etc.

9. Resource nine:DataInsight (Recommended index: ⭐⭐)

• Advantages: Abundant case resources.
• Disadvantages: slow access, no subject classification, no retrieval and so on.

10. Resource ten:Ali Cloud – the original ECharts official community Make A Pie case source code and chart diagram (Recommended index:⭐ ⭐ ⭐ ⭐ ⭐)

• Advantages: Provide the original ECharts official community Make A Pie website all case source code and its corresponding legend, can be consulted and developed into A shared resource community or website.
• Disadvantages: Not implemented out of the box.
• Extraction code: 6L3T.

11. Resource 11:Baidu Cloud – the original ECharts official community Make A Pie case source code and chart diagram (Recommended index:⭐ ⭐ ⭐ ⭐ ⭐)

• Advantages: Provide the original ECharts official community Make A Pie website all case source code and its corresponding legend, can be consulted and developed into A shared resource community or website.
• Disadvantages: Not implemented out of the box.
• Extraction code: QQSY.