echarts积累之--图表下钻

echarts图标下钻的原理:点击图表 -> 销毁echarts(myChart.dispose()) -> 创建新的echarts(echarts.init) -> 替换数据源(setOption)(始终是一个图表,不断的销毁-创建-替换数据源来做到下钻和回到初始状态)




效果:

echarts积累之--图表下钻_第1张图片

 下钻效果图:

echarts积累之--图表下钻_第2张图片

 注(柱状图组件--vue3写法):







例二:

echarts积累之--图表下钻_第3张图片

echarts积累之--图表下钻_第4张图片






你可能感兴趣的:(echarts,vue.js,javascript)