<div id="chart" style="width: 100%;height:400px;"></div> <script> var data = {{ data|safe }}; var chart = echarts.init(document.getElementById('chart')); var option = { tooltip: { trigger: 'axis', formatter: function(params) { return params[0].name + '<br/>' + params[0].value[1]; } }, toolbox: { show: true, feature: { saveAsImage: {} } }, xAxis: { type: 'time', }, yAxis: { type: 'value' }, series: [{ data: data, type: 'line' }] }; chart.setOption(option); </script>前端默认隐藏折线图，表单选择城市后显示该城市折线图如何实现

这个问题其实和我之前回答的问题类似，具体实现方式如下：

- 在页面初始化时，设置折线图的CSS样式display为none，即隐藏折线图；
- 在表单中添加城市选择项，并绑定change事件；
- 当用户选择城市时，前端通过Ajax请求后端的数据，并将数据传递给前端Javascript代码；
- 前端Javascript代码利用Echarts等可视化库生成折线图，并设置折线图的CSS样式display为block，即显示折线图。

以下是示例代码：

HTML代码：

<!-- 城市选择表单 -->
<select id="city-select">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

<!-- 折线图容器 -->
<div id="chart-container" style="width: 100%; height: 400px; display: none;"></div>

Javascript代码：

// 监听城市选择表单的change事件
document.getElementById('city-select').addEventListener('change', function() {
  // 获取选中的城市
  var city = this.value;

  // 发送Ajax请求数据
  $.ajax({
    url: '/data/' + city,
    success: function(data) {
      // 生成折线图
      var chart = echarts.init(document.getElementById('chart-container'));
      var option = {
        tooltip: { ... },
        toolbox: { ... },
        xAxis: { ... },
        yAxis: { ... },
        series: [{ data: data, type: 'line' }]
      };
      chart.setOption(option);

      // 显示折线图
      document.getElementById('chart-container').style.display = 'block';
    }
  });
});

其中，'/data/' + city是后端提供的接口，用于返回该城市的数据。具体实现方式可能会因开发框架和具体需求而略有不同，但基本思路是相似的。