Echartの簡単な使用とダイナミックな配置
10430 ワード
話を多くしないで、直接コードをかけます.
<html>
<head>
<meta charset="utf-8">
<title>Echartstitle>
<script src="../js/plugins/echarts.min.js">script>
<style>
#main{
width: 500px;
height: 500px;
}
style>
head>
<body>
<div id='main'>div>
<script type="text/javascript">
// dom， echarts
let myChart = echarts.init(document.getElementById('main'))
//
let option = {
xAxis: {
type: 'category',
data: ['8.5', '8.12', '8.19', '8.26', '9.2'],
boundaryGap: false
},
yAxis: {
type: 'value',
name: ' ',
splitLine: {
show: true
}, //
min: 70,
max: 100, // y
interval: 10, //
},
series: [{
data: [85.6, 75.2, 73.8, 93.4, 83.0],
type: 'line'
}]
}
myChart.setOption(option);
//
(function setter(min, max, interval) {
let op=myChart.getOption()
op.yAxis[0].min=min
op.yAxis[0].max=max
op.yAxis[0].interval=interval
console.log(op)
myChart.setOption(op)
})(0, 100, 20)
script>
body>
html>