echarts柱状图,通过input输入框获取值生产数组展示到图表

嗯,其实还是很菜的,这是一个笔试题,还没过,可能做的东西不合格,用的是js+echarts

基本思路,就是两个input框,获取它的值,然后生成数组,替换一下echarts里的数据源,通过按钮的点击事件生成图表

效果图

 

 基本就这样,就是对数组的添加和排序,感觉应该是做的不够细,像每个柱的大小,如果生成数量是两个的话展示效果不太好,其次就是代码写的有点问题。

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <script src="./echarts.js"></script>

</head>

<body>

  <div>

    <span>最小值:</span>

  <input type="text" placeholder="请输入" id="min" οninput="if(value<0)value=0;if(value>100)value=100">

  <span>最大值:</span>

  <input type="text" placeholder="请输入" id="max"

  οninput="if(value<0)value=0;if(value>100)value=100"

  >

  <span>数量:</span>

  <input type="text" placeholder="请输入" id="num"

  οninput="if(value<0)value=0;if(value>10)value=10">

  <span>排序:</span>

  <select id="select">

    <option value ="1">从小到大</option>

    <option value ="2">从大到小</option>

  </select>

  <button οnclick="submit()">生成</button>

 <!-- 为 ECharts 准备一个定义了宽高的 DOM -->

 <div id="main" style="width: 600px;height:400px;"></div>

  </div>

 <script>

   

     let min= document.getElementById('min')

     let max= document.getElementById('max')

     let num= document.getElementById('num')

     let order= document.getElementById('select')

     let xData=[]

     let yData=[]

     function submit(){

        // 基于准备好的dom,初始化echarts实例

      var myChart = echarts.init(document.getElementById('main'));

      a=parseInt(min.value)

      b=parseInt(max.value)

      c=parseInt(num.value)

      d=parseFloat((b-a)/(c-1))

      index=order.selectedIndex

      value=order.options[index].value

      min.value=''

      max.value=''

      num.value=''

      order.value=''

      console.log(a);

      console.log(b);

      console.log(c);

      console.log(d);

      console.log(value);

      // console.log(index);

      //x轴

      for(var i=0;i<c;i++){

          for(var j=1;j<=i+1;j++){

            xData[i]=j

          }

      }

      //y轴

      if(value=='1'){

        yData[0]=a

      for(var k=1;k<c;k++){

        yData[k]=yData[k-1]+d

      }

      }else{

        yData[0]=b

      for(var k=1;k<c;k++){

        yData[k]=yData[k-1]-d

      }

      }

      console.log(yData);

      // 使用刚指定的配置项和数据显示图表。

      myChart.setOption(option);

     }

      // 指定图表的配置项和数据

      var option = {

        title: {

          text: ''

        },

        tooltip: {},

        legend: {

       

        },

        xAxis: {

          data: xData

        },

        yAxis: {

        },

        series: [

          {

            type: 'bar',

            data: yData,

            itemStyle: {

              normal: {

                label: {

                  show: true,  //开启显示

                  position: 'top',  //在上方显示

                  textStyle: {  //数值样式

                    color: 'black',

                    fontSize: 16

                  }

                }

              }

            },

          }

        ]

      };

 </script>

</body>

</html>

总体来说,是本人遇到的第一个机试编程类型,通过这次确实还是知识的欠缺。再接再厉!与君共勉!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
echarts中添加input组件可以通过以下步骤实现: 1. 首先,确保你已经引入了echarts库,并创建了一个echarts实例。 2. 在echarts实例中添加一个input组件,你可以在x轴或y轴上的某个位置放置一个input框。 3. 为input组件设置样式和属性,例如设置输入框的位置、宽度、高度、字体大小等。 4. 如果需要在输入框中取用户输入的值,可以使用JavaScript事件监听器,例如监听input的change事件或者按下回车键的keypress事件。 例子代码如下: ``` // 创建echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 定义柱数据 var data = [120, 200, 150, 80, 70, 110]; // 定义x轴数据 var xAxisData = ['A', 'B', 'C', 'D', 'E', 'F']; // 添加input组件 var input = document.createElement('input'); input.type = 'text'; input.style.position = 'absolute'; input.style.left = '10px'; input.style.top = '10px'; input.style.width = '100px'; input.style.height = '20px'; // 监听input的change事件 input.addEventListener('change', function(event) { var value = event.target.value; console.log('用户输入的值是:', value); }); // 将input添加到echarts容器中 document.getElementById('chart').appendChild(input); // 设置柱的配置项 var option = { xAxis: { data: xAxisData }, yAxis: {}, series: [{ type: 'bar', data: data }] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); ``` 这样就可以在echarts上添加一个input组件,并监听用户输入的值。请根据实际需求自行调整代码中的样式和事件处理逻辑。<span class="em">1</span> #### 引用[.reference_title] - *1* [echarts柱顶部添加文字及柱颜色](https://blog.csdn.net/wyl164778/article/details/118993303)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值