1、引入echartsConfig.js
const Econfig = {
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.6)',
borderColor: 'rgba(0,0,0,0.6)',
textStyle: {
color: "#fff"
},
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
grid: {
left: "4%",
right: "4%",
bottom: "8%",
top: "20%",
containLabel: true,
},
ai: AiBf,
chatEvent: chatEvent
}
/**自动切换事件 */
function AiBf(echart, option, currentIndex) {
var id = setInterval(() => {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
echart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: currentIndex,
});
currentIndex = (currentIndex + 1) % dataLen;
// 高亮当前图形
echart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: currentIndex,
});
// 显示 tooltip
echart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: currentIndex,
});
}, 5000);
return id
}
/**鼠标事件 */
// mouseover: 鼠标移到某元素之上
// mouseout: 鼠标从某元素移开
function chatEvent(myChart, tid, option) {
var id = 0;
myChart.on('click', (params) => {
console.log("你点我干嘛！！！！！！")
})
myChart.on('mouseover', (params) => {
clearInterval(tid)
clearInterval(id)
})
myChart.on('mouseout', (params) => {
clearInterval(tid)
clearInterval(id)
id = AiBf(myChart, option, params.dataIndex)
})
}
export {
Econfig
}
2、组件
<template>
<div class="excel">
<img
@click="exportExcel"
class="exportexcel"
title="导出excel"
:src="require('../../assets/img/' +skins+ '/exportExcel.png')"
>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
props: ['exceldata'],
computed: {
...mapState('setting', ['skins'])
},
data() {
return {
};
},
methods: {
foramtth(json_fields) {
let obj = {
th: [],
filterVal: []
}
for (const key in json_fields) {
obj.th.push(key)
obj.filterVal.push(json_fields[key])
}
return obj
},
exportExcel() {
// 格式化传过来的数据源
let { title, data } = this.exceldata
if (data.length > 0) {
let result = []
data.forEach(opt => {
let obj = {
sheetTitle: opt.sheetTitle,
th: this.foramtth(opt.json_fields).th,
data: this.formatJson(this.foramtth(opt.json_fields).filterVal, opt.json_data), //格式化的数据
}
result.push(obj)
})
require.ensure([], () => {
let { export2ExcelMultiSheet } = require("../../utils/Export2Excel");
export2ExcelMultiSheet(result, title);
});
}
},
// 格式化数据
formatJson(filterVal, jsonData) {
if (jsonData.length > 0) {
return jsonData.map((v) => filterVal.map((j) => v[j]));
} else {
return []
}
},
},
};
</script>
<style lang="less" scoped>
.excel {
display: flex;
justify-content: flex-end;
}
.exportexcel {
cursor: pointer;
25px;
margin-right: 30px;
}
</style>
3、直接引用
<exportExcels :exceldata="exceldata" v-if="isShowCaozuo"/>