多级图表下钻

1,356 阅读3分钟

必备知识

1、引入echarts模块

import echarts from 'echarts'//方式一
const echarts = require('echarts')//方式二

2、echarts.getInstanceByDom(JSDOM)获取echarts某图实例,没错就是当时你初始化的那个DOM元素。

3、Promise相关知识(我以为需要链式调用后来发现不用,那先酱紫趴~可以先忽略只要拿到数据就成)

思路:获取echarts实例,给该实例绑定点击事件,点击事件的回调里重新渲染该图表。里面很多代码虽然是angularJS的但是不同框架有相应的写法鸭~我觉得很通用~~

实现过程(以我项目中的图表为例angularJS):

1、获取初始页面中饼图的实例:

在图表渲染完后获取,可以使用setTimeout(),不然就是undefined。

var pieChart = echarts.getInstanceByDom(document.getElementById('retailSingleCustomerViewCampaignChartType2').querySelector('.m-chart__container'));

2、绑定点击事件(方法里面有些变量下面再讲):


pieChart.on('click', function (params) {    // $scope.$apply(() => {        if(count==chartLevel){            return        }        console.log(vm['promise'+count])        vm['promise'+count].then((res)=>{            let info = chartHelper.format({                data: { content: res },                chartId: 'financialTrend'            })            pieChart.setOption(info,true)            count++            chartArr.push(info)        })    // })})

* vm是this,指向的angular的控制器;

*chartHelper.format()是项目公共的处理返回数据的方法,返回echarts可以直接使用的options,你们公司有别的处理方式或者接口直接返回echarts可以用的数据,直接赋值给info就成啦~

*我们一般把请求写在公共服务service.js里,这里是demo,为了方便直接在控制器用了。

3、获取下一级的图表数据(这里默认有好多好多级,所以用了for循环,如果接口名字没这么规律或者一次性返回很多级数据,就不用for循环啦):


for(let i=1;i<chartLevel;i++){//eg:chartLevel==2时,遍历一次    vm['promise'+i] = new Promise((resolve, reject)=>{        return $http.get(appConfig.mockPath + '/chart/next'+i).then((res)=>{            resolve(res.data)        })    })}

这里可以不用new Promise,在service.js里直接return $http返回这个promise对象就行了,然后控制器里面调用。

4、右击返回上一个图表(Q:是不是contextmenu只能点击到系列series才触发的嘛?):


pieChart.on('contextmenu', function (params) {    params.event.event.preventDefault()    if(count==1){        return    }    chartArr.pop()    count--    pieChart.setOption(chartArr[chartArr.length-1],true)});

  • 取消默认的右键菜单
  • 在获取echarts实例的同时或者更外层作用域,声明一个chartArr数组,用来依次存放下次需要返回的图表数据,初始化为页面上需要下钻的这个图表的数据(echarts能直接用的options)
  • 在获取echarts实例的同时或者更外层作用域,声明一个count变量,初始化为1
  • 当count==1时,不用返回了,直接return
  • 注释的部分是我当时想太多=、=费费的条件。。。。

最后:

1、返回很不科学啊,后期加个返回按钮

2、如果要转到表格或者自己写的页面,应该是清空当前渲染的图,然后append进去趴。还没有开始写。目前就酱紫趴。

-------------------------------------2019-10-30 周三--------------------------------------

1、返回按钮:toolbox.feature.myXX自定义按钮(一定要my前缀,以下🌰是myXX的值)

{show: true,title: '返回',icon: 'image://http://echarts.baidu.com/images/favicon.png',onclick: function (){    if(count==1){        return    }    chartArr.pop()    count--    pieChart.setOption(chartArr[chartArr.length-1],true)}}

2、如果要转到表格或者自己写的页面,append个鬼喔,数据驱动驱动驱动。。。

3、据说win系统有bug:理论解决方案:setOption前需要.clear()一下;不行的话先.dispose(JSDOM)再重新初始化init(JSDOM)

-------------------------------------2019-10-31 周四--------------------------------------