vue+iview踩坑一

1.开发环境 vue+iview
2.电脑系统 windows10专业版
3.在使用vue+iview开发的过程中,我们根据项目需求,我们会使用到Carousel 走马灯,下面我来分享一下,使用时候遇到的坑!希望对你有所帮助。
4.在template中添加如下代码:

5.在return添加如下代码:

value2: 0,

6.存在的坑:

轮播时候 奇数次的时候,有数据;偶数次的时候没有数据;

7.解决方法:

删除: loop 属性

8.以上就是我踩坑的内容,希望对你有所帮助,本期的分享到了这里就结束啦,是不是很nice,让我们一起努力走向巅峰!

echarts自适应

1.开发环境 vue+echarts
2.电脑系统 windows10专业版
3.在使用 vue+echarts开发的过程中,我们希望echarts绘制的图可以自适应宽高,下面我来分享一下,希望对你有帮助!
4.在这里我做了封装,代码如写:

drawChart(drawChartId, Chenoption) {
      let _this: any = this;
      _this.myChart = _this.echarts.init(document.getElementById(drawChartId));
      let option = Chenoption;
      // 指定图表的配置项和数据
      _this.myChart.setOption(option);
      window.onresize = function() {
       _this.myChart.resize();  //在做完所有操作之后,添加如下代码
      };
    },

5.主要代码:

 window.onresize = function() {
       _this.myChart.resize();  //在做完所有操作之后,添加如下代码
      };
      //这样配置完成之后,当屏幕发生变化的时候,就会自动适应

6.本期的教程到了这里就结束啦,是不是很nice,希望对你有所帮助,既然我们选择了这个领域,就不要认输,不要低头,相信自己是最好的,让我们一起努力走向巅峰!

Vue.nextTick总结一

1.开发环境 vue+echarts
2.电脑系统 windows10专业版
3.在使用vue+echarts开发的过程中,echarts初始化的时候,宽度和高度设置为100%,但是没有生效!
4.template中代码为:

<div id="myChart"style="width: 100%; height: 100%"></div>

5.效果图为:

//这个效果和我们想要的效果完全不一样,查阅了很多资料之后,发现需要使用 Vue.nextTick,下面是我对Vue.nextTick的总结,理解不对的地方请指教。

6.在mounted 中添加如下代码:

this.$nextTick(()=> {   
   this.tt(max, min, mai, mi);
});

6-1.效果如下:

使用vue.nextTick之后就完全ok啦,是不是很nice。

7.关于vue.nextTick总结:

1.作用:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之
后立即使用这个方法,获取更新后的 DOM。
2.异步说明:
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的
策略进行 DOM 的更新。在 Vue 的[文档]中,说明 Vue是异步执行
DOM 更新的。简单来说,Vue 在修改数据后,视图不会立刻更新,而是等
同一事件循环中的所有数据变化完成之后,再统一进行视图更新。
3.怎么获取最新的dom:
    此时通过 Vue.nextTick 获取到改变后的 DOM 。
    通过setTimeout(fn, 0) 也可以同样获取到。
4.用途:
应用场景:需要在视图更新之后,基于新的视图进行操作。
### created、mounted
需要注意的是,在 created 和 mounted 阶段,如果需要操作渲染后的试
图，也要使用 nextTick 方法。

官方文档说明：
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到
整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

mounted: function () {
  this.$nextTick(function () {
    // 你要执行的操作
  })
}

8.以上的内容,就是我对vue.nextTick的初步总结。
9.本期的教程到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰!

echarts饼图赋值后台数据颜色值不对

1.开发环境 vue+echarts
2.电脑系统 windows10专业版
3.在使用echarts+vue开发的过程中,我们在绘制饼图的时候,需要自定义颜色,在这里我做一个分享和踩坑!
4.效果图如下:

注意:此处饼图的颜色值,是来自后台,那么这个效果如何实现行呢?会遇到什么问题呢?

5.实现这个效果,我们假数据的代码为:

let bingArrpro= [
              {
                value: 335,
                name: "直达",
                itemStyle: { color: "#000" },
              },
              {
                value: 310,
                name: "邮件营销",
                itemStyle: { color: "#ffff00" },
              },
            ]
   //注意: itemStyle的大小写

6.效果如如下:

由此:我们可以得出结论,此配置生效

