1.echarts控制x轴标签数量,轮播显示
<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)
// 需要显示的个数
let start = 0,
end = 6
const barLen = end - start // 指定显示的长度(超过此长度就进行轮播, 没有超过此超度就不需要轮播, 直接展示即可)
let newXData, newYData
let len = 0 // 数据个数
// 1.执行init方法
init()
// 2入口方法封装
async function init() {
const res = await getData() //从后台获取数据
const xData = res.xData
const yData = res.yData
len = xData.length // 获取数据长度
if(len) {
// 有数据
if(xData.length > barLen) {
// 说明需要轮播
newXData = xData.concat(xData) // x轴数据复制一份(和轮播图原理一样)
newYData = yData.concat(yData) // y轴数据复制一份(和轮播图原理一样)
// 初始化图表
initChart(newXData.slice(start, end), newYData.slice(start, end))
// 自动进行轮播
setInterval(autoPlay, 1000)
} else {
// 说明不需要轮播
initChart(xData, yData)
}
} else {
// 没有数据 -> 显示暂无数据(友好提示)
initChart([], [])
}
}
// 3.封装自动轮播方法
function autoPlay() {
start++
end++
if (start === len) { // 临界值的判断和轮播、滑动一样的
start = 0
end = 6
}
const xT = newXData.slice(start, end)
const yT = newYData.slice(start, end)
initChart(xT, yT)
}
// 4.封装初始化图表方法
function initChart(xData, yData) {
if(!myChart) {
myChart = echarts.init(oBox)
}
if(xData.length) {
// 有数据
const option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: [
{
type: 'value'
}
],
xAxis: [
{
type: 'category',
data: xData
}
],
series: [
{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: yData
}
]
}
myChart.setOption(option)
} else {
// 没有数据
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;">暂无数据</div>'
// 同时 把myChart 置为空对象
myChart = null
}
}
// 5.获取数据方法
function getData() {
return new Promise((resolve, reject) => {
const xData = []
const yData = []
// 模拟请求
setTimeout(() => {
for(let i = 0; i < 7;i++) {
xData.push('类别' + i)
yData.push(Math.round( Math.random() * 100) )
}
resolve({
xData,
yData
})
}, 1000)
})
}
</script>
</body>
</html>
vue中使用event注意事项
window.addEventListener('click', this.measureDistance) //调用的时候没有括号
},
methods:{
measureDistance(event) {
console.log(event)
}
}
<img src="./img/distance.png"class="operationIcon" /><span class="operationText"
@click="test($event)">测距</span> //有$符号
//js部分
methods: {
test(event) {
console.log(event)
}
}
3.calc()函数生效问题：
1.运算符前后必须空格隔开，否则不生效；常用的长度值几乎都可以使用calc()函数进行计算（包括%，px等），calc()函数支持 “+”, “-”, “*”, “/” 运算；
2.calc()函数在less中不能使用不生效（less的运算方式和calc发送了冲突），比如calc(100% - 250px )会被编译为calc(-150% )，解决办法将函数写为calc(~“100% - 250px”)
4.v-show有时不生效问题
当v-show不起作用，很大一部分是因为该标签设置了display属性样式如display: flex，该样式的优先级高于v-show的display:none/display:block，导致v-show不起作用
此时可以使用v-if替代v-show，或者去掉该标签的display属性样式
5.对象深度赋值
const isPlainObject = obj => {
return Object.prototype.toString.call(obj) === '[object Object]'
}
// 主函数
function assignDeep() {
const args = Array.from(arguments);
if (args.length < 2) return args[0];
let result = args[0];
args.shift();
args.forEach(item => {
if (isPlainObject(item)) {
if (!isPlainObject(result)) result = {}
for (let key in item) {
if (result[key] && isPlainObject(item[key])) {
result[key] = assignDeep(result[key], item[key])
} else {
result[key] = item[key]
}
}
}
else if (item instanceof Array) {
if (!(result instanceof Array)) result = []
item.forEach((arrItem, arrIndex) => {
if (isPlainObject(arrItem)) {
result[arrIndex] = assignDeep(result[arrIndex])
} else {
result[arrIndex] = arrItem
}
})
}
})
return result;
}
var obj1 = { a: { b: 1, c: 1 } };
var obj2 = { a: { b: 2 } };
var obj3 = {};
// 调用assignDeep方法
assignDeep(obj3, obj1, obj2);
console.log(obj3); // { a: { b: 2, c: 1 } }
var obj4 = { a: { b: 1, c: [1, 2, 3] } };
var obj5 = { a: { b: 2, c: [1, 4], d:'d' } };
assignDeep(obj4,obj5); // { a: { b: 2, c: [1, 4], d:'d' } };
var obj6 = [1,2,3];
var obj7 = [4,5];
assignDeep(obj6, obj7); // [4,5,3]
6.echarts中formatter中的params参数
7.echarts重绘的时候无效的问题,echarts.init(item).setOption(params, true),加上一个true
8.路由传参刷新页面丢失问题
使用params传参刷新页面会丢失,可以使用query传参或者动态路由的方式传参,或者使用vuex,或者使用localstorage和sessionstorage
