Vue和ECharts

• 组件化形式：

1. 新建子组件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>
   

2. 新建一个调用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>
   

3. 把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加上对应的路径就能去到我们要去的地方了。

4. 但是现在问题来了，实际应用中，我们的参数都是从父组件传到子组件，父组件传值到子组件我们都是
   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)
    }
}

5. 在父组件中设置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>