echarts从接口拿数据进行组装

1.演示效果图

2.写死数据的echatrts代码

var option = {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        width: 392,
        top: 7,
        icon: 'rec1t',
        itemHeight: 10,
        itemWidth: 10,
        // 设置间距
        itemGap: 17,
        textStyle: {
          color: '#fff',
          fontSize: 14,
        },
        data: ['委托利用处置量', '产生量', '自行利用处置量', '贮存量']
      },
      grid: {
        left: 0,
        right: 0,
        bottom: 18,
        top: 50,
        containLabel: true,
      },
      xAxis: [{
        type: 'category',
        axisLabel: {
          color: '#fff',
          fontSize: 14,
          fontFamily: 'SourceHanSansCN-Normal',
          interval: 0,
          // align: 'left',
          lineHeight: 20,
          formatter: function (value) {
            // 拼接加 \n 返回的类目项
            var ret = '';
            // 每项显示文字个数
            var maxLength = 4;
            // X轴类目项的文字个数
            var valLength = value.length;
            // 类目项需要换行的行数
            var rowN = Math.ceil(valLength / maxLength);
            if (rowN > 1) {
              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 {
              return value;
            }
          },
        },
        axisLine: {
          lineStyle: {
            color: '#2E3636',
          },
        },
        axisTick: {
          show: false,
        },
        data: [
          '2018',
          '2019',
          '2020',
          '2021',
          '2022',
        ],
      }, ],
      yAxis: [{
        type: 'value',
         name: '吨',
        nameTextStyle: {
          color: '#fff',
          fontSize: 14,
          padding: [0, 56, 0, 20]
        },
        axisLabel: {
          color: '#fff',
          fontSize: 14,
          fontFamily: 'SourceHanSansCN-Normal',
        },
        axisLine: {
          lineStyle: {
            color: '#2E3636',
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#2E3636',
          },
        },
      }, ],

      series: [
        {
          name: '委托利用处置量',
          type: 'line',
          label: {
            // 是否在柱形图上显示数字
            show: false,
            position: 'insideRight',
          }, // 设置柱状图大小
          barWidth: 7,
          itemStyle: {
            color: '#00B0EA'
          },
          data: [320, 332, 301, 334, 390, 234],
        },
        {
          name: '产生量',
          type: 'line',
          label: {
            // 是否在柱形图上显示数字
            show: false,
            position: 'insideRight',
          }, // 设置柱状图大小
          barWidth: 7,
          itemStyle: {
            color: '#00FFEE'
          },
          data: [862, 1018, 964, 1026, 1279, 124],
        },
        {
          name: '自行利用处置量',
          type: 'line',
          label: {
            // 是否在柱形图上显示数字
            show: false,
            position: 'insideRight',
          }, // 设置柱状图大小
          barWidth: 7,
          iitemStyle: {
            color: '#44D400'
          },
          data: [562, 918, 544, 726, 679, 235],
        },
        {
          name: '贮存量',
          type: 'line',
          label: {
            // 是否在柱形图上显示数字
            show: false,
            position: 'insideRight',
          }, // 设置柱状图大小
          barWidth: 7,
          itemStyle: {
            color: '#FFEC01'
          },
          data: [562, 918, 544, 726, 679, 564],
        },
      ],
    };

3.从接口接收数据进行组装代码

    var cityRiskWasteStatis = echarts.init(
      document.querySelector('#city-risk-waste-statis')
    );
    $.ajax({
      url: 'http://182.48.115.108:7070/service/serviceinterface/search/run.action?interfaceId=629617deec5ad1ac42be173892d1ba52&token=cjdbh',
      type: 'post',
      datatype: 'json',
      async: false,
      success: function (result) {
        var xArray = [];
        var series = [];
        var serienames = [];
        var colors = ['#00B0EA','#00FFEE','#44D400','#FFEC01'];
        for(var i = 0;i<result.data.length;i++){
          var item = result.data[i];
          if(xArray.indexOf(item.YEARNUMBER)==-1){
            xArray.push(item.YEARNUMBER);
          }
          if(serienames.indexOf(item.NYTYPENAME)==-1){
            serienames.push(item.NYTYPENAME);
          }
        }
        for(var j = 0;j<serienames.length;j++){
          var serie = {
            name: serienames[j],
            type: 'line',
            label: {
              // 是否在柱形图上显示数字
              show: false,
              position: 'insideRight',
            }, // 设置柱状图大小
            barWidth: 7,
            itemStyle: {
              color: colors[j]
            }
          }
          var yArray=[];
          for(var i = 0;i<result.data.length;i++){
            var item = result.data[i];
            if(item.NYTYPENAME==serienames[j]){
              yArray.push(item.CONSUMPTION);
            }
            serie.data=yArray;
          }
          series.push(serie);
        }
        console.log(series);
        console.log(xArray);
        console.log(serienames);
        var option = {
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            width: 392,
            top: 7,
            icon: 'rec1t',
            itemHeight: 10,
            itemWidth: 10,
            // 设置间距
            itemGap: 17,
            textStyle: {
              color: '#fff',
              fontSize: 14,
            },
            data: serienames
          },
          grid: {
            left: 0,
            right: 0,
            bottom: 18,
            top: 50,
            containLabel: true,
          },
          xAxis: [{
            type: 'category',
            axisLabel: {
              color: '#fff',
              fontSize: 14,
              fontFamily: 'SourceHanSansCN-Normal',
              interval: 0,
              // align: 'left',
              lineHeight: 20,
              formatter: function (value) {
                // 拼接加 \n 返回的类目项
                var ret = '';
                // 每项显示文字个数
                var maxLength = 4;
                // X轴类目项的文字个数
                var valLength = value.length;
                // 类目项需要换行的行数
                var rowN = Math.ceil(valLength / maxLength);
                if (rowN > 1) {
                  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 {
                  return value;
                }
              },
            },
            axisLine: {
              lineStyle: {
                color: '#2E3636',
              },
            },
            axisTick: {
              show: false,
            },
            data: xArray,
          }, ],
          yAxis: [{
            type: 'value',
            name: '吨',
            nameTextStyle: {
              color: '#fff',
              fontSize: 14,
              padding: [0, 56, 0, 20]
            },
            axisLabel: {
              color: '#fff',
              fontSize: 14,
              fontFamily: 'SourceHanSansCN-Normal',
            },
            axisLine: {
              lineStyle: {
                color: '#2E3636',
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#2E3636',
              },
            },
          }, ],

          series: series,
        };
        cityRiskWasteStatis.setOption(option);
        window.addEventListener('resize', function () {
          cityRiskWasteStatis.resize();
        });
      }
    });