js实现折线、柱形、散点、扇形统计图之间的转换

<div class="xin">
      <div id="zhi" onclick="zhixian()">转换为折线统计图</div>
      <div id="zhu" onclick="zhuxing()">转换为柱形统计图</div>
      <div id="qiu" onclick="qiuxing()">转换为散点统计图</div>
      <div id="wcy" onclick="round()">转换为扇形统计图</div>
      <div id="bolang" onclick="bor()">折线统计图2.0版本</div>
    </div>

let arr = new XMLHttpRequest();
      arr.open('get', "js/index.json");
      arr.send();
      arr.onreadystatechange = function() {
        if (arr.readyState == 4 && arr.status == 200) {
          let at = arr.responseText;
          obj = JSON.parse(at);
          console.log(obj[0].color);
          // 折线统计图
          zhi.onclick = function() {
            for (let i = 0; i < obj.length; i++) {
              obj[i].type = "line"
            }
            fun(obj)
          }
          // 柱形统计图
          zhu.onclick = function() {
            for (let i = 0; i < obj.length; i++) {
              obj[i].type = "bar"
            }
            fun(obj)
          }
          // 散点统计图
          qiu.onclick = function() {
            for (let i = 0; i < obj.length; i++) {
              obj[i].type = "scatter";
            }
            fun(obj)
          }
          fun(obj);
          // 扇形统计图
          wcy.onclick = function() {
            let num = [];
            let add = [];
            let zo = [];
            let get;
            add = [];
            let zzx = [];
            for (let i = 0; i < obj.length; i++) {
              obj[i].type = "pie";
              let http = 0;
              for (let a = 0; a < obj[i].data.length; a++) {
                http += obj[i].data[a].value;
                num.push(obj[i].name);
                console.log(http);
              }
              zo.push(JSON.parse(http));
              get = {
                value:zo[i],
                name:obj[i].name
              }
              zzx.push(get);
              let jy = {
                name:"测试总成绩",
                type:"pie",
                data:zzx
              }
              add.push(jy)
            }
            console.log(add);
            let option = {
              title: {
                text: '测试单科总成绩'
              },
              tooltip: {
                trigger: 'item'
              },
              xAxis: {
                show: 0 ,
                type: 'category',
                data: there
              },
              toolbox: {
                feature: {
                  restore: {},
                  saveAsImage: {},
                }
              },
              series: add
            };
            box.setOption(option);
          }
          bol.onclick = function(){
            let num = [];
            let there = ["小华", "小张", "小赵", "老魏", "小明"];
            let add = [];
            let zo = [];
            let get;
            add = [];
            let zzx = [];
            for(let i = 0 ; i < obj.length ; i++){
              obj[i].type = "line";
              num.push(obj[i].name);
              get = {
                name: obj[i].name,
                type: obj[i].type,
                stack: 'Total',
                smooth: true,
                lineStyle: {
                  width: 0
                },
                showSymbol: false,
                areaStyle: {
                  opacity: 0.6,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, obj[i].color),
                },
                emphasis: {
                  focus: 'series',
                },
                data: obj[i].data,
              }
              add.push(get)
              console.log(add);
            }
            let option = {
              color: ['#55ff00', '#ff0000', '#ff00ff'],
              title: {
                text: '测试成绩'
              },
              tooltip: {
                trigger: 'axis',
              },
              legend: {
                data: num
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              toolbox: {
                feature: {
                  restore: {},
                  saveAsImage: {},
                }
              },
              xAxis: {
                show: 1 ,
                type: 'category',
                data: there
              },
              yAxis: {
                type: 'value'
              },
              series: add
            };
            box.setOption(option);
          }
        }
      }
      function fun(obj) {
        let get;
        add = [];
        for (let i = 0; i < obj.length; i++) {
          num.push(obj[i].name);
          get = {
            name: obj[i].name,
            type: obj[i].type,
            data: obj[i].data,
          }
          add.push(get);
        }
        thank();
      }
      function thank() {
        let option = {
          color: ['#55ff00', '#ff0000', '#ff00ff'],
          title: {
            text: '测试成绩',
          },
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: num,
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          toolbox: {
            feature: {
              restore: {},
              saveAsImage: {},
            }
          },
          xAxis: {
            show: 1 ,
            type: 'category',
            data: there
          },
          yAxis: {
            type: 'value'
          },
          series: add
        };
        box.setOption(option);
      }