echart实现大屏动效示例详解
目录
- 1.通过dataZoom实现柱状图动态前移效果
- 2.叠加流光效果
- 3.柱状图光亮轮播
1.通过dataZoom实现柱状图动态前移效果
最近做大屏相关需求，产品说需要炫酷一点的效果，于是做了一些echart相关的动效
设置dataZoom当前缩放值，加定时器，实现轮播效果。
示例：
option = {
color: ['#1E90FF', '#FFA500'],
tooltip: {
trigger: 'axis',
axisPointer: {}
},
grid: {
left: 20,
right: 20,
bottom: 0,
containLabel: true
},
legend: {
data: [
{
name: '负载电量',
itemStyle: {
color: '#FAAD14'
}
},
{
name: '中央空调冷量',
itemStyle: {
color: '#01E6F5'
}
}
],
textStyle: {
color: '#fff'
}
},
dataZoom: {
type: 'inside'
},
xAxis: [
{
type: 'category',
axisLabel: {
margin: 20,
textStyle: {
color: '#fff'
}
},
data: [
'11:00',
'12:00',
'13:00',
'14:00',
'15:00',
'16:00',
'17:00',
'18:00',
'19:00',
'20:00',
'21:00',
'22:00',
'23:00',
'00:00',
'01:00',
'02:00',
'03:00',
'04:00',
'05:00',
'06:00',
'07:00',
'08:00',
'09:00',
'10:00'
],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: 'kWh',
nameTextStyle: {
color: '#fff'
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.2)'
}
},
axisLabel: {
margin: 20,
textStyle: {
color: '#fff'
}
}
},
{
type: 'value',
name: 'kWh',
nameTextStyle: {
color: '#fff'
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(255, 255, 255, 0.2)'
}
},
axisLabel: {
margin: 20,
textStyle: {
color: '#d1e6eb'
}
}
}
],
series: [
{
name: '负载电量',
type: 'bar',
yAxisIndex: 0,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(250,173,20, 1)' },
{ offset: 0.5, color: 'rgba(250,173,20, 0.8)' },
{ offset: 1, color: 'rgba(250,173,20,0.5)' }
]
}
},
tooltip: {
valueFormatter(value) {
if (typeof value === 'number') return value.toFixed(2) + 'kWh';
else return '-';
}
},
data: [
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0
]
},
{
name: '中央空调冷量',
type: 'bar',
yAxisIndex: 1,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(1,230,245, 1)' },
{ offset: 0.5, color: 'rgba(1,230,245, 0.8)' },
{ offset: 1, color: 'rgba(1,230,245,0.5)' }
]
}
},
tooltip: {
valueFormatter(value) {
if (typeof value === 'number') return value.toFixed(2) + 'kWh';
else return '-';
}
},
data: [
0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.10333333333333333, 0.0, 0.0, 0.0,
3.5133333333333336, 6.2, 6.2, 6.2, 6.2, 6.2, 6.2, 6.2, 6.2, 6.2, 6.2,
2.2733333333333334, 0.0
]
}
],
func: (myChart, option) => {
let start = 0,
end = 7;
option.dataZoom.startValue = option.xAxis[0].data[start]; //
option.dataZoom.endValue = option.xAxis[0].data[end];
myChart.setOption(option);
if (this.electInterval) {
clearInterval(this.electInterval);
}
this.electInterval = setInterval(function () {
option.dataZoom.startValue = option.xAxis[0].data[start];
option.dataZoom.endValue = option.xAxis[0].data[end];
myChart.setOption(option);
start += 1;
end += 1;
if (end >= option.xAxis[0].data.length) {
end = 7;
start = 0;
}
}, 5000);
},
};
option.func(myChart, option)
2.叠加流光效果
多条曲线叠加，但注意，需要监听legendselectchanged事件，
option = {
tooltip: {
trigger: 'axis',
show: true,
},
grid: {
left: 20,
right: 20,
bottom: 0,
containLabel: true,
},
dataZoom: {
type: 'inside',
}, legend: {
textStyle: {
color: '#fff',
borderColor: '#fff'
}
},
func: (myChart, option) => {
// 修复无图表数据切换bug
if (option.series[0].data.length <= 0 && option.series[1].data.length <= 0) {
return;
}
option.series[2].data = option.series[0].data;
option.series[3].data = option.series[0].data;
option.series[4].data = option.series[1].data;
option.series[5].data = option.series[1].data;
// setTimeout修复初始加载动效没生效bug
setTimeout(() => {
myChart.clear();
myChart.setOption(option);
}, 100)
if (this.loadInterval) {
clearInterval(this.loadInterval);
}
this.loadInterval = setInterval(() => {
myChart.clear();
myChart.setOption(option);
}, 6000);
myChart.on('legendselectchanged', function (params) {
let selectArr = Object.values(params.selected);
option.series[2].data = option.series[0].data;
option.series[3].data = option.series[0].data;
option.series[4].data = option.series[1].data;
option.series[5].data = option.series[1].data;
if (!selectArr[0]) {
option.series[2].data = [];
option.series[3].data = [];
}
if (!selectArr[1]) {
option.series[4].data = [];
option.series[5].data = [];
}
myChart.setOption(option);
});
}, xAxis: [
{
type: 'category',
boundaryGap: true,
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.2)'
}
},
axisLabel: {
textStyle: {
color: '#fff',
margin: 15
}
},
axisTick: {
show: false
},
data: ['10:55','11:00','11:05','11:10','11:15','11:20','11:25','11:30','11:35','11:40','11:45','11:50','11:55','12:00','12:05','12:10','12:15','12:20','12:25','12:30','12:35','12:40','12:45','12:50','12:55','13:00','13:05','13:10','13:15','13:20','13:25','13:30','13:35','13:40','13:45','13:50','13:55','14:00','14:05','14:10','14:15','14:20','14:25','14:30','14:35','14:40','14:45','14:50','14:55','15:00','15:05','15:10','15:15','15:20','15:25','15:30','15:35','15:40','15:45','15:50','15:55','16:00','16:05','16:10','16:15','16:20','16:25','16:30','16:35','16:40','16:45','16:50','16:55','17:00','17:05','17:10','17:15','17:20','17:25','17:30','17:35','17:40','17:45','17:50','17:55','18:00','18:05','18:10','18:15','18:20','18:25','18:30','18:35','18:40','18:45','18:50','18:55','19:00','19:05','19:10','19:15','19:20','19:25','19:30','19:35','19:40','19:45','19:50','19:55','20:00','20:05','20:10','20:15','20:20','20:25','20:30','20:35','20:40','20:45','20:50','20:55','21:00','21:05','21:10','21:15','21:20','21:25','21:30','21:35','21:40','21:45','21:50','21:55','22:00','22:05','22:10','22:15','22:20','22:25','22:30','22:35','22:40','22:45','22:50','22:55','23:00','23:05','23:10','23:15','23:20','23:25','23:30','23:35','23:40','23:45','23:50','23:55','00:00','00:05','00:10','00:15','00:20','00:25','00:30','00:35','00:40','00:45','00:50','00:55','01:00','01:05','01:10','01:15','01:20','01:25','01:30','01:35','01:40','01:45','01:50','01:55','02:00','02:05','02:10','02:15','02:20','02:25','02:30','02:35','02:40','02:45','02:50','02:55','03:00','03:05','03:10','03:15','03:20','03:25','03:30','03:35','03:40','03:45','03:50','03:55','04:00','04:05','04:10','04:15','04:20','04:25','04:30','04:35','04:40','04:45','04:50','04:55','05:00','05:05','05:10','05:15','05:20','05:25','05:30','05:35','05:40','05:45','05:50','05:55','06:00','06:05','06:10','06:15','06:20','06:25','06:30','06:35','06:40','06:45','06:50','06:55','07:00','07:05','07:10','07:15','07:20','07:25','07:30','07:35','07:40','07:45','07:50','07:55','08:00','08:05','08:10','08:15','08:20','08:25','08:30','08:35','08:40','08:45','08:50','08:55','09:00','09:05','09:10','09:15','09:20','09:25','09:30','09:35','09:40','09:45','09:50','09:55','10:00','10:05','10:10','10:15','10:20','10:25','10:30','10:35','10:40','10:45','10:50','10:55',]
}
],
yAxis: [
{
type: 'value',
name: 'kW',
nameTextStyle: {
color: '#fff'
},
splitNumber: 7,
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.2)'
}
},
axisLine: {
show: false
},
axisLabel: {
margin: 20,
textStyle: {
color: '#d1e6eb'
}
},
axisTick: {
show: false
}
},
{
type: 'value',
name: 'kW',
splitNumber: 7,
nameTextStyle: {
color: '#fff'
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(255, 255, 255, 0.2)'
}
},
axisLine: {
show: false
},
axisLabel: {
margin: 20,
textStyle: {
color: '#d1e6eb'
}
},
axisTick: {
show: false
}
}
],
series: [
{
name: '电负荷',
type: 'line',
smooth: true,
symbol: 'none',
animation: false,
areaStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(250,173,20, 1)'
},
{
offset: 0.5,
color: 'rgba(250,173,20, 0.8)'
},
{
offset: 1,
color: 'rgba(250,173,20,0.5)'
}
]
}
},
color: '#FAAD14',
tooltip: {
trigger: 'axis',
show: true,
valueFormatter(value) {
if (typeof value === 'number') return value.toFixed(2) + 'kW';
else return '-';
},
},
data: [0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,]
},
{
name: '空调负荷',
type: 'line',
smooth: true,
symbol: 'none',
yAxisIndex: 1,
animation: false,
areaStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(1,230,245, 1)'
},
{
offset: 0.5,
color: 'rgba(1,230,245, 0.8)'
},
{
offset: 1,
color: 'rgba(1,230,245,0.5)'
}
]
}
},
color: '#01E6F5',
tooltip: {
trigger: 'axis',
show: true,
valueFormatter(value) {
if (typeof value === 'number') return value.toFixed(2) + 'kW';
else return '-';
},
},
data: [0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,6.2,6.2,6.2,6.2,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,6.2,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,6.2,0.0,0.0,0.0,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,6.2,3.634,6.2,6.2,6.2,6.2,6.2,]
},
{
type: 'line',
smooth: true,
lineStyle: {
color: '#FFDF6F',
join: 'round',
shadowColor: '#FFDF6F',
shadowBlur: 6
},
tooltip: {
trigger: 'axis',
show: false
},
symbol: 'none',
animationDelay: 50,
animationDuration: 5000,
data: []
},
{
type: 'line',
smooth: true,
lineStyle: {
color: '#FAAD14'
},
tooltip: {
trigger: 'axis',
show: false
},
symbol: 'none',
animationDelay: 700,
animationDuration: 5000,
data: []
},
{
type: 'line',
smooth: true,
yAxisIndex: 1,
lineStyle: {
color: '#88F8FF',
join: 'round',
shadowColor: '#88F8FF',
shadowBlur: 6
},
tooltip: {
trigger: 'axis',
show: false
},
symbol: 'none',
animationDelay: 50,
animationDuration: 5000,
data: []
},
{
type: 'line',
smooth: true,
yAxisIndex: 1,
lineStyle: {
color: '#01E6F5'
},
tooltip: {
trigger: 'axis',
show: false
},
symbol: 'none',
animationDelay: 700,
animationDuration: 5000,
data: []
}
]
}
option.func(myChart, option)
3.柱状图光亮轮播
使用highlight， downplay
option = {
color: '#5470c6',
textStyle: {
color: 'rgba(255,255,255, 0.65)'
},
grid: {
containLabel: true,
show: false,
left: '0%',
top: '18%',
right: '3%',
bottom: '4%'
},
xAxis: {
type: 'category',
data: [
'01',
'02',
'03',
'04',
'05',
'06',
'07',
'08',
'09',
'10',
'11',
'12',
'13',
'14',
'15',
'16',
'17',
'18',
'19',
'20',
'21',
'22',
'23',
'24',
'25',
'26',
'27',
'28',
'29',
'30',
'31'
]
},
yAxis: {
type: 'value',
name: '电量 (kWh)',
nameTextStyle: {
padding: [0, 0, 0, 12]
},
axisLine: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)'
}
}
},
series: [
{
data: [
{ value: 60.0, name: '01', text: 60.0, showText: '100' },
{ value: 15.96, name: '02', text: 15.96, showText: '100' },
{ value: 34.95, name: '03', text: 34.95, showText: '100' },
{ value: 30.16, name: '04', text: 30.16, showText: '100' },
{ value: 44.36, name: '05', text: 44.36, showText: '100' },
{ value: 43.99, name: '06', text: 43.99, showText: '100' },
{ value: 34.62, name: '07', text: 34.62, showText: '100' },
{ value: 106.42, name: '08', text: 106.42, showText: '100' },
{ value: 101.34, name: '09', text: 101.34, showText: '100' },
{ value: 119.57, name: '10', text: 119.57, showText: '100' },
{ value: 107.8, name: '11', text: 107.8, showText: '100' },
{ value: 112.52, name: '12', text: 112.52, showText: '100' },
{ value: 116.99, name: '13', text: 116.99, showText: '100' },
{ value: 109.11, name: '14', text: 109.11, showText: '100' },
{ value: 86.08, name: '15', text: 86.08, showText: '100' },
{ value: 95.06, name: '16', text: 95.06, showText: '100' },
{ value: 91.39, name: '17', text: 91.39, showText: '100' },
{ value: 77.3, name: '18', text: 77.3, showText: '100' },
{ value: 88.7, name: '19', text: 88.7, showText: '100' },
{ value: 116.72, name: '20', text: 116.72, showText: '100' },
{ value: 105.08, name: '21', text: 105.08, showText: '100' },
{ value: 47.76, name: '22', text: 47.76, showText: '100' },
{ value: 0.0, name: '23', text: 0.0, showText: '100' },
{ value: 0.0, name: '24', text: 0.0, showText: '100' },
{ value: 0.0, name: '25', text: 0.0, showText: '100' },
{ value: 0.0, name: '26', text: 0.0, showText: '100' },
{ value: 0.0, name: '27', text: 0.0, showText: '100' },
{ value: 0.0, name: '28', text: 0.0, showText: '100' },
{ value: 0.0, name: '29', text: 0.0, showText: '100' },
{ value: 0.0, name: '30', text: 0.0, showText: '100' },
{ value: 0.0, name: '31', text: 0.0, showText: '100' }
],
type: 'bar',
smooth: true,
itemStyle: {
normal: {
color: function (params) {
const lastIndex = 21;
const commonColorOption = {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
global: false // 缺省为 false
};
if (params.dataIndex === lastIndex) {
return Object.assign(commonColorOption, {
colorStops: [
{ offset: 0, color: '#FFB600' },
{ offset: 1, color: '#ffb60021' }
]
});
}
return Object.assign(commonColorOption, {
colorStops: [
{ offset: 0, color: '#01E6F5' },
{ offset: 1, color: '#1890ff24' }
]
});
},
barBorderRadius: [1, 1, 0, 0]
}
},
emphasis: {
itemStyle: {
shadowColor: '#fff',
shadowBlur: 10
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
backgroundColor: '#6a7985'
}
},
formatter: function (datas) {
var res = datas[0].name + '<br/>';
res = res + '电量 (kWh)：' + datas[0].data.text;
return res;
}
},
func: (myChart, option, isSame) => {
this.historyTimer && clearInterval(this.historyTimer);
const indexString = sessionStorage.getItem(
'monitor_screen_generation_history_index'
);
let index = isSame && indexString ? Number(indexString) : -1; //高亮所在下标
let dataLength = 22;
this.historyTimer = setInterval(() => {
index = (index + 1) % dataLength;
const newData = option.series[0].data.map((item, i) => {
let newItem;
if (index === i) {
const color = i === dataLength - 1 ? '#FAAD14' : '#01E6F5';
newItem = Object.assign(item, {
label: {
show: true,
position: 'top',
color: color,
fontSize: '12px',
formatter: (params) => {
return params.value[params.encode.x[0]];
}
}
});
} else {
newItem = Object.assign(item, { label: null });
}
return newItem;
});
if (index > dataLength) {
index = 0;
}
sessionStorage.setItem(
'monitor_screen_generation_history_index',
JSON.stringify(index)
);
option.series[0].data = newData;
myChart.setOption(option);
myChart.dispatchAction({
type: 'downplay',
seriesIndex: new Array(index + 1).fill(1).map((v, i) => i)
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: index
});
}, 2000);
}
};
option.func(myChart, option)
以上就是echart实现大屏动效示例详解的详细内容，更多关于echart大屏动效的资料请关注我们其它相关文章！
赞 (0)
相关推荐
-
echarts报错:Error in mounted hook的解决方法
目录 1 .具体报错内容: 2.解决办法: 3.原因: 4.扩展–import导入的方式: 总结 echarts安装创建图表时报这种错误:Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init’)” 1 .具体报错内容: 2.解决办法: 原先大家可能是这样的写法 import echarts from 'echarts' 后面改为这样导入就不会出错了 import * as ech
-
vue中使用echarts实现动态数据绑定以及获取后端接口数据
目录 前言 1.柱状图 2.折线图 3.饼状图 4.地图 总结 前言 之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单来讲,就是从接口获取到的数据,需要在图表的方法里再次定义一下,然后用setOption方法就可以获取到了. 1.柱状图 首先看接口传过来的数据,传过来一个数组,第一条年度2021,数量1,第二条年度2022,数量3 因为柱状图的数
-
uniapp引用echarts的详细步骤(附柱状图实例)
相信很多小伙伴对于echarts这个东西应该不会陌生,我在网上看到很多文章,那么他到底是怎么用的呢,却是五花八门,我现在就来总结一下我的方法. 如果使用npm全局安装,太麻烦,这里推荐使用官网(ECharts 在线构建)定制下载,这样会方便我们使用. 选择柱状图,折线图,饼图:这三样是平常较常用到的: 坐标系选择直角坐标系: 组件可以全选,也可以选择自己所需要的,在这里个人建议除了工具栏不选,其他都选上:下载后的文件为echarts.min.js,建议把他放在static内. 好了,来到下一步,
-
关于微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题
1.微信小程序使用echarts,首先下载echarts并导入小程序项目中,因小程序后期上线对文件大小有要求,所以建议进行定制下载导入可减少文件大小占比,也可以下载以前旧版本文件比较小的应付使用 下载echarts: https://echarts.apache.org/zh/download.html 定制下载:https://echarts.apache.org/zh/builder.html 旧版本查看:https://archive.apache.org/dist/echarts/ 下载
-
echart实现大屏动效示例详解
目录 1.通过dataZoom实现柱状图动态前移效果 2.叠加流光效果 3.柱状图光亮轮播 1.通过dataZoom实现柱状图动态前移效果 最近做大屏相关需求,产品说需要炫酷一点的效果,于是做了一些echart相关的动效 设置dataZoom当前缩放值,加定时器,实现轮播效果. 示例: option = { color: ['#1E90FF', '#FFA500'], tooltip: { trigger: 'axis', axisPointer: {} }, grid: { left: 20,
-
python可视化大屏库big_screen示例详解
目录 big_screen 特点 安装环境 输入数据 本地运行 在线部署 对于从事数据领域的小伙伴来说,当需要阐述自己观点.展示项目成果时,我们需要在最短时间内让别人知道你的想法.我相信单调乏味的语言很难让别人快速理解.最直接有效的方式就是将数据如上图所示这样,进行可视化展现. 具体如下: big_screen 特点 便利性工具, 结构简单, 你只需传数据就可以实现数据大屏展示. 安装环境 pip install -i https://pypi.tuna.tsinghua.edu.cn/simp
-
Vue 不定高展开动效原理详解
目录 使用场景 背景 实现 transition 组件 过渡效果原理 解决 使用场景 在大多数 APP 中,都有问答模块,类似于下面这种(bilibili 为例): 问答模块的静态页面开发并不复杂,也没有特殊的交互.唯一有一点难度应该是回答部分的展开特效. 展开时,需要从上往下将回答部分的 div 慢慢撑开,上面的箭头也要有旋转的特效. 收回时,需要从下往上将回答部分的 div 慢慢缩小,上面的箭头也要有旋转的特效. 对于一般的展开.隐藏特效,只需要在对应元素的 height 上面增加过渡效果即
-
Vue transx组件切换动画库示例详解
目录 来个介绍 安装 使用 支持参数 支持事件 支持API 支持的动画类型 说明 来个介绍 先奉上组件库的名称:transx github地址:github.com/tnfe/transx npm参考: www.npmjs.com/package/tra… 示例地址:codesanbox 安装 npm install transx or yarn add transx 使用 <!-- 包裹动画元素 --> <trans-x :time="time" :delay=&q
-
Vue指令实现大屏元素分辨率适配详解
目录 前言 1. 常见的适配方案 2. CSS3 缩放方案 3. 封装一个缩放指令 4. 后记 前言 随着前端技术的不断发展.数据中心(中台)之类的概念的不断升级.物联网设备的更新和普及,越来越多的业主(项目)喜欢在系统中添加一个或者多个可视化大屏,用来集中的展现数据变化.位置变化等等,老板们也更喜欢称之为“态势”. 当然,作为程序员一般都不关心“老板们”的想法,只要完成项目即可.但是经常会有这样的问题:我有一个大屏的模板,但是用户的浏览器分辨率不够,或者有的有书签栏有的没有书签栏,更或者是有的
-
Echart折线图手柄触发事件示例详解
前言 这是我准备在这个项目中使用的图形库,这也是一款基于HTML5的图形库.图形的创建也比较简单,直接引用Javascript即可.使用这个库的原因主要有三点,一个是因为这个库是百度的项目,而且一直有更新,目前最新的是EChart 3:第二个是这个库的项目文档比较详细,每个点都说明的比较清楚,而且是中文的,理解比较容易:第三点是这个库支持的图形很丰富,并且可以直接切换图形,使用起来很方便. 下面话不多说了,来一起看看详细的介绍吧 1 环境: vue-cli(2.0)+ vue-echarts (
-
Vue大屏数据展示示例
高效实现需求,避免臃肿的组件库和重复造轮子,前段时间做了很多大屏展示类的项目,今天来跟大家分享一下,大屏的实践过程,最开始我是使用了dataview 这个组件库,然后发现是自己并不需要它太多的封装好的组件,而且在移动端,有样式错乱的问题.所以自己看了他的实现方式,搞了一个大屏自适应的组件.话不多说,直接上效果图: 效果图 需要适配所有尺寸的大型显示屏,并且在手机上,可以缩放查看效果.我这里添加了这样一段代码,通过缩放body的大小,进行等比例放大缩小,达到不变形,整体适配的效果. <script
-
Vue使用Echarts实现大屏可视化布局示例详细讲解
目录 一.效果展示 二.基本的布局 三.背景 四.代码 布局中遇到的一些问题 一.效果展示 先看一下展示的效果,无论是尺寸多宽的屏幕,都会将内容显示完整,做到了正正的响应式.唯一不足的是图表中的样例,会随着图表的缩放而变换位置,窗口尺寸变化过快会反应不过来,好在有节流函数,可以让浏览器计算量没有那么大.本篇博客不会直接拿echarts图表下手,会先介绍一些这个大屏可视化的响应式布局.后面会出一个专门的博客介绍echarts的使用. 二.基本的布局 大致的布局如下,整体分为头部与body,头部有标
-
TypeScript实现十大排序算法之冒泡排序示例详解
目录 一. 冒泡排序的定义 二. 冒泡排序的流程 三. 冒泡排序的图解 四. 冒泡排序的代码 五. 冒泡排序的时间复杂度 六. 冒泡排序的总结 一. 冒泡排序的定义 冒泡排序是一种简单的排序方法. 基本思路是通过两两比较相邻的元素并交换它们的位置,从而使整个序列按照顺序排列. 该算法一趟排序后,最大值总是会移到数组最后面,那么接下来就不用再考虑这个最大值. 一直重复这样的操作,最终就可以得到排序完成的数组. 这种算法是稳定的,即相等元素的相对位置不会发生变化. 而且在最坏情况下,时间复杂度为O(
-
vue+three.js实现炫酷的3D登陆页面示例详解
目录 前言: Three.js的基础知识 关于场景 关于光源 关于相机(重要) 关于渲染器 完善效果 创建一个左上角的地球 使地球自转 创建星星 使星星运动 创建云以及运动轨迹 使云运动 完成three.js有关效果 结语 前言: 大家好,我是xx传媒严导(xx这两个字请自行脑补) . 该篇文章用到的主要技术:vue3.three.js 我们先看看成品效果: 高清大图预览(会有些慢): 座机小图预览: 废话不多说,直接进入正题 Three.js的基础知识 想象一下,在一个虚拟的3D世界中都需要什