vue相关报错--持续更新中

一 、css相关

1. 修改滑块样式之后出现白色方块

使用element 中table时候修改滑块样式之后出现白色方块

解决方法：添加如下设置

 ::-webkit-scrollbar-corner{
  background: transparent;
}

二 、配置相关

1. vue使用vue-router报错

报错1.app.js:172 Uncaught TypeError: vue_router__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor

at eval (index.js:4:1)
at ./src/router/index.js (app.js:108:1)
at __webpack_require__ (app.js:169:33)
at fn (app.js:442:21)
at eval (main.js:7:71)
at ./src/main.js (app.js:97:1)
at __webpack_require__ (app.js:169:33)
at app.js:1367:109
at __webpack_require__.O (app.js:223:23)
at app.js:1368:53 

1. 原因一是引入错误，一下是正确示范

main.js

import Vue from 'vue'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import router from './router'

import App from './App.vue'
Vue.use(ElementUI);
new Vue({
  router, // 确保将路由器实例绑定到Vue实例上
  render: h => h(App),
}).$mount('#app')

router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const homeRoutes = new Router({
  routes: [
    
   
  ]
})
export default homeRoutes

2. 确定引入正确就是版本号不对

vue-router@4 使用vue3。 vue2使用vue-router@3

卸载：npm uninstall vue-router
安装：npm i vue-router@3

报错2.vue.runtime.esm.js:4605 [Vue warn]: Unknown custom element:

是main.js文件中router引入不对，请对比问题一中的第一条修改

报错3. vue.runtime.esm.js:4605 [Vue warn]: Error in render: "TypeError: Cannot read

是main.js文件中router引入不对，请对比问题一中的第一条修改

2. 关闭eslint校验

修改环境 “vue”: “^2.6.14”,

直接在vue.config.js中添加lintOnSave: false后重启就好了

三、echart相关

1. echarts 关于字体模糊

方法一：采用svg渲染，比canvans清晰度高

注意：此方法会影响图形渐变

this.chart = this.$echarts.init(document.getElementById('id'), null, {renderer: 'svg'})

方法二：采用canvans渲染，devicePixelRatio调整清晰度

devicePixelRatio越大越清楚

this.chart = this.$echarts.init(document.getElementById('id'), null, {devicePixelRatio: 2.5})

2. echarts折线图 markline 数值自定义设置

方法一：自定义坐标

markLine: {
         data:[
                [
                  {
                    name:'自定义名字',
                    coord:[0,120]//起点： x，y对应
                   },{
                    coord:[6, 500]//末点 x，y对应
                   }
                 ]
         ]
},

3. x 或者y轴文字自定义设置

ption = {
  xAxis: {
    type: 'category',
    data: ['Mon（谁谁谁谁谁谁', 'Tue谁谁谁谁谁谁谁', 'Wed谁谁谁谁谁谁谁', 'Thu谁谁谁谁谁谁谁', 'Fri谁谁谁谁谁谁谁', 'Sat谁谁谁谁谁谁谁', 'Sun'],
    axisLabel: {
            show: true,
            interval: 0, // 文字全部显示，不进行间隔显示
            formatter: function (params) {
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber =5;
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                let regex =  /.*?(?=[（(])/; // 匹配中英文左括号前的内容
                let match = params.match(regex); // 使用正则表达式匹配字符串
                if (match) {
                  newParamsName = match[0]; // 获取匹配到的括号前的内容
                } else{
                  for (var p = 0; p < rowNumber; p++) {
                  let tempStr = "";
                  let start = p * provideNumber;
                  let end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;
                }
                }
                
              } else {
                newParamsName = params;
              }
              return newParamsName;
            },
          },},
  yAxis: {
    type: 'value',
   
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};