7.但是我们赋值为后台的数据之后发现,颜色值不对,现在打印后台返回的数据,如下图:

//刚开始你觉得没有问题,返回的数据格式都对,然后你开始找自己原因,但是
细心的小伙帮会发现,后台返回的
是:itemstyle ,这个是不对的,我们需要的是 itemStyle ,
注意是:itemStyle ,注意大小写。

8.本期的教程到了这里就结束啦,是不是很nice,希望对你有所帮助,既然选择了这个领域就不要低头,不要认输,让我们一起努力走向巅峰!

echarts绘制彩虹图

1.开发环境 vue+echarts
2.电脑系统 windows10专业版
3.在使用echarts开发的过程中,我们可能需要绘制彩虹图,下面是我进行的总结,希望对你有所帮助!
4.效果图如下:

这个效果是不是还可以,让我们了看看是如何用代码实现的。

5.在methods中添加如下代码:

//注意:进行了封装
tt(max, min, mai, mi) {
      console.log(max, min, mai, mi);
      this.Chenoption = {
        backgroundColor: "rgba(128, 128, 128, 1)",
        title: {
          text: "线路故障发生概率预测",
          left: "50%",
          top: "5%",
          botom: "5%",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          // orient: 'vertical',
          show: false,
          left: "rigth",
          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
        },
        grid: {
          top: "14%",
          left: "3%",
          right: "1%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          show: false,
          data: ["", "", "", "", "", "", "", "", "", "", "", "", ""],
        },
        yAxis: {
          type: "value",
          boundaryGap: false,
          min: min,
          max: max,
          interval: mai,
        },
        series: [
          {
            name: "",
            type: "line",
            data: [120, 132, 101, 134, 90, 230, 210, 36],
            showSymbol: true,
            symbol: "circle", //设定为实心点
            symbolSize: 10,
            color: "#000",
            lineStyle: {
              normal: {
                width: 2,
                color: "#000",
              },
            },
          },
          {
            name: "",
            type: "line",
            animation: false,
            hoverAnimation: false,
            markArea: {
              data: [
                [
                  {
                    yAxis: min,
                    itemStyle: {
                      color: "#FF0000",
                    },
                  },
                  {
                    yAxis: mi + min,
                  },
                ],
              ],
            },
          },
          {
            name: "",
            type: "line",
            animation: false,
            hoverAnimation: false,
            markArea: {
              data: [
                [
                  {
                    yAxis: mi + min,
                    itemStyle: {
                      color: "#FFFF00",
                    },
                  },
                  {
                    yAxis: mi + min + mi * 2,
                  },
                ],
              ],
            },
          },
          {
            name: "",
            type: "line",
            animation: false,
            hoverAnimation: false,
            markArea: {
              data: [
                [
                  {
                    yAxis: mi + min + mi * 2,
                    itemStyle: {
                      color: "#00B050",
                    },
                  },
                  {
                    yAxis: mi + min + mi * 6,
                  },
                ],
              ],
            },
          },
          {
            name: "",
            type: "line",
            animation: false,
            hoverAnimation: false,
            markArea: {
              data: [
                [
                  {
                    yAxis: mi + min + mi * 6,
                    itemStyle: {
                      color: "#FFFF00",
                    },
                  },
                  {
                    yAxis: mi + min + mi * 8,
                  },
                ],
              ],
            },
          },
          {
            name: "",
            type: "line",
            animation: false,
            hoverAnimation: false,
            markArea: {
              data: [
                [
                  {
                    yAxis: mi + min + mi * 8,
                    itemStyle: {
                      color: "#FF0000",
                    },
                  },
                  {
                    yAxis: mi + min + mi * 10,
                  },
                ],
              ],
            },
          },
          {
            name: "",
            type: "line",
            smooth: "true",
            symbol: "circle", //设置拐点
            symbolSize: 100, //设置拐点的大小
            itemStyle: {
              //拐点的属性
              color: "#6633cc",
            },
            lineStyle: {
              color: "#6633cc",
              width: 5,
            },
          },
        ],
      };
      // console.log(this.Chenoption.yAxis.min);
      // this.Chenoption.yAxis.interval=(this.Chenoption.yAxis.min+this.Chenoption.yAxis.max)/2;
      this.drawChart("myChart", this.Chenoption);
    },

5.在methods中tt方法的同级添加如下代码:

