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);
});
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>