vue学习之echarts篇

最新推荐文章于 2024-08-08 08:32:31 发布

草莓SAMA

最新推荐文章于 2024-08-08 08:32:31 发布

阅读量618

点赞数

分类专栏：学习文章标签： vue 编辑器 vscode

本文链接：https://blog.csdn.net/xwq997997/article/details/121569480

版权

本文记录了在Vue项目中集成Echarts的过程，包括安装less和flexible，创建动态时间显示的头部组件，以及详细步骤来安装和配置Echarts，实现有x轴和y轴的图表。

摘要由CSDN通过智能技术生成

进行中，自己记录一下。
项目来源b站

前言：
为了熟悉组件化开发和echarts，这里都拆出来当做组件来完成的。

一、准备工作

1、1安装less

安装less（这里我报错了百度说是我依赖太高，卸载了重新安了个低版本的）

 npm install less less-loader --save
 npm uninstall less-loader
 npm install less-loader@4.1.0 --save

1、2安装flexible

参考

npm i -S lib-flexible
import 'lib-flexible/flexible.js'
在nodemodule/lib-flexible/flexible.js中修改代码如下：

    function refreshRem() {
   
        var width = docEl.getBoundingClientRect().width;
        // if (width / dpr > 540) {
   
        //     width = 540 * dpr;
        // }
        // var rem = width / 10;
 
 		//因为我笔记本只有1366，为了看效果我把这里也注释了
        // 最小1366px，最大适配2560px
        //if (width / dpr < 1366) {
   
            //width = 1366 * dpr;
        //} else if (width / dpr > 2560) {
   
          //  width = 2560 * dpr;
        //}
        // 设置成24等份，设计稿时1920px的，这样1rem就是80px
        var rem = width / 24;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }