echarts+vue监听magicType的切换修改yAxis的min值

echarts通过on监听toolbox修改配置项值

文章目录

1.需求

2.思路

3.方法

4.问题

---

需求

        先要求实现柱状图与折线图的互相切换，直接使用echarts自带的toolbox.magicType.type即可实现

// 工具箱
toolbox: {
    show: true,
    feature: {
        magicType: {          
            type: ['line', 'bar']
        },  //切换为折线图，切换为柱状图
    }
},

        但是因为数据问题，进一步要求我们折线图为了不显得空旷，y轴不要从0开始，但是柱状图为了不显得数据失真，y轴要从0开始，也就是这样

 柱状图从0开始

 折线图不从0开始

        而且要适应多个y轴，多个数据，即series是数组形式而非对象，yAxis也是数组形式

思路

        1.一开始想通过feature自定义按钮与onclick事件自己写，但是感觉还得自己改series里的type类型，而且也不一定能取到chart值，所以使用监听.on中的‘magictypechanged’类型，并修改，来统一切换柱状图折线图

        2.由于后台返回的series是对象数组，里面有至多8条不同的数据（电压，电流，功率等，所以需要不同的yAxis），因为都在一张图上，那么就干脆取最小的数来做yAxis的min值，向产品询问发现对方接受

        3.大对象数组套小数组结构获取最小值

方法

        1.监听on事件或自己重写toolbox可以参考文章echarts magicType点击事件_吃糖牙疼的博客-CSDN博客_echarts magictype

Echarts:重写toolbox的还原工具并监听click事件_糖醋麻辣的博客-CSDN博客_echarts toolbox点击事件echarts监听折线柱图切换的方法_前端小狮的博客-CSDN博客ECharts.js学习（三）交互组件 - 走看看

        通过这些文章启示和自己的部分实践，我将on放在了echarts.init之后，setOptions之前

// 声明echarts
// chartData是配置项内容，从父组件传过来的数据，用watch监听
this.chart = echarts.init(this.$el, 'macarons')
// 监听折柱切换
this.chart.on('magictypechanged',(params)=>{
    // 柱状图不改变垂直方向的起始点
    if(params.currentType == 'bar'){
        this.chartData.yAxisData[0].min = 0
        this.chartData.seriesData.map(item=>{
            item.type = 'bar'
            return item
        })
     }else{
         // 折线图改变垂直方向的起始点
         // 获取最小值
         let min = this.minMaxList(this.chartData)
         // console.log(min)
         this.chartData.yAxisData[0].min = min-1
         this.chartData.seriesData.map(item=>{
            item.type = 'line'
            return item
         })
      }
})
this.setOptions(this.chartData)

但是由于这是一个公共的组件，所以我其实在监听chartData（chartData是配置项内容，从父组件传过来的数据，用watch监听），在watch里其实我还在setOptions，所以上面的代码最后一句根本不会执行，执行没有意义，因为上面的判断已经修改了chartData，触发watch。

        2.on事件会返回当前图标类型，当为柱状图时，无脑min是0，但是折线图需要获取series（对象数组类型，里面有data键值对也是数组）的最小值。

        3.先获取series的各个对象的data，先定义一个arr，之后使用map和push.apply获取一个超大数组，这个数组是series的data的值的集合：

let arr = []
// 获取图表所有数据值
data.seriesData.map(item=>{
    arr.push.apply(arr,item.data)
})

        这个超大数组可能有重复值，虽然后续操作对降不降重无所谓，但还是降吧，并取最小值。

// 去重并转为数组
arr = Array.from(new Set(arr))
// 获取数组最小值
let min = Math.min(...arr)

         将这个值return回on事件的type为折线的事件里，这样就定义了min，由于yAxis是数组，所以直接赋值this.chartData.yAxisData.min = min-1是不对的，只要给第一个赋值就行（不确定）

this.chartData.yAxisData[0].min = min

 问题

        1.这样做问题有一点就是在后台没有返回值的时候是无法监听到chartData的变化，因为没有值传进来，而值第一次进来时必定是y轴从0开始的，只能通过点击切换折柱来变化，所幸只有第一次有这个问题，watch里也不能放这些折柱判断，因为一切换就会改type类型或是min值，就会触发watch