vue实战+echarts使用小结

鑫探索 http://info.andlinks.com （线上地址，可看）

vue全家桶2.0带webpack全部可配置项的pc端项目

接手项目一期是做理财产品洞察模块（包括发行态势和产品列表）

整个项目header是固定的一般组件，router-view是所有路由组件容器 keep-alive缓存顶部的两个tab路由切换，需要保存tab中子页面的状态，在返回时回到上一次操作过的状态。

在这里插入代码片
 <div id="app">
        <Headers></Headers>
        <div style="padding-top: 80px;background: #e8ebf2;min-height: 100%;padding-bottom: 40px;" class="main-content">
      <keep-alive :include="['newFinancialProduct','officialAccounts']"> <router-view/></keep-alive> 
        </div>
    </div>
 设置include的前提是  router.js设置 缓存name 并且在自己的组件中 export default暴露出name: "newFinancialProduct",组件的name和路由中定义的组件name必须一致，这样就可以只缓存指定的组件状态
        {
        path: '/newFinancialProduct',
        name:'newFinancialProduct',
        component: ()=>import('@/views/newFinancialProduct/index.vue'),
    },

在顶部导航栏切换时我需要重新渲染已被缓存的组件，发行态势页面使用的都是echarts里面的折线图和环形饼图，而这个页面的布局是嵌套在侧边栏的el-tabs里面的tabpane,我给echarts 图表做了监听浏览器窗口的自适应显示，我做完这个模块的数据展示功能后发现切换tab回到这个tabpane图表会缩成100px，并且在顶部切换导航时也会出现图表页面空白的现象，这两个问题都是echart在tab切换时会遇到的显示问题，于是我给整个图表组件做了重新渲染v-if 每次进来页面的时候都重新渲染 这个时候需要激活缓存组件的缓存状态，在activated这个钩子函数里通过判断tab切换时显示的name就可以定位到图表的显示和隐藏。

在这里插入代码片
   activated() {
        this.setIsShowChartList(false);
        this.setShowPublicEcharts(false)
        this.setSameLineChart(false)
        if (this.activeName == 'second') {
            this.setShowFaxingType(false)
            this.showFaxingType = store.state.user.showFaxingType;
        } else if (this.activeName == 'first') {
            this.setShowFaxingType(true)
            this.showFaxingType = store.state.user.showFaxingType;
            console.log(this.showFaxingType, 'actived')
        }
    },

折线图或者echarts里的柱状图折线图，中国地图，以及环形饼图在渲染数据都是修改series[0].data,有根据总量和个数区分的设置 stack:‘总量’，在vue项目中使用echarts图表时的配置项时可以先把每个图表的options设置成data的默认数据，在后端数据没出来的时候使用，这样绘图的方法里也会简单明了很多。在借口返回的回调函数里修改配置项的参数调用绘图方法直接重新渲染就可以了。
在处理配置项数据的时候需要注意的是在遍历返回的数组中设置对应的空数组，每次请求数据都会将数组置空不会堆叠数据，所以data数组不能定义在data数据项里面。

  //渲染数据
                let bankPieArr = JSON.parse(JSON.stringify(data.bankPie)) //银行名称
                let str = JSON.parse(JSON.stringify(data.bankLine)) //时间列表
                let arrBanek = []
                let arr = str.bankProductCounts.map(item => {
                    let obj = {
                        name: "",
                        type: 'line',
                        // stack: '总量',
                        data: []
                    }
                    obj.name = item.bankName;
                    obj.data = item.count;
                    obj.type = 'line';
                    // obj.stack = '总量'
                    arrBanek.push(item.bankName)
                    return obj
                })
                // console.log(arr, "arr")
                that.bankOption.legend.data = arrBanek
                that.bankOption.series[0].data = bankPieArr