drawChart(drawChartId, Chenoption) {
      this.myChart = echarts.init(document.getElementById(drawChartId));
      let option = Chenoption;
      // 指定图表的配置项和数据
      this.myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },

6.在mounted中添加如下代码:

mounted() {
    var max = 300; //根据项目需求进行更改
    var min = -30;
    var mai = (min + max) / 2 - min;
    var mi = (max - min) / 10;
    console.log(mai);
    this.tt(max, min, mai, mi);
  },

7.在template中添加如下代码:

<div id="myChart" style="width: 90%; height: 600px"></div>

8.整体代码如下:

<template>
  <div>
    <h2>我是echarts彩虹图</h2>
    <div id="myChart" style="width: 90%; height: 600px"></div>
  </div>
</template>
<style scoped>
</style>
<script>
import echarts from "echarts";
export default {
  name: "ech",
  data() {
    return {};
  },
  mounted() {
    var max = 300;
    var min = -30;
    var mai = (min + max) / 2 - min;
    var mi = (max - min) / 10;
    console.log(mai);
    this.tt(max, min, mai, mi);
  },
  methods: {
    //   对echarts 方法的封装
    drawChart(drawChartId, Chenoption) {
      this.myChart = echarts.init(document.getElementById(drawChartId));
      let option = Chenoption;
      // 指定图表的配置项和数据
      this.myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
    tt(max, min, mai, mi) {
      console.log(max, min, mai, mi);
      this.Chenoption = {
        backgroundColor: "rgba(128, 128, 128, 1)",
        title: {
          text: "线路故障发生概率预测",
          left: "50%",
          top: "5%",
          botom: "5%",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          // orient: 'vertical',
          show: false,
          left: "rigth",
          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
        },
        grid: {
          top: "14%",
          left: "3%",
          right: "1%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          show: false,
          data: ["", "", "", "", "", "", "", "", "", "", "", "", ""],
        },
        yAxis: {
          type: "value",
          boundaryGap: false,
          min: min,
          max: max,
          interval: mai,
        },
        series: [
          {
            name: "",
            type: "line",
            data: [120, 132, 101, 134, 90, 230, 210, 36],
            showSymbol: true,
            symbol: "circle", //设定为实心点
            symbolSize: 10,
            color: "#000",
            lineStyle: {
              normal: {
                width: 2,
                color: "#000",
              },
            },
          },
          {
            name: "",
            type: "line",
            animation: false,
            hoverAnimation: false,
            markArea: {
              data: [
                [
                  {
                    yAxis: min,
                    itemStyle: {
                      color: "#FF0000",
                    },
                  },
                  {
                    yAxis: mi + min,
                  },
                ],
              ],
            },
          },
          {
            name: "",
            type: "line",
            animation: false,
            hoverAnimation: false,
            markArea: {
              data: [
                [
                  {
                    yAxis: mi + min,
                    itemStyle: {
                      color: "#FFFF00",
                    },
                  },
                  {
                    yAxis: mi + min + mi * 2,
                  },
                ],
              ],
            },
          },
          {
            name: "",
            type: "line",
            animation: false,
            hoverAnimation: false,
            markArea: {
              data: [
                [
                  {
                    yAxis: mi + min + mi * 2,
                    itemStyle: {
                      color: "#00B050",
                    },
                  },
                  {
                    yAxis: mi + min + mi * 6,
                  },
                ],
              ],
            },
          },
          {
            name: "",
            type: "line",
            animation: false,
            hoverAnimation: false,
            markArea: {
              data: [
                [
                  {
                    yAxis: mi + min + mi * 6,
                    itemStyle: {
                      color: "#FFFF00",
                    },
                  },
                  {
                    yAxis: mi + min + mi * 8,
                  },
                ],
              ],
            },
          },
          {
            name: "",
            type: "line",
            animation: false,
            hoverAnimation: false,
            markArea: {
              data: [
                [
                  {
                    yAxis: mi + min + mi * 8,
                    itemStyle: {
                      color: "#FF0000",
                    },
                  },
                  {
                    yAxis: mi + min + mi * 10,
                  },
                ],
              ],
            },
          },
          {
            name: "",
            type: "line",
            smooth: "true",
            symbol: "circle", //设置拐点
            symbolSize: 100, //设置拐点的大小
            itemStyle: {
              //拐点的属性
              color: "#6633cc",
            },
            lineStyle: {
              color: "#6633cc",
              width: 5,
            },
          },
        ],
      };
      // console.log(this.Chenoption.yAxis.min);
      // this.Chenoption.yAxis.interval=(this.Chenoption.yAxis.min+this.Chenoption.yAxis.max)/2;
      this.drawChart("myChart", this.Chenoption);
    },
  },
};
</script>

9.本期的教程到了这里就结束啦,希望对你有所帮助,是不是很nice,既然我们选择了这个领域,要相信自己是最棒的,让我们一起努力走向巅峰!

vue+iview去掉滚动条

1.开发环境 vue+iview
2.电脑系统 windows10专业版
3.在使用 vue+iview开发的过程中,我们经常使用滚动条,但是默认的滚动条样式很难看,在这里我们可以重新设置滚动条的样式或者是去掉滚动条的样式!
4.在代码中添加如下代码:

::-webkit-scrollbar {
  width: 4px;
  /* background-color:none !important; */  //去掉滚动条
  background-color:red !important;    //配置滚动条颜色,颜色可以自己定义
}

5.效果图如下:

6.去掉滚动条之后的效果:

//虽然去掉了滚动条,但是不会影响滚动的效果!
7.注意:在去掉样式之前看一下,style标签上面是否添加了 scoped,如下添加了要去掉不然样式不会生效!
8.本期的教程到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰!

echarts配置折线图的点和线条的颜色

1.开发环境 vue+echarts
2.电脑系统 windows10专业版
3.在使用vue+echarts开发的过程中,我们会经常使用折线图,可能根据需求我们需要使用配置折线图的点和颜色,下面是我总结的方法,希望对你有所帮助!
4.效果图入如下:

5配置代码如下:

series: [
        {
            showSymbol: true, 
            symbol: 'circle',  //设定为实心点 
            symbolSize: 20,   //设定实心点的大小 
            color:"#000",     //设定实线点的颜色
            lineStyle: {
              normal: {
                width: 2,
                color:"#0000ff", //设置实线的颜色
              },
            },
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            showSymbol: true, 
            symbol: 'circle',     //设定为实心点 
            symbolSize: 20,       //设定实心点的大小 
            color:"#000",         //设定实线点的颜色
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            showSymbol: true, 
            symbol: 'circle',     //设定为实心点 
            symbolSize: 20,   //设定实心点的大小 
            color:"#000",
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
    ]

6.本期的教程到了这里就结束啦,是不是很nice,希望对你有帮助,让我们一起努力走向巅峰!

react使用stat总结

1.开发环境 react.js
2.电脑系统 windows10专业版
3.在使用React开发的过程中,我们要使用state,相当于vue中的data,下面我来分享一下 state的使用和总结,如果总结的不好请勿喷,希望对你有所帮助!
4.在 constructor中添加如下代码:

this.state = {
            resObj:null,
        }

5.在 reder(){}同级 定义一个函数:

 // 页面已加载 就请求数据
    chenget() {
        console.log("我是state的数据");
        console.log(store.getState());
        console.log("我是state的数据结束啦");
        chenecharts().then((res) => {
            chenres = res;
            this.getres(res);  //通过函数传参的方式
            console.log(res);
        })
        return re;
    }

6.定义存储 函数:

getres(chenrespro){
        console.log(chenrespro);
        this.setState({resObj:chenrespro},()=>{
            console.log(this.state.resObj);
        })
    }

--效果如下:

7.整体代码代码如下:

import React from "react";
import axios from 'axios'
import { chenecharts } from '@/api/home'
let chenres = undefined;
export default class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            xiaoxi: "会太累",
            chneresObj: undefined,
            resObj:null,
        }

        // 这个bind方法是必须的，以确保`this`可以在回调函数handleClick中使用
        this.chenget = this.chenget.bind(this);
    }

    render() {
        //用一个变量,接受
        const ChenHome =
            <div>
                <p> 我是home </p>
                <p> 我要坏加 </p>
                <a href="#/about" > 去about </a>
                <p>会哦加</p>
            </div>
        //结束啦
        return (ChenHome
        )
            ;
    }

    // 页面已加载 就请求数据
    chenget() {
        console.log("我是state的数据");
        console.log(store.getState());
        console.log("我是state的数据结束啦");
        let re = 123;
        chenecharts().then((res) => {
            chenres = res;
            this.getres(res);
            console.log(res);
            re = res;
            this.setState({ chneresObj: res }, () => {
                console.log(this.state.chneresObj);
                //注意:如果不加这个回调函数是看不到 修改的结果
            })
        })
        return re;
    }
    getres(chenrespro){
        // console.log(chenrespro);
        this.setState({resObj:chenrespro},()=>{
            console.log("+++++++++++");
            console.log(this.state.resObj);
            console.log("------------");
        })
    }

    componentWillMount() {
    }

    componentDidMount() {
        // 页面已加载 就请求数据
        this.chenget();

        let chnere = this.chenget();
        console.log(chnere);
    }
}

