必备知识:
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 周四--------------------------------------