Echarts实现瀑布流

2024-05-30 17:44

文章标签 实现 echarts 瀑布

本文主要是介绍Echarts实现瀑布流，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

基本逻辑

给定这样一个数据[1000,1200,1700,2900,1700,1400,1200,300]做一个js方法,当数据传入进来时,初始化一下数据1和数据2的0号索引,数据1=[0]数据2为原数据的0号索引数据也就是[1000],然后数据循环匹配,如果当前原数据比上一个数据大的话就是升序,做以下处理:数据1的当前索引元素为上一个索引位置的元素与数据2上一个索引位置元素的和相加,例如数据1的1号元素就是为0+1000=1000,此时数据1就变成了[0,1000],数据2当前索引数据就是当前索引的原数据减去数据1的当前数据,也就是1200-1000=200,此时数据2就是[1000,200],就这样以此类推,当我处理完前四个数据,这时候数据1就是[0, 1000, 1200, 1700]数据2就是[1000, 200, 500, 1200]处理第五个数据发现原数据当前索引数据比上一个索引位置的数据小,此时就是降序了,则需要换一种处理方法,去原数据当前位置往后查找(包含当前数据),找到数据最大的那个设置为当前数据1的当前数据,也就是1400,则当前数据2的数据为当前原数据减去当前数组1的数据也就是1700-1400=300,此时数据1就是[0, 1000, 1200, 1700,1400],数据2就是[1000, 200, 500, 1200,300]就按照这样的规律继续向后进行处理,遇到降序就使用降序的处理规则,遇到升序就是升序的处理规则,所有数据处理完毕后,数据1变成了:[0, 1000, 1200, 1700, 1400, 1200, 300, 0]数据2就变成了:[1000, 200, 500, 1200, 300, 200, 900, 300],至此,大功告成,

代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ECharts Pie Chart with Round Caps</title><!-- 引入 ECharts --><script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script></head><body><!-- 用于展示饼图的 DOM 元素 --><div id="pieChart" style="width: 800px; height: 600px"></div><script>function xj(arr) {console.log("arr", arr);// 初始化let arr1 = [0];let arr2 = [arr[0]];for (let i = 1; i < arr.length; i++) {// 判断是升序还是降序if (arr[i] > arr[i - 1]) {console.log("升序", i);// 升序时的数据处理// 升序处理arr1.push(arr1[i - 1] + arr2[i - 1]);arr2.push(arr[i] - arr1[i]);} else {// 降序时的数据处理// 找到从降序这里开始的往后数的最大数据let max = -1;if (i === arr.length - 1) {max = 0;} else {max = arr.slice(i + 1).reduce((max, current) => {return current > max ? current : max;});}console.log("max", max);arr1.push(max);arr2.push(arr[i] - max);}}return [arr1,arr2]}let arr = [1000, 1200, 1700, 2900, 1700, 1400, 1200, 300]; // 原数组// let arr = [128, 114, 100, 99, 107, 120, 106]; // 不建议写这种例如我在二号元素上面往后找最大值,结果最大值比原数组的数据还大,这样会导致结果为负let data =  xj(arr);// 饼图配置var option = {title: {text: "Waterfall Chart",subtext: "Living Expenses in Shenzhen",},tooltip: {trigger: "axis",axisPointer: {type: "shadow",},formatter: function (params) {var tar = params[1];return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;},},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true,},xAxis: {type: "category",splitLine: { show: false },data: ["Total","Rent","Utilities","Transportation","Meals","Other",],},yAxis: {type: "value",},series: [{name: "Placeholder",type: "bar",stack: "Total",barWidth: "100%",itemStyle: {borderColor: "transparent",color: "transparent",},emphasis: {itemStyle: {borderColor: "transparent",color: "transparent",},},data: data[0], // 低部撑上来的高度},{name: "Life Cost",type: "bar",stack: "Total",label: {show: true,position: "inside",},data: data[1], // 数据剩余高度},],};// 初始化 ECharts 实例var myChart = echarts.init(document.getElementById("pieChart"));// 使用配置项显示图表myChart.setOption(option);</script></body>
</html>