【ECharts】ECharts框架想要做Sunburst的解决方法和拖拽功能的详解

Sunburst

要创建日出图表,需要在系列配置项中声明一系列类型“sunburst”,并在树结构中声明其数据:

var option = {series: {type: 'sunburst',data: [{name: 'A',value: 10,children: [{value: 3,name: 'Aa'}, {value: 5,name: 'Ab'}]}, {name: 'B',children: [{name: 'Ba',value: 4}, {name: 'Bb',value: 2}]}, {name: 'C',value: 3}]}
}; 
【ECharts】ECharts框架想要做Sunburst的解决方法和拖拽功能的详解_第1张图片

它由多层环图组成。在数据结构方面,内圈是外圈的父节点。因此,它不仅可以像饼图一样表示部分和整体的比例,还可以像矩形树形图一样表示层次关系。

 type: 'sunburst',data: [{name: 'A',value: 10,children: [{value: 3,name: 'Aa',itemStyle: {color: 'red'}}, {value: 5,name: 'Ab'}]}, {name: 'B',children: [{name: 'Ba',value: 4}, {name: 'Bb',value: 2}],itemStyle: {color: 'red'}}, {name: 'C',value: 3}],itemStyle: {color: '#aaa'}, 
itemStyle: {color: 'yellow',borderWidth: 2,emphasis: {color: 'red'},highlight: {color: 'orange'},downplay: {color: '#ccc'}
} 

拖拽

convertToPixel API用于将数据转换为像素坐标,从而可以获得每个点的位置,并绘制这些点。myChart。在语句convertToPixel(‘grid’,dataItem)中,第一个参数’grid’表示dataItem在网格组件(即直角坐标系)中转换。所谓的“像素坐标”是指以容器的dom元素的左上角为零点的基于像素的坐标系中的坐标。 注意,这应该在第一个setOption之后完成,也就是说,只有在网格初始化convertToPixel(‘grid’,dataItem)之后才能调用myChart 使用此代码,可以拖动多个点。接下来,为每个点添加拖动响应事件:

myChart.setOption({graphic: echarts.util.map(data, function (dataItem, dataIndex) {return {// 'circle' 表示这个 graphic element 的类型是圆点。type: 'circle',shape: {// 圆点的半径。r: symbolSize / 2},position: myChart.convertToPixel('grid', dataItem),// 这个属性让圆点不可见(但是不影响他响应鼠标事件)。invisible: true,// 这个属性让圆点可以被拖拽。draggable: true,// 把 z 值设得比较大,表示这个圆点在最上方,能覆盖住已有的折线图的圆点。z: 100,ondrag: echarts.util.curry(onPointDragging, dataIndex)};})
}); 

声明一个 graphic component,里面有若干个 type 为 ‘circle’ 的 graphic elements。 这里使用了 echarts.util.map 这个帮助方法,其行为和 Array.prototype.map 一样,但是兼容 es5 以下的环境。 用 map 方法遍历 data 的每项,为每项生成一个圆点。 用 transform 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置。 此圆点的拖拽的响应事件,在拖拽过程中会不断被触发。下面介绍详情。 这里使用了 echarts.util.curry 这个帮助方法,意思是生成一个与 onPointDragging 功能一样的新的函数,只不过第一个参数永远为此时传入的 dataIndex 的值。 【ECharts】ECharts框架想要做Sunburst的解决方法和拖拽功能的详解_第2张图片

myChart.setOption({...,tooltip: {// 表示不使用默认的『显示』『隐藏』触发规则。triggerOn: 'none',formatter: function (params) {return 'X: ' + params.data[0].toFixed(2) + '
Y: ' + params.data[1].toFixed(2);}} });

此时,完成了拖动的基本功能。但是,如果要在拖动过程中进一步实时查看拖动点的数据值更改,可以使用工具提示组件实时显示该值。然而,Tooltip有其默认的“显示”和“隐藏”触发规则,这在我们的拖放场景中不适用。因此,我们还需要手动自定义工具提示的“显示”和“隐藏”行为。

myChart.setOption({graphic: echarts.util.map(data, function (item, dataIndex) {return {type: 'circle',...,onmousemove: echarts.util.curry(showTooltip, dataIndex),onmouseout: echarts.util.curry(hideTooltip, dataIndex),};})
});

function showTooltip(dataIndex) {myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: dataIndex});
}

function hideTooltip(dataIndex) {myChart.dispatchAction({type: 'hideTip'});
} 

在 mouseover 的时候显示,在 mouseout 的时候隐藏。 此时,完成了拖动的基本功能。但是,如果要在拖动过程中进一步实时查看拖动点的数据值更改,可以使用工具提示组件实时显示该值。然而,Tooltip有其默认的“显示”和“隐藏”触发规则,这在我们的拖放场景中不适用。因此,我们还需要手动自定义工具提示的“显示”和“隐藏”行为。

最后

整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法,一共201道面试题,并对每个问题作出了回答和解析。

有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享

部分文档展示:



文章篇幅有限,后面的内容就不一一展示了

有需要的小伙伴,可以点下方卡片免费领取

你可能感兴趣的:(echarts,前端,javascript)