Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to package echart into components in vue". The editor shows you the operation process through an actual case. The method of operation is simple, fast and practical. I hope this article "how to package echart into components in vue" can help you solve the problem.

1. Install Echarts

The first step must be to install Echarts. Use the cd command to enter the project root, and then type the following command line:

Cnpm install echarts-S

The successful installation will be shown as follows, and the dependencies attribute in package.json will be automatically added with Echarts dependency:

Install Echarts

Package.json

two。 Using Echarts in vue projects

After the installation is successful, the first thing we need to consider is how to import Echarts into the vue project and successfully initialize a diagram.

Next I will build two .vue files chart.vue and radar-chart.vue as the basis for this example. The role of chart.vue is to invoke the radar map, and the role of radar-chart.vue is to provide the radar map:

/ / chart.vue import RadarChart from'.. / components/radar-chart' export default {name: "chart", components: {RadarChart}, component: RadarChart} / / radar-chart.vue export default {name: "radar-chart"}

Okay, officially create an Echarts chart.

(1) Import echart in radar-chart.vue:

/ / introduction of basic template import echarts from 'echarts/lib/echarts' / / introduction of radar map component import' echarts/lib/chart/radar' / / introduction of prompt box and legend component import 'echarts/lib/component/tooltip' import' echarts/lib/component/legend'

(2) create chart configuration data. The data format can be found on the Echarts official website:

