我们一般都会使用echarts来生成统计图表，但是在代码中修修改改非常麻烦，需要找到具体配置的选项然后进行修改，试着自己做一个网站可以直接输入想要的数据来生成图表，不需要在代码区进行定位。

row版

因为这是一个初步的想法，先写逻辑后进行页面美观优化

基本准备

首先把基本的输入框给安排上

<div class="numChoice">
            <div>标题：<input type="text" class="title" placeholder="请输入图表标题"></div>
            <div>数据名称：<input type="text" class="Bigname" placeholder="请输入数据的名称"></div>
            <div>数量：<input class="num" type="number" min="0" placeholder="请输入数据个数"></div>
            <div>类型：<br><select class="type" name="" id="">
                <option value="">无</option>
                <option value="bar">柱状图</option>
                <option value="pie">饼状图</option>
                <option value="line">折线图</option>
            </select></div>
</div>

由于采用flex布局，所以子元素都使用了div包裹，便于定位

逻辑实现

首先准备好我们的option配置项，将一些基础的图例和一些有用的配置默认加上，在标题和数据名称具体数据的地方用变量来填充。
首先是图表标题，将标题的输入框里面的值获取过来，并且对样式进行一定的修改：

            title:{
                text:document.querySelector('.title').value,
                left: "center",
                top:'0px',
                textStyle:{
                    fontSize: 20,
                    color:'#000'
                }
            }

数据名称同理：

            series:[{
                label:{
                    show:true
                },
                name:document.querySelector('.Bigname').value ,
                type: mapType,
                data
            }]

接下来是数据的个数，我们需要根据数据个数生成相应个数的输入框，所以我们需要做一些逻辑上的判断，首先先定义一个函数用来生成填写数据的输入框

function createInput(node,num){
    if(num > 0)
    for(let i = 0 ; i < num ; i++){
        const input = document.createElement('input')
        const inputName = document.createElement('input')
        const br = document.createElement('br')
        input.className = 'Data'
        input.type = 'number'
        input.placeholder = '数据'
        inputName.className = 'dataName'
        inputName.type = 'text'
        inputName.placeholder = '名称'
        node.append(inputName)
        node.append(input)
        node.append(br)
    }
}

其中第一个参数node是我们需要生成输入框的dom元素节点，第二个参数num是需要生成的个数

接下来我们对输入数据个数的输入框进行逻辑编写

numDom.addEventListener('change',() => {
    num = numDom.value


    numData.remove()
    numData = document.createElement('div')
    numData.className = 'numData'
    document.querySelector('.numPlace').append(numData)
    createInput(numData,num)

})

其中我们生成一个div盒子用来存放输入数据的输入框，并且在个数改变的时候重新渲染

下面我们进行最重要的数据处理，我们先声明存放X轴名称的变量和数据变量。

let Xname = []
let data = []

然后我们对填写数据的输入框进行监听，将其中的数据添加到先前声明的变量中

    const input = document.querySelectorAll('.Data')
    const inputName = document.querySelectorAll('.dataName')
    for(let i = 0 ; i < input.length ; i++){
        input[i].addEventListener('change',() => {
            Arry.splice(i,1,input[i].value)
        })
    }
    data = Arry
    for(let i = 0 ; i < input.length ; i++){
        inputName[i].addEventListener('change',() => {
            Xname.splice(i,1,inputName[i].value)
            console.log(Xname);
        })
    }

在配置项的相应位置上放入变量，一个简单的图表生成就做好了。

再准备一个button，点击后将配置项添加给echarts生成图表

并且使用FileSaver插件将canvas标签里面的图表保存

downLoad.addEventListener('click', () => {
    const canvas = document.querySelector('canvas')
    canvas.toBlob(function(blob) {
        saveAs(blob, document.querySelector('.title').value)
      });
})