Vue+Echarts构建大数据可视化

推荐lib-flexible来作为智能大屏适配的解决方案

环境搭建

1. 脚手架创建结构
2. 安装flexible

npm i lib-flexible

3. 项目入口文件main.js中引入lib-flexible;删除index.html的meta标签,因为 lib-flexible会通过JS动态改写标签（添加属性data-dpr、font-size）

import 'lib-flexible'

4. 安装postcss-px2rem

npm install postcss-px2rem -D

5. 在vue.config.js,配置postcss-px2rem

module.exports = {
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        // 以设计稿1920为例， 1920 / 10 = 192
                        remUnit: 192
                    }),
                ]
            }
        }
    },
};

6. 找./node_modules/lib-flexible/flexible.js修改一下代码

//修改前，当屏幕宽度除以dpr（dpr是一个倍数，此处一般为1）大于540这个特定值的时候，那么就不再进行适配了
function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
        width = 540 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
//修改后
    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr < 1920) {
          width = 1920 * dpr;
        } else if (width / dpr > 5760) {
            width = 5760 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

echart

echarts 配置

1. 引入echart,下载js放入public/lib/echarts.min.js,在vue.config.js,配置echarts

module.exports = {
  configureWebpack: config => {
    // webpack配置，值位对象时会合并配置，为方法时会改写配置
    Object.assign(config, {
      // 开发生产共同配置
      externals: {
        echarts: "echarts"
      }
    });
  },
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // modifyVars: {},
          javascriptEnabled: true
        }
      },
      postcss: {
        // options here will be passed to postcss-loader
        plugins: [
          require("postcss-px2rem")({
            remUnit: 192
          })
        ]
      }
    }
  },
  publicPath: "./"
};

2. 使用 babel-plugin-equire 插件实现按需加载

• 先安装 babel-plugin-equire 插件

npm i babel-plugin-equire -D

• 然后在 babel.config.js 中配置插件

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    // 注册使用一下
    "equire"
  ]
};

• 在initEcharts.js 中按需加载

// eslint-disable-next-line
const initEcharts = equireAsync(["bar", "line","legend", "title","tooltip"]);

export default initEcharts;

3. main 全局变量

import initEcharts from "./core/initEcharts.js";
Vue.prototype.$initEcharts = initEcharts;
//使用方式
this.$initEcharts().then(echarts => {
    const chartInstance = echarts.init(this.$refs.chart)
    var option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
      }]
    }
    chartInstance.setOption(option)
})