绘图函数中两个典型特殊的图表的词云，词云的使用需要重新安装echarts-keyCloud插件

  drawEmotionalChart(param) {
            let option = param || this.EmotionalChartOption
            let mychart = echarts.init(document.getElementById('Emotional-chart'))
            mychart.setOption(option, true);
            window.addEventListener('resize', () => {
                mychart.resize();
            })
        },
        drawKeyCloudChart(param) {
            let option = param || this.KeywordOption
            let mychart = echarts.init(document.getElementById('Keyword-chart'))
            mychart.clear();   //第一次渲染组件时在actived mounted 以及updated函数中都会渲染到词云，actived绘图是为了在顶部tab切换时进入该页面触发v-if重新渲染，updated是在左边侧边栏tab中加载的组件里有一个内部tab切换图表和数据的展示，整个页面就是根据tab里的筛选器数据联动下面的tab展示对应的直观图表和数据信息列表，而ehcarts图表本身就会因为tab的切换难以精确显示，在该组件的钩子函数updated函数里可以获取到内部tab页面的信息和dom元素，所以在切换子tab的时候需要在uptated中重新绘图，而mounted中也需要加载绘图的函数，如果顶部导航不切换，直接进入本页面也是要加载图表的渲染的，所以这样一来在页面初次加载的时候同时进行了组件的activated，mounted,updated三个钩子函数对图表的渲染，对于其他图表折线图和环形饼图等没有出现数据堆叠渲染的情况，只有在词云的数据渲染时会出现数据堆叠渲染的现象，解决这个尖锐的小问题就是使用mychart.cleat()这个函数 并且每次重新绘图时都不要忘了接口数据的重新调用，不然页面还是错乱的。
            
            mychart.setOption(option, true);
            window.addEventListener('resize', () => {
                mychart.resize();
            })
        },

根据页面尺寸动态修改echart显示样式
在mounted函数里写window的监听函数和加载判断就可以了

    mounted() {
        // if (this.ChartPageData.timeZone == 0) {
        this.yqdata = '';
        this.comparedata = ''
        // }
        if (window.innerWidth < 1366) {
            this.areaChartOption.xAxis[0].axisLabel.textStyle.fontSize = '11';
            this.areaChartOption.yAxis[0].axisLabel.textStyle.fontSize = '11';
            let that = this
            if (document.getElementById('yuqingechart')) {
                this.$nextTick(() => {
                    that.drawAreaChart(this.areaChartOption);
                })
            }

        } else {
            let that = this
            this.areaChartOption.xAxis[0].axisLabel.textStyle.fontSize = '14';
            this.areaChartOption.yAxis[0].axisLabel.textStyle.fontSize = '14';
            if (document.getElementById('yuqingechart')) {
                this.$nextTick(() => {
                    that.drawAreaChart(this.areaChartOption);
                })
            }

        }
        window.addEventListener('resize', () => {

            if (window.innerWidth < 1366) {
                this.areaChartOption.xAxis[0].axisLabel.textStyle.fontSize = '11';
                this.areaChartOption.yAxis[0].axisLabel.textStyle.fontSize = '11';
                let that = this
                if (document.getElementById('yuqingechart')) {
                    this.$nextTick(() => {
                        that.drawAreaChart(this.areaChartOption);
                    })
                }

            } else {
                let that = this
                this.areaChartOption.xAxis[0].axisLabel.textStyle.fontSize = '14';
                this.areaChartOption.yAxis[0].axisLabel.textStyle.fontSize = '14';
                if (document.getElementById('yuqingechart')) {
                    this.$nextTick(() => {
                        that.drawAreaChart(this.areaChartOption);
                    })
                }

            }
        })

        let that = this
        if (document.getElementById('yuqingechart')) {
            this.$nextTick(() => {
                that.drawKeyCloudChart();
                that.drawCategoryChart();
                that.drawEmotionalChart();

            })
        }

        this.getClassifyData();
        this.getnewsPageList(this.newsPageData);
        this.getChartData(this.ChartPageData);
        this.setIsShowChartList(false)

    },

    activated() {
        this.setIsShowChartList(false);
        this.activeName = 'first';

    },

去详情页打开新页面

 toArticail(id) {
            const {
                href
            } = this.$router.resolve({
                path: `BankArticleDetail`,
                query: {
                    id: id
                }
            });
            window.open(href, "_blank");
        },

1- ** 发行态势**