Const option = {tooltip: {}, radar: {indicator: [{name: 'sports', max: '100'}, {name:' mathematics', max: '100'}, {name:' chemistry', max: '100'}, {name:' labor', max: '100'}, {name:' physics', max: '100'}], center: [' 50%' '51%']}, series: [{type: 'radar', itemStyle: {normal: {areaStyle: {type:' default'}, data: [{value: [58 value: [58 normal:'# f0ad4e'}]}

(3) initialize the chart:

Const chartObj = echarts.init (document.getElementById ('radar')) chartObj.setOption (option)

The above steps are summarized as the following code. In addition, when creating the configuration data option and initializing it, it should be executed in the mounted hook function, so as to ensure that when it is time to obtain the dom, the dom has finished rendering:

/ / chart.vue import RadarChart from'.. / components/radar-chart' export default {name: "chart", components: {RadarChart} Component: RadarChart} / / radar-chart.vue / / introduce basic template import echarts from 'echarts/lib/echarts' / / introduce radar map component import' echarts/lib/chart/radar' / / introduce prompt box and legend component import 'echarts/lib/component/tooltip' import' echarts/lib/component/legend' export default {name: "radar-chart", mounted () {const option = {/ / create chart configuration data tooltip: {} Radar: {indicator: [{name: 'sports', max: '100'}, {name:' mathematics', max: '100'}, {name:' chemistry', max: '100'}, {name:' labor', max: '100'}, {name:' physics, max: '100'}], center: [' 50% chemistry,'51%']} Series: [{type: 'radar', itemStyle: {normal: {areaStyle: {type:' default'}, data: [{value: [58 value: [58 value: 56, 78, 64, 98], name: "scores for each item" ItemStyle: {normal: {color:'# f0ad4e'}]} / / initialization chart const chartObj = echarts.init (document.getElementById ('radar')) chartObj.setOption (option)} .container {width: 500px Height: 400px;}

The effect goes like this:

Effect one

3. Encapsulate Echarts as a component

We have successfully created a radar map above, but it is clear that the data in radar-chart.vue is dead and cannot be called repeatedly. Let's get started on the package.

The idea of encapsulation is as follows:

(1) chart.vue transmits a set of personalized data to radar-chart.vue

(2) radar-chart.vue receives data through the props option

(3) extract the received data and overwrite the configuration data option

(4) initialize the chart

(if you don't understand how to pass data, you can take a look at another article I mentioned at the beginning, "an example of communication between vue's parent and son components (props, $ref, $emit)."

The specific code is as follows:

/ / chart.vue (parent component) / / pass the data import RadarChart from'.. / components/radar-chart' export default {name: "chart", components: {RadarChart}, component: RadarChart, data () {return {items: [{name: 'sports', value: 95, max: '100'}, {name:' math', value: 55, max: '100'} {name: 'chemistry', value: 75, max: '100'}, {name:' labor', value: 85, max: '100'}, {name:' cooking', value: 85 Max: '100'}} / / radar-chart.vue (subcomponents) / / introduce basic template import echarts from' echarts/lib/echarts' / / introduce radar map component import 'echarts/lib/chart/radar' / / introduce cue box and legend component import' echarts/lib/component/tooltip' import 'echarts/lib/component/legend' export default {name: "radar-chart" Props: {/ / accept the data passed by the parent component items: {type: Array, default () {/ / default data Enable return without drama [{name: 'biology', value: 95, max: '100'}, {name:' mathematics', value: 55, max: '100'}, {name:' Chinese', value: 86, max: '100'}, {name:' physics', value: 54, max: '100'}, {name:' art', value: 59, max: '100'}]}} }, mounted () {let values = [] / / extract the received data this.items.forEach (el = > {values.push (el.value)}) const option = {/ / overwrite configuration data option tooltip: {}, radar: {indicator: this.items, center: ['50%','51%']}, series: [{type: 'radar' ItemStyle: {normal: {areaStyle: {type: 'default'}, data: [{value: values, name:' scores' ItemStyle: {normal: {color:'# f0ad4e'}]} / / initialize const chartObj = echarts.init (document.getElementById ('radar')) chartObj.setOption (option)}} .container {width: 500px Height: 400px;}

After encapsulation, you can pass custom data and call it repeatedly. The final effect of the above code is as follows:

Effect two

4. Detail optimization

The basic functions have been implemented, so let's optimize some details.

I don't know if you have found that the-id in radar-chart.vue is written dead, what will be the problem? When a page calls the radar component twice, the id repeats, reporting an error.

To solve this problem, I introduced uuid (which comes with the vue-cli project and does not need to be installed separately), which is intended to match each generated radar map with a non-repetitive random id. It should also be noted that we need to do this task of generating id in the created () method. If it is written in mounted, it will fail to initialize, because document.getElementById () will be executed before rendering the new ID. The specific code is as follows:

Import RadarChart from'.. / components/radar-chart' export default {name: "chart", components: {RadarChart}, component: RadarChart, data () {return {items_one: [{name: 'sports', value: 95, max: '100'}, {name:' mathematics', value: 55, max: '100'}, {name:' chemistry', value: 75, max: '100'}, {name:' labor' Value: 85, max: '100'}, {name:' cooking', value: 85, max: '100'}], items_two: [{name:' sports', value: 22, max: '100'}, {name:' mathematics', value: 55, max: '100'}, {name:' chemistry', value: 75, max: '100'}, {name:' labor', value: 85, max: '100'} {name: 'cooking', value: 85 Max: '100'} / / introduce basic template import echarts from' echarts/lib/echarts' / / introduce radar map component import 'echarts/lib/chart/radar' / / introduce cue box and legend component import' echarts/lib/component/tooltip' import 'echarts/lib/component/legend' / / introduce uuid file import uuidv1 from' uuid/v1' export default {name: "radar-chart" Props: {items: {type: Array, default () {return [{name: 'biology', value: 95, max: '100'}, {name:' mathematics', value: 55, max: '100'}, {name:' Chinese', value: 86, max: '100'}, {name:' physics', value: 54, max: '100'}, {name:' art', value: 59 Max: '100'}]},}, data () {return {elId:''}}, created () {this.elId = uuidv1 () / / get random id}, mounted () {let values = [] this.items.forEach (el = > {values.push (el.value)}) const option = {tooltip: {}, radar: {indicator: this.items Center: ['50% score,'51%']}, series: [{type: 'radar', itemStyle: {normal: {areaStyle: {type:' default'}, data: [{value: values, name: 'scores' ItemStyle: {normal: {color:'# f0ad4e'}}]}]} const chartObj = echarts.init (document.getElementById (this.elId)) ChartObj.setOption (option)} .container {width: 500pxposition height: 400px;}

Successfully resolved the problem of duplicate id:

That's all for "how to encapsulate echart as a component in vue". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.