echarts 瀑布图（简单的k线图）

准备数据

//  xianZhongFallList：[13.47, 0.11, 0.02, 0.42, 0.63, 0.59, -0.47, 0.39]
//  xianZhongFallXxais：['行业增速', '家用交强件数影响', '家用交强件均影响', '家用商业件数影响', '家用商业件均影响', '商用件数影响', '商用件均影响', '结构影响', '主体增速']

 主要在于先处理数据，

pageInit1() {
      var echarts = this.$echarts;
      var myChart = echarts.init(document.getElementById("charts3"));
      // 清空画布
      let dw1 = this.dw
      let _this = this
      myChart.clear();
      var dy = this.xianZhongFallList.map(item=>{
        return Number(item)
      });
      var zt = [];
      var label = [];
      var tot = dy[0];
      for (var i = 0; i < dy.length; i++) {
        var obj = [];
        if (i === 0) {
          if (dy[0] >= 0) {
            label.push({
              value: parseFloat(dy[i]).toFixed(2),
              coord: [i, dy[i]],
            });
          } else {
            label.push({ value: parseFloat(dy[i]).toFixed(2), coord: [i, 0] });
          }
          obj.push(0);
          obj.push(dy[i]);
          obj.push(dy[i]);
          obj.push(dy[i]);
          zt.push(obj);
        } else {
          var start = zt[i - 1][1];
          var val = parseFloat(dy[i]);
          var end = start + val;
          tot = tot + dy[i];
          if (dy[i] < 0) {
            let tot1;
            tot1 = tot - dy[i];
            label.push({
              value: parseFloat(dy[i]).toFixed(2),
              coord: [i, tot1],
            });
          } else {
            label.push({
              value: parseFloat(dy[i]).toFixed(2),
              coord: [i, tot],
            });
          }
          obj.push(start);
          obj.push(end);
          obj.push(end);
          obj.push(end);
          zt.push(obj);
        }
      }

      let option = {
        grid: {
          left: "3%",
          right: "4%",
        //   bottom: "3%",
          containLabel: true,
        },
        title: {
          show: this.xianZhongFallList.length == 0,   // 没数据才显示
          textStyle: {
              color: "grey",
              fontSize: 20
          },
          text: "暂无数据",
          left: "center",
          top: "center"
        },
        dataZoom: [
          {
            show: false, //是否显示下方滚动条
            realtime: true,
            start: 0, //显示数据开始位置
            end: 100, //显示数据结束位置
          },
          {
            type: "inside",
            realtime: true,
            start: 0,
            end: 100,
          },
        ],
        xAxis: {
          data: this.xianZhongFallXxais,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin: 20,
            formatter: function (value) {
              var ret = ""; //拼接加\n返回的类目项
              var maxLength;
              if (value.length === 2 && _this.chartsid === "qblj") {
                maxLength = 2; //每项显示文字个数
              } else if (value.length === 8 && _this.chartsid === "qblj") {
                maxLength = 4;
              } else if (value.length == 6 && _this.chartsid === "qblj") {
                var str1 = value.slice(0, 2) + "\n" + value.slice(2);
              }

              var valLength = value.length; //X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1) {
                //如果类目项的文字大于5,
                for (var i = 0; i < rowN; i++) {
                  var temp = ""; //每次截取的字符串
                  var start = i * maxLength; //开始截取的位置
                  var end = start + maxLength; //结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; //凭借最终的字符串
                }
                return ret;
              } else if (value.length === 6 && _this.chartsid === "qblj") {
                return str1;
              } else {
                return value;
              }
            },
          },
          nameGap: 30,
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            formatter: dw1==='1'?"{value}万元":"{value}%"
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            type: "candlestick",
            //开始值、结束值、最大值、最小值
            barWidth: 15,
            data: zt.map((item, index) => {
              return {
                value: item,
                itemStyle: {
                  color: "#438f75",
                  color0:"#cc2c3b",
                  borderWidth: 0,
                },
              };
            }),
            markPoint: {
              symbol: "rect",
              //图形上面的小头隐藏
              symbolSize: 0.000000000000001,
              label: {
                show: true,
                color: "#000",
                position: "top",
                fontSize: 10,
                formatter: function (res) {
                  if (Math.floor(res.data.value) === res.data.value) {
                    return res.data.value + ".0";
                  } else {
                    return res.data.value;
                  }
                },
              },
              data: label,
            },
            emphasis: {
              itemStyle: {
                // color:'yellow',
                // color0:'#509c83',
                borderWidth: 0,
              },
            },
          },
        ],
      };

      myChart.setOption(option, true);
      common.resizeEcharts(this.charts3, myChart);
    },