- 组件化形式：
-
新建子组件redarChart.vue
<template> <div> <div class="echarts" id="echarts-dom"></div> </div> </template> <script> import echarts from 'echarts' export default { name: 'echarts', data() { return {} }, mounted() { let $echartsDOM = document.getElementById('echarts-dom') let myEcharts = echarts.init($echartsDOM) let option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] } myEcharts.setOption(option) } } </script> <style scoped> .echarts { width: 100%; height: 100%; } </style> -
新建一个调用redarChart.vue的父组件chart.vue,注意，这里一定要给这个子组件设置高度，要不然他就不会显示了。
<template> <div> <h1>testtest</h1> <radar-chart class="container"></radar-chart> </div> </template> <script> import radarChart from '@/components/redarChart' export default { name: "chart", components: { radarChart } } </script> <style scoped> .container{ width: 500px; height: 300px; } </style> -
把chart.vue在router下面的index注册一下
import chart from '@/components/chart' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/chart', name: 'chart', component: chart }, ] })
这样在url加上对应的路径就能去到我们要去的地方了。
- 但是现在问题来了，实际应用中，我们的参数都是从父组件传到子组件，父组件传值到子组件我们都是
props
https://cn.vuejs.org/v2/guide/components-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81
实践起来特别简单
在子组件redarChart中把vue部分改成下面这个样子,也就是props，在props增加了对option的声明，这个option是需要父组件传递给他的
export default {
name: 'echarts',
props: {
option: {
type: Object,
default(){
return {}
}
}
},
data() {
return {}
},
mounted() {
let $echartsDOM = document.getElementById('echarts-dom')
let myEcharts = echarts.init($echartsDOM)
let option = this.option;
myEcharts.setOption(option)
}
}
-
在父组件中设置option再传递进去。
<template> <div> <h1>testtest</h1> <radar-chart :option="option" class="container"></radar-chart> </div> </template> <script> import radarChart from '@/components/redarChart' export default { name: "chart", data(){ return{ option :{ title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] } } }, components: { radarChart } } </script> <style scoped> .container{ width: 500px; height: 300px; } </style>
