My computer does not have software that can make animations. I used the PowerPoint that comes with Office to record videos before, but I couldn’t record them due to other reasons, so I temporarily put a few connected pictures to show the effect of the page. Forgive me:
the whole idea:
For easy understanding, I call the data LineScheduleData.platopositioninfos obtained in the background as array A.
First, we need to start with the data structure. The echarts table is nothing more than displaying the values in the array, so the most important thing is to figure out how to get the array in the background. When A, the method of traversing the array A and returning n array objects in turn, and then putting the values of n array objects into the array displayed in the echarts table (the code at point 4) Second, the second is to refresh the data regularly,
I Two timings are used, one is when obtaining background data, and the other is when instantiating echarts data (the code at point 2); there is a main consideration when timing in the example, which is to traverse the array A and sequentially In the method of returning n array objects, it is necessary to pass the number of items from the index, so it is necessary to add a variable that can be counted in setInterval (point 3). Third, the last is to judge the situation. There are two situations in total,
one When the length of array A is greater than the length to be displayed (I am 4 here), it is necessary to consider the method of traversing array A and returning n array objects in sequence; the other is when the length of array A is less than or equal to the length to be displayed, no need For traversal, you can directly push the value of the instantiated object.
The example given by the echarts official website: go to the echarts instance
LineScheduleData.platopositioninfos array, the value is made by yourself, the data structure is as follows:
[
{
"position": "CY19", //这个是x轴的值
"count": 3, //这个是用于柱状图纵坐标的值
"percent": 0.25, //这个是折线图的纵坐标值
"state": 0,
"ID": 0
},
{
"position": "CN3",
"count": 2,
"percent": 0.4167,
"state": 0,
"ID": 0
},
{
"position": "R336",
"count": 2,
"percent": 0.5833,
"state": 0,
"ID": 0
},
{
"position": "Q509",
"count": 1,
"percent": 0.6667,
"state": 0,
"ID": 0
},
{
"position": "CN4",
"count": 1,
"percent": 0.75,
"state": 0,
"ID": 0
},
{
"position": "CN26",
"count": 1,
"percent": 0.8333,
"state": 0,
"ID": 0
},
{
"position": "CN27",
"count": 1,
"percent": 0.9167,
"state": 0,
"ID": 0
},
{
"position": "CX3",
"count": 1,
"percent": 1,
"state": 0,
"ID": 0
}
]
1. The HTML display part of the histogram:
the instance id is positioninfosline
<div style="width: 95%; height: 80%; margin: 0 auto;" id="positioninfosline"></div>
2. Pass in the method of instantiating option when calling the interface:
the next4Items method here traverses the array in turn and returns the data of the new length, the code is at point 4
drawChart4() {
var datax = [];
var countDatay = [];
var percentDatay = [];
// 显示4条数据 判断若获取的数据的长度小于等于4，则直接赋值无需动态加载
if (this.LineScheduleData.platopositioninfos.length <= 4) {
for (var i = 0; i < this.LineScheduleData.platopositioninfos.length; i++) {
datax.push(this.LineScheduleData.platopositioninfos[i].position);//x轴的值
countDatay.push(this.LineScheduleData.platopositioninfos[i].count);//柱状图y的值 数量
percentDatay.push((Number(this.LineScheduleData.platopositioninfos[i].percent) * 100).toFixed(2));//折线图y的值 总百分比，转化为百分比的形式并保留两位小数
}
} else {
//若获取数据的长度大于4，则需要调用next4Items方法
var thedata = Main.next4Items(this.LineScheduleData.platopositioninfos, 4, 0)
console.log("thedata", thedata);//这个是返回的数组及新的索引，可以输入看看结构
for (var i of thedata[0]) {
//遍历返回的四个数组并push表中需要显示的值
datax.push(i.position);//x轴的值
countDatay.push(i.count);//柱状图y的值 数量
percentDatay.push((Number(i.percent) * 100).toFixed(2));//总折线图y的值 总百分比
}
}
console.log("datax", datax); //输出为有四个字符串的数组
// 基于准备好的dom，初始化echarts实例
var chartDom = document.getElementById("positioninfosline");
var myChart = this.$echarts.init(chartDom, "dark");
var option;
option = {
backgroundColor: "transparent",
grid: {
top: "30%",
left: "10%",
right: "5%",
bottom: "10%",
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: [
{
type: 'category',
data: datax, //x轴的值
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '数量(个)', //显示柱状图的刻度
min: 0,
max: 'dataMax',
interval: 50,
axisLabel: {
formatter: '{
value}'
}
},
{
type: 'value',
name: '占比',
min: 0,
max: 'dataMax',
show: false,//不显示折线图的刻度线，若想要显示双y轴，把这句话删掉即可
interval: 20,
axisLabel: {
formatter: '{
value}%'
}
}
],
series: [
{
name: '数量',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' 个';
}
},
data: countDatay, //柱状图的y值
barWidth: '30px',
//显示数值
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'inside', //在上方显示
textStyle: {
//数值样式
color: 'white',
fontSize: 12,
},
},
color: function (params) {
//柏拉图颜色按顺序输出
var colorList = [
'#086276', '#35a39d', '#89cac4', '#a0d6eb', '#2c6854',
'#59b48c', '#d94c1e', '#bc0d2a', '#4f667c', '#dae1d3', '#9aa5e3', '#decf39'
];
return colorList[params.dataIndex]
},
barBorderRadius: [10, 10, 0, 0],
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
offset: 0, color: "#69aafc" }, //深
// {
offset: 1, color: "#91b8db" }, //浅
// ]),
},
},
},
{
name: '占比',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + '%';
}
},
data: percentDatay,//折线图的y值
itemStyle: {
normal: {
label: {
formatter: "{c}" + "%",
show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
color: 'white',
fontSize: 12,
},
},
},
},
}
]
};
option && myChart.setOption(option);
//动态刷新主要代码如下
if (this.LineScheduleData.platopositioninfos.length >= 5) {
//若长度为5以上则需要动态刷新进入条件
console.log("进入定时器")
setInterval(() => {
var num = this.initChart4CountFun();//这个方法是计数器的方法
console.log("num2", num);
var thedata = Main.next4Items(this.LineScheduleData.platopositioninfos, 4, num)//这个是通过next4Items方法获取对应的四个数组
console.log("thedata2", thedata);
datax = [] //清空
countDatay = [] //清空
percentDatay = [] //清空
for (var i of thedata[0]) {
datax.push(i.position);//x轴数据
countDatay.push(i.count);//柱状图的y轴值 数量
percentDatay.push((Number(i.percent) * 100).toFixed(2));//折线图的y轴值 总百分比
}
console.log("datax22222", datax);
//重新实例化option并赋予新的数据使其显示
myChart.setOption({
xAxis: [
{
data: datax
}
],
series: [
{
data: countDatay
}, {
data: percentDatay
}
]
});
}, 2100) //延时2100mm,官网给的示例也是这个时间,看着丝滑些
}
},
3. Counter method, num is a global variable with an initial value of 0:
initChart4CountFun() {
//若num的值小于需要显示数组的长度，则num持续加一
if (this.num <= this.LineScheduleData.platopositioninfos.length) {
this.num++
} else {
this.num = 0
}
return this.num
},
4. The method of traversing the array and returning n objects one by one:
I found this method from the Internet, the address: js loops to get a fixed number of elements in the array.
I encapsulated this method in Main.js, because I feel that it should be used frequently Now, just import Main.js when you need to call this method, or you can put it directly into the method, and replace all the Main. in the above code with this
/**
* 遍历数组依次返回n个对象的方法
* @allData: 待处理数组
* @n: 返回元素个数
* @index: 从索引的第几项开始
*/
export function next4Items(allData, n, index) {
console.log("allData", allData);
console.log("index", index);
let startIndex = index;
let length = allData.length;
let newArr = [];
if (index <= length - n) {
newArr = allData.slice(startIndex, startIndex + n)
startIndex += 1
} else if (length - n < startIndex && startIndex < length) {
newArr = [...allData.slice(startIndex, length), ...allData.slice(0, n - (length - startIndex))]
startIndex += 1
} else {
startIndex = 0
newArr = allData.slice(startIndex, startIndex + n)
startIndex += 1
}
return [newArr, startIndex]
}
It's over~ Editing is not easy, if there are any deficiencies or areas that can be optimized, please feel free to advise