2019-01-22

这段时间，将之前得百度地图echarts项目进行了完善。
每一次都是一段摸索得过程啊。
用了两天，去将地图上的标点和checkbox进行关联，出了很多错，用了很蠢的方法实现了。
就记录下思路吧：
v-bind:checked 绑定checkbox状态。也是通过传递的参数 options来进行操作的。一直围绕option就好。
中间的问题就是options数组里的数据类型不知道怎么变来变去的，要一直用tostring来转换成字符串。虽然是取巧解决了，但是之后还要深入研究一下。

然后就是在一个页面里面做两个tabs控制图表的问题。

77c3f3652a417cc9b3531cd3381fa7c.png
做了很久，试过了我所能想到的所有方法，以及在网上查的方法。
因为我一开始做用的是router-link和router-view组合做的，然后再下面再加上一个的话，直接复制粘贴肯定是不行的（同一页面router-link只能控制一个router-view），期间试过命名路由，嵌套路由，拆分组件，还有最笨的v-show（图表渲染不出来，而且是真的蠢方法），都不行。虽然都不行，起码把之前不怎么会的命名路由，嵌套路由都整明白了，还是有收获的。
最后实在不行，就去问老部长了。他两句话就把我点醒了：
e4d781e151921dedd4c5f3957858623.png
我太执着于路由了。而且vue的知识也不够全面。
所以直接用路由的跳转就好了
https://jsfiddle.net/chrisvfritz/o3nycadu/ 参考这个官方例子。
很简单的代码

<template id="Charts">
        <div>
            <div style="margin-top:10px;">
                <div>
                    <button v-for="tab in tabId" v-bind:key="tab" @click="componentId=tab">{{tab}}</button>
                    <component :is="componentId"></component>
                </div>
            </div>
            <div>
                <button v-for="tabs in tabIds" v-bind:key="tabs" @click="componentIds=tabs">{{tabs}}</button>
                <component :is="componentIds"></component>
            </div>
        </div>
    </template>

index.js

        var Charts = $('#Charts').html();
        Vue.component('Charts', {
            data: function () {
                return {
                    tabId:['year','month','day'],
                    componentId:'year',
                    tabIds:['year','month','day'],
                    componentIds:'year'
                };
            },
            methods: {},
            mounted: function () {
            },
            template: Charts,
        })
        var Charts = { template: '<Charts></Charts>' }