课程名称： 数据可视化入门到精通-打造前端差异化竞争力
课程章节： 核心指标组件重构+销售趋势组件开发【vue+echarts正确打开姿势】
主讲老师： Sam
课程内容：
今天学习的内容包括：
vue-echarts组件库入门
课程收获：
6.1 心得：
module.exports = {
"env": {
"browser": true,
"es2020": true
},
"extends": "plugin:vue/essential",
"parserOptions": {
"ecmaVersion": 11,
"sourceType": "module"
},
"plugins": [
"vue"
],
"rules": {
}
};
const path = require('path')
const resolve = require('rollup-plugin-node-resolve')
const commonjs = require('rollup-plugin-commonjs')
const babel = require('rollup-plugin-babel')
const json = require('rollup-plugin-json')
const vue = require('rollup-plugin-vue')
const postcss = require('rollup-plugin-postcss')
const inputPath = path.resolve(__dirname, './src/index.js')
const outputUmdPath = path.resolve(__dirname, './dist/imooc.datav.js')
const outputEsPath = path.resolve(__dirname, './dist/imooc.datav.es.js')
module.exports = {
input: inputPath,
output: [{
file: outputUmdPath,
format: 'umd',
name: 'imoocDatav',
globals: {
vue: 'vue'
}
}, {
file: outputEsPath,
format: 'es',
globals: {
vue: 'vue'
}
}],
plugins: [
resolve(),
commonjs(),
babel({
exclude: 'node_modules/**',
runtimeHelpers: true,
plugins: [
['@babel/transform-runtime', {
regenerator: true
}]
]
}),
json(),
vue(),
postcss({
plugins: []
})
],
external: ['vue', 'echarts']
}
const path = require('path')
const resolve = require('rollup-plugin-node-resolve')
const commonjs = require('rollup-plugin-commonjs')
const babel = require('rollup-plugin-babel')
const json = require('rollup-plugin-json')
const { terser } = require('rollup-plugin-terser')
const vue = require('rollup-plugin-vue')
const postcss = require('rollup-plugin-postcss')
const inputPath = path.resolve(__dirname, './src/index.js')
const outputUmdPath = path.resolve(__dirname, './dist/imooc.datav.min.js')
const outputEsPath = path.resolve(__dirname, './dist/imooc.datav.es.min.js')
module.exports = {
input: inputPath,
output: [{
file: outputUmdPath,
format: 'umd',
name: 'imoocDatav',
globals: {
vue: 'vue'
}
}, {
file: outputEsPath,
format: 'es',
globals: {
vue: 'vue'
}
}],
plugins: [
resolve(),
commonjs(),
babel({
exclude: 'node_modules/**',
runtimeHelpers: true,
plugins: [
['@babel/transform-runtime', {
regenerator: true
}]
]
}),
json(),
vue(),
postcss({
plugins: []
}),
terser()
],
external: ['vue']
}
<!DOCTYPE html>
<html>
<head>
<title>imooc datav libs example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.0-beta.15/dist/vue.global.js"></script>
<script src="../dist/imooc.datav.js"></script>
</head>
<body>
<div id="app">
{{message}}
<test-component></test-component>
</div>
<script>
Vue.createApp({
setup() {
var message = 'hello imooc!'
return {
message
}
}
}).use(imoocDatav).mount('#app')
</script>
</body>
</html>
import Icon from './components/Icon/index'
import SvgAnimation from './components/SvgAnimation/index'
import ImoocLoading from './components/ImoocLoading/index'
import ImoocFlyBox from './components/ImoocFlyBox/index'
import Container from './components/Container/index'
import ImoocLogo from './components/ImoocLogo/index'
import VueCountTo from './components/VueCountTo/index'
import VueEcharts from './components/VueEcharts/index'
import BaseScrollList from './components/BaseScrollList/index'
export default function(Vue) {
Vue.use(Icon)
Vue.use(SvgAnimation)
Vue.use(ImoocLoading)
Vue.use(ImoocFlyBox)
Vue.use(Container)
Vue.use(ImoocLogo)
Vue.use(VueCountTo)
Vue.use(VueEcharts)
Vue.use(BaseScrollList)
}
"use strict";
Component({
properties: {
tab_datas: {
type: Array,
value: [],
observer: "onItemsChange"
},
},
data: {
content: '',
searchValue: '',
},
methods: {
onItemsChange: function onItemsChange() {
this.setData({
});
},
bindSearchInput: function bindSearchInput(e) {
this.setData({
content: e.detail.value
})
this.triggerEvent('onSearchInputChange', { content: e.detail.value });
},
onClickClear: function onClickClear(e) {
this.setData({
searchValue: '',
content: ''
});
this.triggerEvent('onSearchInputChange', { content: this.data.content });
},
bindConfirmSearch: function bindConfirmSearch(e) {
this.triggerEvent('onClickSubmit', { content: e.detail.value });
},
onClickSearch: function onClickSearch(e) {
this.triggerEvent('onClickSubmit', { content: this.data.content });
},
onChangeInputValue: function onChangeInputValue(e) {
this.setData({
searchValue:e
});
}
}
});
<template>
<div id="imooc-container" :ref="refName">
<template v-if="ready">
<slot></slot>
</template>
</div>
</template>
<script>
import { ref, getCurrentInstance, onMounted, onUnmounted, nextTick } from 'vue'
import { debounce } from '../../utils'
export default {
name: 'ImoocContainer',
props: {
options: Object
},
setup(props) {
const refName = 'imoocContainer'
const width = ref(0)
const height = ref(0)
const originalWidth = ref(0)
const originalHeight = ref(0)
const ready = ref(false)
let context, dom, observer
const initSize = () => {
return new Promise((resolve) => {
nextTick(() => {
dom = context.$refs[refName]
// 获取大屏的真实尺寸
if (props.options && props.options.width && props.options.height) {
width.value = props.options.width
height.value = props.options.height
} else {
width.value = dom.clientWidth
height.value = dom.clientHeight
}
// 获取画布尺寸
if (!originalWidth.value || !originalHeight.value) {
originalWidth.value = window.screen.width
originalHeight.value = window.screen.height
}
// console.log(width.value, height.value, originalWidth.value, originalHeight.value)
resolve()
})
})
}
const updateSize = () => {
if (width.value && height.value) {
dom.style.width = `${width.value}px`
dom.style.height = `${height.value}px`
} else {
dom.style.width = `${originalWidth.value}px`
dom.style.height = `${originalHeight.value}px`
}
}
const updateScale = () => {
// 获取真实的视口尺寸
const currentWidth = document.body.clientWidth
const currentHeight = document.body.clientHeight
// 获取大屏最终的宽高
const realWidth = width.value || originalWidth.value
const realHeight = height.value || originalHeight.value
// console.log(currentWidth, currentHeight)
const widthScale = currentWidth / realWidth
const heightScale = currentHeight / realHeight
dom && (dom.style.transform = `scale(${widthScale}, ${heightScale})`)
}
const onResize = async (e) => {
await initSize()
updateScale()
}
const initMutationObserver = () => {
const MutationObserver = window.MutationObserver
observer = new MutationObserver(onResize)
observer.observe(dom, {
attributes: true,
attributeFilter: ['style'],
attributeOldValue: true
})
}
const removeMutationObserver = () => {
if (observer) {
observer.disconnect()
observer.takeRecords()
observer = null
}
}
onMounted(async () => {
ready.value = false
context = getCurrentInstance().ctx
await initSize()
updateSize()
updateScale()
window.addEventListener('resize', debounce(100, onResize))
initMutationObserver()
ready.value = true
})
onUnmounted(() => {
window.removeEventListener('resize', onResize)
removeMutationObserver()
})
return {
refName,
ready
}
}
}
</script>
<style lang="scss">
#imooc-container {
position: fixed;
top: 0;
left: 0;
overflow: hidden;
transform-origin: left top;
z-index: 999;
}
</style>
随时随地看视频
