# In the data visualization project , We often need to use some graphs to show , Speaking of charts , There must be echarts Use
# Because in the actual development , Maybe the page location is not enough , But there’s a lot of data , This At that time, we may need to roll and rotate the chart , Similar to the effect of the carousel , In fact, the principle is the same
# For example, we now have such a demand ：
## 1. When the data returned by the back end is empty , We have no data on the interface （ Friendly tips ）
## 2. When the number of data returned by the back end is less than or equal to 6 Stripe time , Show the chart directly , No need to rotate
## 3. When the number of data returned by the back end is greater than 6 strip , We’re going to rotate it , The display area is shown as 6 strip （ Here is gif picture , It’s a moving picture , But it doesn’t seem to show ）
# Code implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#main {
position: relative;
width: 400px;
height: 400px;
margin: 100px auto;
background: #ccc;
}
</style>
</head>
<body>
<div id="main"></div>
<script src="js/echarts.min.js"></script>
<script>
const oBox = document.getElementById('main')
let myChart = echarts.init(oBox)
// 2. The number that needs to be displayed
let start = 0,
end = 6
const barLen = end - start // Specify the length of the display ( If it exceeds this length, it will be rotated , If you don't go beyond that, you don't need to rotate , Just show it directly )
let newXData, newYData
let len = 0 // The number of data
// 1. perform init Method
init()
// 2 Entry method encapsulation
async function init() {
const res = await getData()
const xData = res.xData
const yData = res.yData
len = xData.length // Get data length
if(len) {
// There's data
if(xData.length > barLen) {
// It means we need to rotate
newXData = xData.concat(xData) // x Make a copy of the axis data ( It's the same principle as the carousel chart )
newYData = yData.concat(yData) // y Make a copy of the axis data ( It's the same principle as the carousel chart )
// Initialization diagram
initChart(newXData.slice(start, end), newYData.slice(start, end))
// Automatic rotation
setInterval(autoPlay, 1000)
} else {
// That means there's no need to rotate
initChart(xData, yData)
}
} else {
// No data -> It shows that there is no data at present ( Friendly tips )
initChart([], [])
}
}
// 3. Encapsulate the automatic carousel method
function autoPlay() {
start++
end++
if (start === len) { // Critical value judgment and rotation 、 It's like sliding
start = 0
end = 6
}
const xT = newXData.slice(start, end)
const yT = newYData.slice(start, end)
initChart(xT, yT)
}
// 4. Encapsulate the initialization chart method
function initChart(xData, yData) {
if(!myChart) {
myChart = echarts.init(oBox)
}
if(xData.length) {
// There's data
const option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: {
// Axis indicator , Axis trigger is valid
type: 'shadow' // The default is line , Optional ：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: [
{
type: 'value'
}
],
xAxis: [
{
type: 'category',
data: xData
}
],
series: [
{
name: ' Direct access ',
type: 'bar',
barWidth: '60%',
data: yData
}
]
}
myChart.setOption(option)
} else {
// No data
oBox.removeAttribute('_echarts_instance_')
oBox.innerHTML =
'<div class="no-data" style="text-align:center;font-size:30px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-weight: bold;"> Temporarily no data </div>'
// meanwhile hold myChart Set to empty object
myChart = null
}
}
// 5. How to get data
function getData() {
return new Promise((resolve, reject) => {
const xData = []
const yData = []
// Simulation of the request
setTimeout(() => {
for(let i = 0; i < 7;i++) {
xData.push(' Category ' + i)
yData.push(Math.round( Math.random() * 100) )
}
resolve({
xData,
yData
})
}, 1000)
})
}
</script>
</body>
</html>
# Code instructions
# summary
## 1.echarts Use
## 2. Use of timer
## There is no data display for the moment