首页手记【备战春招】第17天数据可视化，打造前端差异化竞争力...

【备战春招】第17天数据可视化，打造前端差异化竞争力第六讲

标签：

JavaScript

课程名称：数据可视化入门到精通-打造前端差异化竞争力

课程章节： 核心指标组件重构+销售趋势组件开发【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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@3.0.0-beta.15/dist/vue.global.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../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>

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

ToRAmen

学生

手记
篇

粉丝

10

获赞与收藏

5

关注作者，订阅最新文章

相关文章推荐

【备战春招】第13天数据可视化，打造前端差异化竞争力第二讲

【备战春招】第12天数据可视化，打造前端差异化竞争力第一讲

【备战春招】第15天数据可视化，打造前端差异化竞争力第四讲

【备战春招】第14天数据可视化，打造前端差异化竞争力第三讲

【备战春招】第16天数据可视化，打造前端差异化竞争力第五讲

阅读免费教程

JavaScript 入门教程

80个小节 311150 2192

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

【备战春招】第17天 数据可视化，打造前端差异化竞争力 第六讲

课程内容：

课程收获：

6.1 心得：

相关文章推荐

阅读免费教程

【备战春招】第17天数据可视化，打造前端差异化竞争力第六讲