在这里插入代码片

 1. elment-ui el-select组件
<el-select v-model="value1" multiple :multiple-limit=4   限制选择4项超出4项禁用并且overflow hidden
    placeholder="请选择" style="width:100%" @change="getJigou(value1)">
                           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                           </el-option>
                       </el-select>

2.处理数据
1.对所有数据筛选出需要的数组对象
接口会返回所有大类别加小类别
由于布局限制和事先的数据处理必须对所有数据进行下一步的处理
大类别包含小类别的数据
先处理大类别对应的筛选项中的小类别，遍历数组得到两个新数组，用来处理大类别和小类别的数据

 let banktypes = []
                let bankarr = []
                res.bankTypes.map(item => {
                    let obj = {
                        classify: item.classify,
                    };
                    let obj2 = {
                        classify: item.classify,
                        bankName: item.bankName
                    }
                    bankarr.push(obj2)
                    banktypes.push(obj);
                })

2.处理对应的大类别和小类别
股份，城市，商业银行对应银行类别筛选总数据

     let guoyouarr = []
                    let gufenarr = [];
                    let cityarr = [];
                    bankarr.map(item => {
                        if (item.classify == '国有商业银行') {
                            let obj = {
                                value: item.bankName
                            }
                            guoyouarr.push(obj)
                        } else if (item.classify == "股份制商业银行") {
                            let obj = {
                                value: item.bankName
                            }
                            gufenarr.push(obj)
                        } else if (item.classify == "城市商业银行") {
                            let obj = {
                                value: item.bankName
                            }
                            cityarr.push(obj)
                        }
                    })

处理出需要数据

 let guoyou = [{
                    id: 1,
                    value: '全部'
                }]
                guoyouarr.map((item, i) => {
                    let obj = {
                        id: i + 2,
                        value: item.value
                    }
                    guoyou.push(obj)
                })
                this.guoyouBankSpan = guoyou; //国有银行单选
                let gufen = [{
                    id: 1,
                    value: '全部'
                }]
                gufenarr.map((item, i) => {
                    let obj = {
                        id: i + 2,
                        value: item.value
                    }
                    gufen.push(obj)
                })
                this.gufenBankSpan = gufen; //股份银行单选
                let city = [{
                    id: 1,
                    value: '全部'
                }]
                cityarr.map((item, i) => {
                    let obj = {
                        id: i + 2,
                        value: item.value
                    }
                    city.push(obj)
                })
                this.cityBankSpan = city; //城市银行单选

大类别会有重复对象数据
利用数组reduce方法去重大类别属性

       let hash = {};
                banktypes = banktypes.reduce(function (item, next) {
                    hash[next.classify] ? '' : hash[next.classify] = true && item.push(next);
                    return item
                }, []) //大类别去重
                let arr = []
                banktypes.map((item, i) => {
                    let obj = {
                        id: i + 1,
                        value: item.classify
                    }
                    arr.push(obj)
                })
                this.BankCategorySpan = arr //银行大分类

3.针对下拉框和input组合成的筛选器

  <el-select v-model="value" placeholder="请选择" size='middle' class="search-select" @change="checkKType(value)">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-input v-model="input" placeholder="请输入关键词" class="search-input" @change="changeIpt(input)" clearable></el-input>

在传参数会容易出现默认传参错误
input筛选器出现的结果分页器的结果应该从第一页开始

        changeIpt(v) {
            // console.log(v)
            this.input = v;
            this.newsPageData.keywords = v;
            this.newsPageData.page = 1;
            this.currentPage = 1;
            if (!v) {
                this.newsPageData.keywordsType = 0;
            } else if (v && this.value == '搜标题') {
                this.newsPageData.keywordsType = 1;
            } else if (v && this.value == '搜全文') {
                this.newsPageData.keywordsType = 2;
            }
        },
        checkKType(v) {
            this.value = v;
            this.newsPageData.page = 1;
            this.currentPage = 1; 
            if (v == '搜标题') {
                this.newsPageData.keywordsType = 1;
            } else if (v == '搜全文') {
                this.newsPageData.keywordsType = 2;
            }
        },