Vue易错总结

Vue易错总结

echarts下载

cnpm install echarts@4.8.0 echarts-gl@1.1.0 --save

npm install echarts-wordcloud

引入

import * as echarts from 'echarts'
import 'echarts-wordcloud';
Vue.prototype.$echarts=echarts

vue-video-player

新版要这样引入

import { videoPlayer } from "vue-video-player/src";
import "videojs-flash";
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')

data的return里面的data不能调用data和methods里面的数！！！

在页面里使用，一定要放到mounted函数里

<template>
    <div>
         <div id="main1" style="width: 600px;height:400px;"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {}
    },
    mounted() {
    // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("main1"))
		// 指定图表的配置项和数据
        myChart.setOption({
            title: {
                text: '联系',
            },
            tooltip: {},
            xAxis: {
                data: ['一', '二', '三', '四', '五', '六']
            },
            yAxis: {},
            series: [{
                name: '人数',
                type: 'bar',
                data: [45, 46, 56, 34, 47, 48]
            }]
        })
    },
}

</script>

给图片设置背景的时候要用

background: url(../assets/index_background.PNG) no-repeat;
background-size:100% 100%;

background-image没有效果

css设置布局要善用display！！！

引入json数据

json数据放到asset里面

import shandong from "../assets/map/province/shandong.json" 
import test_data from "../assets/Sheng/item_data/test_data.json"

test_data.maleDeta

可以访问到json数据里面的元素，相当于一个对象了

对于地图：

这句话写在mounted里面！地图option可以写到data里面

this.$echarts.registerMap('山东', shandong)

echarts-wordcloud

配置总结

配置总结2

使用maskImage

python读取图片并转换成base64格式

import requests
from lxml import etree
import json
import random
import base64

from sympy import im
res = {
    'value': [],
    'image': ''
}
word_list = [
    '国务院',
    '综合政务',
    '国民经济',
    '财政金融',
    '资源能源',
    '农林水',
    
]

for w in word_list:
    cur={
        'name':w,
        'value':random.randint(12,30)            
    }
    res['value'].append(cur)

img_src=""
with open('data\deal_web_data\circle_background.png','rb') as img:
    img_src=base64.b64encode(img.read())
img_src=img_src.decode('utf-8')
# 从这里开始，才得到base64编码的字符串
res['image']="data:image/png;base64,"+img_src
# 这样使用
with open('data\deal_web_data\word_cloud.json', 'w', encoding='utf-8') as f:
    f.write(json.dumps(res, ensure_ascii=False))

async await

讲解

配合axios

npm install regenerator-runtime

数据传递

父向子传递数据并监听变化

this

数据转换（JavaScript下 int 转 string）

this

传参组件

this.$router.push({
    name:'five',
    query:{
        my:{
            id:200,
            name:'ziqi',
            size:2099
        }                                 
    }
})

注意这里的name指的是，要跳转到的组件的，在router.index.js下的名字，也就是路由下的组件名字

接受参数组件

this.$route.query

这样数据不随着刷新而消失

v-bind在style里面的应用

<div
              :style="{
                margin: '1.8333rem 0 0 0.6667rem',
                height: '14.4833rem',
                width: '6.8333rem',
                background: 'url(' + item.url + ') no-repeat',
                'background-size': '100% 100%',
              }"
            ></div>

class里面

<div class="list_item" :class="{ as_first: i == 0 }">

引用数据

<div class="item_rank">{{ item.rank }}</div>

地理数据获取

这里