8.getres() 函数的作用就是存储后台的数据,哪里需要在哪里调用。
9.本期的教程到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰!

vue使用vuex

1.开发环境 vue
2.电脑系统 windows10专业版
3.在使用vue开发的过程中,我们经常会使用到vuex状态管理,为什么要使用vuex呢?

在一个项目开发中频繁的使用组件传参的方式来同步`data`中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。vuex解决了组件组件的复杂传值`

4.如果你使用vuecli创建项目的话,在创建项目的时候,可直接安装,如下图:

5.安装完vuex,在项目中怎么使用呢?方法如下:
在store.js中添加如下代码:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    name: '小陈壮士',
  },
  mutations: {
    change(state, a ) {
      state.name = a;
      //解释说明 a 是 传过来的参数
    },
  },
});

6.在 vue模板中添加如下代码：

let Dthis=this;
let a= 999;
Dthis.$store.commit("change", a);
console.log(Dthis.$store.state.name);  //999

7.注意:

小伙伴们注意啦:
修改 state 方法,还有一个 但是不推荐这种写法,虽然可以实现,但是在vue中是不被允许的,方法如下:
this.$store.state.name="1000";
console.log(this.$store.state.name);  //1000
//注意:不要使用这种方法,虽然可以实现

8.本期的教程到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰!

react使用redux使用pro

1.开发环境 react+redux
2.电脑系统 windows10专业版
3.在使用react开发的过程中,我根据项目的项目可能会使用到状态管理工具,在这里我选择的是 redux,下面我分享一下在react怎么十一redux!
4.在src目录下面新建 action/reducer/Stroe 文件夹,结构如下:

5.action/index代码如下:

/*
我是一个action的对象
*/

const sendAction=(aa)=>{
    return{
        type:"send_action",
        chen:aa
    }
}

module.exports={
    sendAction
}

6.reducer/index代码如下:

/*
这个文件是创建 reducer 函数的,专门处理 发送过来的 action
*/

const initState = {
    chen: '默认值'
}

const reducer = (state = initState, action) => {
    console.log("resucer:",state,action);
    switch (action.type) {
        case "send_type":
            return Object.assign({}, state, action);
        default:
            return state;
    }
}

module.exports = {
    reducer
}

7.Store/index代码如下:

import { createStore } from "redux";
import {reducer} from '../reducer/index'
const store=createStore(reducer);
export default store;

8.在react模板中添加如下代码:

import React from "react";
import store from '../Store';
import {sendAction} from '@/action'
export default class Home extends React.Component {
    constructor(props) {
        super(props);
        
        // 这个bind方法是必须的，以确保`this`可以在回调函数handleClick中使用
    this.chenget = this.chenget.bind(this);
    }
    // 页面已加载 就请求数据
    chenget(){
        console.log("我是state的数据");
        console.log(store.getState());
        console.log("我是state的数据结束啦");
    }
    componentDidMount(){
    }

    dian =()=>{
        const aa=100;
        const action= sendAction(aa);
        store.dispatch(action);
        //在这里我们看到了,我们在 redux 中定义的chen变量的值被修改了
    }

    render() {
        //用一个变量,接受
        const ChenHome =
            <div>
                <p> 我是home </p>
                <p> 我要坏加 </p>
                <a href="#/about" > 去about </a>
                <p onClick={this.dian}>会哦加</p>
            </div>
        //结束啦
        return (ChenHome
        )
            ;
    }
}

9.效果如图:

//根据图,我们可以得知,在reducer/index中定义的chen变量被修改啦
10.本期的教程到了这里就结束啦,是不是很nice,让我们一起努力走向巅峰!