vue+echarts开发单页面多图展示demo

demo源码托管在github上：vue-echarts的demo

项目剖析：

    echarts结合vue框架开发的一个单页面demo，另外用到了第三方框架iviewUI作为日历的展示使用；附加功能：自定义全选反选组件，echarts图表自适应屏幕重绘效果，关键代码如下

自适应重绘代码+全选反选代码

自适应代码+全选反选代码+页面切换代码

window.addEventListener('resize', function() { // 第一步：main中添加style="100%",第二步：添加.bind(this)
            this.pieChart.resize()
		}.bind(this));

init() {
            // this.prevClass = this.$parent.$el._prevClass
            this.option = this.myChart.getOption()
            this.resetOption = this._deepCopy(this.myChart.getOption())
            this.initProList()
        },
        initProList() {
            let arr = []
            if (this.prevClass !== 'point') {
                this.showProduct = true
                this.option.xAxis[0].data.forEach((pro, index) => {
                    arr.push({
                        name: pro,
                        selected: true
                    })
                })
                this.pro_list = arr
            }
        },
        _deepCopy(obj) {
            let str, newobj;
            str = newobj = obj.constructor === Array ? [] : {};
            if (typeof obj !== 'object') {
                return
            } else if (window.JSON) {
                str = JSON.stringify(obj) // 系列化对象
                newobj = JSON.parse(str) // 还原
            } else {
                for (var i in obj) {
                newobj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i];
                }
            }
            return newobj;
        },
        pro_toggle(pro, index) {
            pro.selected = !pro.selected
            this.selectAll_flag = this.isSelectAll()
            this.redraw()
        },
        redraw() {
            let option = this._deepCopy(this.resetOption)
            let count = 0
            this.pro_list.forEach((pro, index) => {
                index = index - count
                if (!pro.selected) {
                    option.xAxis[0].data.splice(index, 1)
                    option.series.forEach((obj) => {
                        obj.data.splice(index, 1)
                    })
                    count++
                }
            })
            this.myChart.setOption(option)
        },
        isSelectAll() {
            let flag = true
            this.pro_list.forEach((pro) => {
                if (!pro.selected) {
                    flag = false
                }
            })
            return flag
        },
        selectAll() {
            this.selectAll_flag = !this.selectAll_flag
            this.pro_list.forEach((pro) => {
                pro.selected = this.selectAll_flag
            })
            this.redraw()
        },
        showProPane() {
            this.pro_filter_flag = !this.pro_filter_flag
        }

init() {
      this.items = document.querySelectorAll('.flex-container .item')
      for (let i = 0; i < this.items.length; i++) {
        this.items[i].dataset.order = i + 1;
      }
    },
    clickChart(clickIndex) {
      let activeItem = document.querySelector('.flex-container .active')
      let activeIndex = activeItem.dataset.order
      let clickItem = this.items[clickIndex - 1]
      if (activeIndex === clickIndex) {
        return
      }
      activeItem.classList.remove('active')
      clickItem.classList.add('active')
      this._setStyle(clickItem, activeItem)
    },
    _setStyle(el1, el2) {
      let transform1 = el1.style.transform
      let transform2 = el2.style.transform
      el1.style.transform = transform2
      el2.style.transform = transform1
    }

项目运行结果：

    ​编辑

​编辑

​编辑

​编辑​编辑