SOURCE

console 命令行工具 X clear

                    
>
console
$("#price-6-years").on("input", (evt) => {
  $("#price-6-years-value").text(evt.target.value);
});
$("#price-10-years").on("input", (evt) => {
  $("#price-10-years-value").text(evt.target.value);
});
$("#price-15-years").on("input", (evt) => {
  $("#price-15-years-value").text(evt.target.value);
});

// 基于准备好的dom,初始化echarts实例
const myChart = echarts.init(document.getElementById("chart-container"));

// 指定图表的配置项和数据
var option = {
  title: {
    text: "ECharts 入门示例",
  },
  tooltip: {},
  legend: {
    data: ["销量"],
  },
  xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
  },
  yAxis: {},
  series: [
    {
      name: "销量",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
<form>
  <div class="mb-3 row">
    <label for="price-6-years" class="col-sm-3 col-form-label text-right">6年保值率</label>
    <div class="col-sm-5">
      <input type="range" class="form-control" id="price-6-years" max="100" min="0" value="40" />
    </div>
    <span id="price-6-years-value" class="col-form-label">40</span>
  </div>
  <div class="mb-3 row">
    <label for="price-10-years" class="col-sm-3 col-form-label text-right">10年保值率</label>
    <div class="col-sm-5">
      <input type="range" class="form-control" id="price-10-years" max="100" min="0" value="20" />
    </div>
    <span id="price-10-years-value" class="col-form-label">20</span>
  </div>
  <div class="mb-3 row">
    <label for="new-car-price" class="col-sm-3 col-form-label text-right"> 15年保值率</label>
    <div class="col-sm-5">
      <input type="range" class="form-control" id="price-15-years" max="100" min="0" value="10" />
    </div>
    <span id="price-15-years-value" class="col-form-label">10</span>
  </div>
  <div class="mb-3 row">
    <label for="new-car-price" class="col-sm-3 col-form-label text-right">目标车价(万元)</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" id="new-car-price" value="15" />
    </div>
  </div>
</form>

<div id="chart-container" class="container" style="width: 600px;height:400px">
</div>

本项目引用的自定义外部资源