Vue CLI3.0 Combined with Echarts3.0 and Method Example


Echarts provides intuitive, enrichment, highly personalized and customized data visualization charts. And VUE is more appropriate to manipulate the data.

Recently, I have been busy moving, I haven’t updated the blog, I will take an air to write a blog about Vue and Echarts. Below is a small Echarts demo combined with the map, I compare the two dependencies of Echarts and Vue-Echarts when using NPM, and finally decided to use the Echarts dependencies, because it is closer to the original, smaller, if you live to Vue The cycle is more understandable, it is easier to operate.

Let’s talk about making such an Echarts diagram. Not much to say, let’s take a detailed introduction

1. First introduced Echarts in the Vue project And globally configure

   introduced and hanging in main.js On the Prototype of Vue 
Import Echarts from “Echarts”; Vue.Prototype. $ Echarts = Echarts;

2. Create a box

It’s almost like this, set an ID. 3. Echarts component
4. Configure EC inside DATA.HARTS configuration item and data

5. Initializing the Echarts chart in the MOUNTED lifecycle, get the Echarts node and rendered in the corresponding method.

vue cli3.0结合echarts3.0与地图的使用方法示例 First, the initialization function is called in MOUNTED

this.drawline (); vue cli3.0结合echarts3.0与地图的使用方法示例

Then get Echarts nodes

this.Chart1 = this. $ Echarts.init (Document.getlementByid (“chart1”)); this.chart1.setoption (this. Items2);
   6. When the screen size changes, we render the chart 

This step is simple. Just call the Resize method

  Window.onResize = () => {this.Chart1.resize ();};  

in this way we have done such a simple chart, I want to make more cool chart echarts please read the document, let’s look at how to use echarts map function
Echarts Map Use

1.echarts map function is not complicated, only need to introduce maps of the corresponding provincial countries can instantly


Import “Echarts / Map / JS / province / beijing.js “;

2. Configure the map configuration item

3. Modify the default data vue cli3.0结合echarts3.0与地图的使用方法示例

There will be some problems after the configuration, and some names will have a problem with the display, just like this

 The location of the text is not very satisfactory, we adjust the location of the text. Open the map JS file, modify the latitude and longitude, know your own satisfaction.   
This Operating our map, is it very simple ?! I like to add a attention, I will update some small articles

, which will be updated regularly

vue cli3.0结合echarts3.0与地图的使用方法示例
The above is this All of the contents of the article, I hope this paper has a certain reference value for everyone’s learning or work, thank you for your support of Tumi Clouds.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment