Echarts 篇
根底
所有图都是一个 dom，一个 options 的写法，次要的 options 的配置，太多了
html 局部
<div
:id="config.id"
style="width:100%;height: 100%">
</div>
js 局部
import echarts from 'echarts'
import 'echarts-wordcloud' // 词云图，独自引入
Vue.prototype.$echarts = echarts
const myChart = this.$echarts.init(document.getElementById(this.config.id))
myChart.setOption(this.config.option)词云图
词云图是要另外装置依赖的，echarts 外面并没有蕴含这个性能
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.15.2",
"echarts": "^4.9.0", // 本地
"echarts-wordcloud": "^1.1.3",// 就是这个
"element-ui": "^2.4.5",
"html2canvas": "^1.0.0-rc.7",
"vue": "^2.6.14",
"vue-router": "^3.5.2",
"vuex": "^3.6.2",
"xlsx": "^0.16.5"
},配置
// 声量情感散布 - 提及内容词云
wordOption: {
id: 'wordOption',
option: {
series: [
{
// 词的类型
type: 'wordCloud',
// 设置字符大小范畴，那种字太多的有可能因为最小值太小不显示，能够设大一点
sizeRange: [16, 58],
// 每个字的歪斜角度
rotationRange: [-45, 90],
textStyle: {
normal: {
// 生成随机的字体色彩
color: function () {
return 'rgb(' + [Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')'
}
}
},
// 不要遗记调用数据
data: [
{
'name': '花鸟市场',
'value': 1446
},
{
'name': '汽车',
'value': 928
},
{
'name': '视频',
'value': 906
},
{
'name': '电视',
'value': 825
},
{
'name': '动漫',
'value': 486
}
]
}
]
}
},
柱状图
配置
// 声量情感散布
volEmotionOption: {
id: 'volEmotionOption',
option: {color: ['#32B0F2', '#006699', '#4cabce'], // 这个是色彩
xAxis: {
type: 'category',
data: []},
yAxis: [
{
name: '声量',
type: 'value'
},
{
name: '占比',
type: 'value',
min: 0,
max: 100,
axisLabel: {formatter: '{value} %'
}
}
],
legend: {
bottom: '5%',
data: ['总体', '侧面', '负面']
},
series: [
{
name: '总体',
type: 'bar',
data: [100]
},
{
name: '侧面',
type: 'bar',
data: [200]
},
{
name: '负面',
type: 'bar',
data: [300]
}
]
}
},柱状图的 xAxis 和 series，legend 的关系有点奇怪,emmm，我笔记懒的具体些了，我就大略说一下
xAxis.data，比方有 3 个，[1,2,3]；
series 的每一项的 data 也必须有 3 值，对应每个柱子的内容，留神不是 series 的个数，是 series 每一项的 data 这个个数；
series: [
{
name: '总体',
type: 'bar',
data: [100,200,300] // 是这个
},legend 是图上面的图例，能够点击让柱子隐没，然而它的 data 的值是对应 series 每一项的值的 name，如果 series 的每一项没 name，你怎么配置 legend 都没用
饼图
配置
officialVol: {
id: 'officialVol',
option: {color: ['rgb(114, 143, 223)', 'rgb(106, 203, 148)'],
tooltip: {trigger: 'item'},
legend: {bottom: '5%'},
series: [
{
name: '占比',
type: 'pie',
radius: '50%',
data: [{ value: 1048, name: 'PGC'},
{value: 735, name: 'UGC'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
},漏斗图
配置
// 声量转化剖析
volConversion: {
id: 'volConversion',
option: {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
name: '占比',
type: 'funnel',
top: 60,
width: '60%', // 大小
left: '20%', // 跟下面奏够 100，就是左右居中
bottom: 60,
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
label: {position: 'right'},
data: [{ value: 60, name: '拜访'},
{value: 40, name: '征询'},
{value: 20, name: '订单'},
{value: 80, name: '点击'}
]
}
]
}
},柱状图 - 沉积
配置
brandInfluence: {
id: 'brandInfluence',
option: {color: ['#32B0F2', '#006699', '#4cabce'],
xAxis: {
type: 'category',
data: ['流动前', '流动中', '流动后']
},
yAxis: [
{
name: '声量',
type: 'value'
}
],
legend: {
bottom: '0%',
data: ['平安的', '奥运的', '奥运的 2', '奥运的 3', '奥运的 4']
},
series: [
{
name: '平安的',
type: 'bar',
barWidth: 40,
stack: 'default', // 轻易设置一样字符串
data: [100, 99, 88]
},
{
name: '奥运的',
type: 'bar',
barWidth: 40,
stack: 'default',// 必须一样，data: [100, 99, 88]
},
{
name: '奥运的 2',
type: 'bar',
barWidth: 40,
stack: 'default',
data: [100, 99, 88]
},
{
name: '奥运的 3',
type: 'bar',
barWidth: 40,
stack: 'default',
data: [100, 99, 88]
},
{
name: '奥运的 4',
type: 'bar',
barWidth: 40,
stack: 'default',
data: [100, 99, 88]
}
]
}
}折线图
配置
// 流动声量变化趋势
activityVolLine: {
id: 'activityVolLine',
option: {color: ['#32B0F2', '#006699', '#4cabce'],
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: [
{
name: '声量',
type: 'value'
}
],
legend: {
bottom: '5%',
data: ['Q3 营销声量', 'Q3 整合营销 & 品牌声量']
},
series: [
{
name: 'Q3 营销声量',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Q3 整合营销 & 品牌声量',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
}
},散点图，气泡图
配置
option = {
xAxis: {
name: '真粉数', // 依据你的数据主动生成 x 轴值
splitLine: {show: false} // 显示格子线
},
yAxis: {name: '美誉度 (%)',// 依据你的数据主动生成 y 轴值
splitLine: {show: false} // 显示格子线
},
series: [
{
name: '彭于晏',
data: [['1555',80] // 二维数组, 两个值够了
],
type: 'scatter',
symbolSize: 40, // 管制气泡大小
label: {
normal: {
show: true,
formatter: function (param) {return '彭于晏'},
position: 'top'
}
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffsetY: 5,
color: 'red'
}
}
},
{
name: '陈小春',
data: [['1355',60] // 二维数组, 两个值够了
],
type: 'scatter',
symbolSize: 10, // 管制气泡大小
label: {
normal: {
show: true,
formatter: function (param) {return '陈小春'},
position: 'top'
}
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffsetY: 5,
color: 'red'
}
}
}
]
};Echarts 罕用配置补充
太多太多太多了，没方法，用到就记一下
(1) 数据视图
toolbox: {
show: true,
feature: {
dataView: {
show: true,
title: '名字', // 这个是鼠标悬浮下来的文案
readOnly: true,
lang: ['',' 敞开 ',' '] // 这个才是关上后的文案
}
}
},(2) 缩放
如果图表的数据太多什么的, 全副都挤在一起显示，能够加这个
dataZoom:{
show: true,
height: 52, // 高度
bottom: '0', // 地位，默认在底部
start: 0, // 不分明
end: 50, // 不分明
fillerColor: 'red', // 背景色
handleColor: 'skyblue' // 左右两边的小块
}
(3) 图例缩放
下面那个是表的缩放，如果是图例的，legend 那个，能够加个
legend:{type: 'scroll'}
(4) tooltip 配置
鼠标悬浮下面的显示，formatter 是自定义
tooltip: {
trigger: 'axis', // 触发范畴，个别写这个，不要写 item，item 的话触发面积太小，要点到线或者柱子才行
axisPointer: {type: 'shadow' // 这个是暗影，hover 成果默认是一根线，加这个就变成暗影},
formatter: function (params) { //params 这个有你须要显示的参数
return 'lalala'
}
},
(5) x,y 轴配置
yAxis: {
name: '声量',
type: 'value',
axisLabel: {formatter: '{value} %' // 如何显示
},
axisLine: { // y 轴的连线
show: true, // 是否要连起来
lineStyle: {color: 'red'}
},
axisTick: { // 刻度，突出来的
show: true
},
splitLine: { // 距离线
lineStyle: {
// 距离色
color: ['skyblue']
}
}
}
(6) 如何在 series 加多点参数
需要是这样 tooltip 要显示一些额定的参数，如果能间接在 format 参数外面拿到就不必额定解决，留神
data 外面的子项肯定是对象能力这样做，如果是[100], 是不行的
series: [
{
name: '总体',
type: 'bar',
data: [ // 这个 data 肯定是这个格局
{
value: 100,
temtemtem: '自定义参数'
}
]
},
]
// 下面你这样写了之后，你就能够
tooltip: {
trigger: 'item',
formatter: function (params) {return '声量值:' + params.data.temtemtem}
},(7) setoptions 第二个参数问题
至多我这边是有遇过，当图表数据从少到多的时候，失常变动，然而，如果是从多变少，比方少一个数据，图表就不失常了，还是变少之前的样子
起因是在第二个参数，设置成 true 就能够，默认是 false
this.myChart.setOption(copyconfig.option, true)(8) 柱状图柱子间隙
这个应该比拟少用到，不过还是记一下, 情景我很难解释，大略是 legend 和 series 不能同时满足的时候，你必须清掉 xais 的 data 值让它能够失常显示，然而会挤在一起
barGap, 每一个都要设置，而且是一样的值才失效
xAxis: {data: []
},
legend: {
bottom: '5%',
data: ['总体','侧面','负面']
},
series: [
{
name: '总体',
type: 'bar',
barGap: '100%',
data: [
{value: 100}
]
},
{
name: '侧面',
type: 'bar',
barGap: '100%',
data: [
{value: 200}
]
},
{
name: '负面',
type: 'bar',
barGap: '100%',
data: [
{value: 300}
]
},
]
(9) 双 y 轴
个别双 y 轴，左边的要有另外一组 series 数据，个别是柱状图配折线图我遇到的比拟多
用 yAxisIndex 定位 y 轴
yAxis: [
{
name: "互动量",
type: "value",
axisLine: {
lineStyle: {color: "#A9A9A9",},
},
splitLine: {
lineStyle: {
// 距离色
color: ["#F5F5F5"],
},
},
},
{
name: "贡献度（%）",
type: "value",
min: 0,
max: 100,
axisLabel: {formatter: "{value} %",
},
axisLine: {
lineStyle: {color: "#A9A9A9",},
},
splitLine: {show: false,},
},
],
series: [
{
name: "互动量",
type: "bar",
barWidth: 40,
data: [],},
{
name: "贡献度",
data: [],
type: "line",
yAxisIndex: 1, // 用这个定位
},
],
(10) 饼图为 0 暗藏显示
这种做法个别有两种，一种就是常见的过滤数据，我上面这种是不过滤的，通过管制 label 和 labelLine
然而通过测试发现，label 的 show 关了后，labelLine 也会关，不过保险起见，两个都写
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{
value: 0, // 不必过滤，0 就 0
name: 'Search Engine',
label:{
show: 0? true:false, // 通过管制 show
color: 'skyblue'
},
labelLine:{
show: 0? true:false, // 同上
length: 30,
lineStyle:{color: 'red'}
}
}]
}],(11) 图表的 resize 设置
个别窗口变动的时候，你按 F12 拖动窗口，这个时候如果图表没有设置这个 resize，图表会飘
window 监听 resize 事件，最初一个参数示意要捕捉 true 还是冒泡 false
我原本认为设置同个 resize 会笼罩掉后面那个，其实不会
mounted(){window.addEventListener('resize', this._resizeEventHandler, false)
}
methods:{_resizeEventHandler() {
// 这里加多个判断，容错
if (this.myChart) {
// 这个节流，我是比拟偏向用防抖，这个是我拷贝其余我的项目的做法
// 外围，this.myChart.resize(), 实例自带的办法，调用一下就行
this.$common.throttle(this.myChart.resize(), 300)
}
},
}
beforeDestroy() {if (this.myChart) {this.myChart.dispose() // 图表实例销毁
}
window.removeEventListener('resize', this._resizeEventHandler, false) // 事件移除
}
element 篇
表格固定第一行
官网的例子是固定最初一行，如何把这一行放到第一行显示呢
.hotList /deep/ .el-table {
display: flex;
flex-direction: column;
}
.hotList /deep/ .el-table__body-wrapper {order: 1;}表格设置自适应
设置 width 为 auto, 你也能够给某一列，比方第一列设死宽度，
<el-table :data="top10Article.tableData" border>
<el-table-column
align="center"
show-overflow-tooltip
label-class-name="el-th"
v-for="item in top10Article.colum"
:key="item.prop"
:prop="item.prop"
:width="item.width" // 这个配置
:label="item.label"
/>
</el-table>
var TableWidth = "auto";
if (item === "帖子") {TableWidth = "740";}
colum.push({
label: item,
width: TableWidth,
prop: item,
});Vue 篇
vue 指令
我写了一个简略的图片替换的，就是如果 src 空或者加载失败，就替换默认图
因为指令只能传一个参数，其余参数我不晓得怎么传，所以就用了 data- 这样传
应用
<img :src="item.pic" v-imgload="item.pic" data-imgloadfix='1'>
代码
let imgError = require('@/images/emptyImage.png')
// 局部图片替换须要一些额定的操作
function imgFixHandle(type,el){if(type == 1){
el.style = 'width:60px;';
el.parentNode.style = 'background:#eee;text-align:center;'
}
}
export default {bind(el, binding) {
let imgUrl = binding.value
let imgFix = el.getAttribute('data-imgloadfix')
// let imgUrl = 'https://cxp-test.yili.com/resources/images/logo-default@2x.png'
if(!imgUrl){el.setAttribute('src',imgError)
// 额定操作
setTimeout(() => {imgFixHandle(imgFix,el)
},0)
return
}
let img = new Image()
img.onload = function(){el.setAttribute('src',imgUrl)
img = null
}
img.onerror = function(){el.setAttribute('src',imgError)
// 额定操作
imgFixHandle(imgFix,el)
img = null
}
img.src = imgUrl
}
}我就用了一个钩子，其余没用到，只能百度先写下来
钩子 + 参数
bind(el,binding,vnode,oldVnode)：首次绑定执行一次，负责初始化
inserted: 被绑定元素插入父节点时候调用，仅保障父节点存在，不肯定已被插入文档
update: 组件 VNode 更新时，可能在其子 VNode 更新前
componentUpdated: 组件 VNode 及其子 VNode 都更新后调用
unbind: 解绑时调用
el：绑定的元素
binding: 绑定对象，蕴含参数值，value 和 oldValue
vnode: 以后虚构节点
oldVnode: 上一个虚构节点，仅在 update 和 componentUpdate 钩子可用区别
bind 和 inserted
共同点：dom 插入都会调用，bind 在 inserted 之前
不同点：bind 时父节点为 null
inserted 时父节点存在。bind 是在 dom 树绘制前调用，inserted 在 dom 树绘制后调用
bind: function (el) {console.log(el.parentNode) // null
console.log('bind')
},
inserted: function (el) {console.log(el.parentNode) // <div class="directive-box">...</div>
console.log('inserted')
}
update 和 componentUpdated
跟 vue 组件的 up，bup 差不多
update(el, binding,vnode,oldVnode){console.log(el.innerHTML); // <div>！</div>
}
componentUpdated(el, binding,vnode,oldVnode){console.log(el.innerHTML); // //<div>！！</div>
}proxytable 的粗浅意识
这个到我的文章，跨域那个看
v-modal 用法
这个是语法糖，有两局部，个别能够这样联想，v-model 是双向绑定，个别演示的时候都是用 input 的，input 的 value 值就是以后值，而后输出的时候，就是监听了 @input 办法，所以
<input type="text" v-model="text">
等同于
<input type="text" :value="text" @input="function(e){text = e.value}">很多第三方 UI 库用 v -modal 都有用来作显示暗藏, 就是外层传一个 boolean，组件外面不必 emit 进去，让组件本人改这个值，大略这样
// 传一个 temFlag
<PartOne :filterParam="filterParam" v-model="temFlag"/>
// 组件
<div v-if="value"> 测试 v -</div>
// 抛出 input 事件，也是固定死的
<div @click="() => {this.$emit('input',false)}"> 敞开、关上 </div>
<div @click="() => {this.$emit('input',true)}"> 敞开、关上 </div>
props: {
value: { // 肯定叫这个名字，固定死的
type: Boolean,
default: true
},
filterParam: {
type: Object,
default: () => {}
}
},vue 打包的 assetsPublicPath 属性
这个属性是针对资源，也就是 css，img，js 这些资源的引入门路写法，
并且要跟，这个 dist 文件夹，在服务器目录的层级，保持一致，
比方 dist 文件扔在根目录，拜访 xxx.com/index.html
那么 assetsPublicPath 是 / 或者 ./ 都行 ,
如果放了几层目录，xxx.com/ra/ba/cd/index.html, 则这个属性就要变了，要一样
assetsPublicPath: ‘/ra/ba/cd/’
vue 数组用索引批改字符串，数组不失效
这个以前真没留神，数组用索引改是不失效的, 视图不会更新，看了一下如同是数组无奈用 object.defineproperty 劫持 set，get 办法
tem = [1,2,3]
this.tem[1] = 5 // 视图不会更新vue 组件 style 的关系
style 加了 scoped 属性，会在所有 dom 下面加标识，比方，
data-v-101b773d 这个就是标识
<div data-v-101b773d=""> 数据哦 </div>而后所有的款式也都是默认加这个
尽管写是这样写，.tem {color:skyblue}
然而编译后，浏览器看到的是这样
.tem[data-v-101b773d] {color:skyblue}这就是为什么加了这个属性后，不会影响到这个组件外面套入的其余组件，因为其余组件的 dom 没有 data-v-101b773d 这个属性，就算其余组件也加了 scoped，它的 data-v-xxxxxx 也是不同的
而后，持续说一下，组件的 style 是怎么加载的
每个组件的 style 都是按需下载，并且是会插入 html 的 header 标签，不过有点不同，我发现 dev 的时候，是 style 模式插入，而 build 后，是 link 标签下载
我为什么说这个呢
因为我发现如果某个组件的 style 不加 scoped，而后加载的时候，header 标签插入，而后你其余组件的款式，就被它影响了！！
怎么防止
一般来说，不加 scoped 是为了让整个组件的款式都影响外部组件，或者是改 UI 库，比方 elm 的，
-
要么你就在类后面加个父类
.fu .target {} -
要么就不要去掉 scoped，用 /deep/，这个 /deep/ 编译后的原理其实是吧 data- v 放在最开始的类，前面的不会有
.fu /deep/ .target {} // 编译后 .fu[daa-v-xxxxx] .target {}
vue-cli3 打包去掉 consol
这个配置不必额定 install 依赖，自身你用脚手架 3 构建的 vue 我的项目曾经内置了
把这个插到 vue.config.js 就行了
// vue-cli3 内置 webpack 的 TerserPlugin，能够用来解决 js
chainWebpack(config) {
// 非开发环境，去掉 console
config.when(process.env.NODE_ENV !== 'development', config => {config.optimization.minimizer('terser').tap(options => {options[0].terserOptions.compress.drop_console = true
return options
})
})
},webpack 打包，锁版本，动态资源抽离进去，html 引入，不参加打包
补充篇
a 标签的下载文件
<a href="./static/cpgnkw.doc" style="cursor:pointer;color:blue;" download="产品概念口味包装测试标准化办法的补充阐明_F.doc">《“产品概念口味包装测试标准化办法”的补充阐明_F》</a>下载的 href 门路肯定要英语，不能中文，download 写文件名加后缀
dist 缓存，hash 值更新
（1）F12 那里有个 DOC，能够看到以后页面是加载了哪个 html，而后看响应，看它资源 hash 值判断发版有没有失效；
（2）而且通过这个咱们能够发现，咱们本地 run dev，其实做的事件，跟 run build 一样，也是打包了，只是这个打包没有放进去，咱们看不到而已；
（3）ctrl+f5，强制清缓存，清不了 iframe 的，勾 disable cache 加 c +f5，能力革除
（4）打包关掉 sourcemap，体积会小很多
iframe
比方 A 域名嵌套 iframe，B 域名
（1）如果 B 域名跟 A 同域，也就是
A.html
<iframe src="/xxx/xxx/#/"> // 这个是 B 地址如果是这样写，B 的域名会主动拼接 A 域名的，也就是 A 登陆后的 cookie，在 B 的外面申请的时候，也会主动携带上，在申请头外面，header.cookie: ‘xxxxx’
因为是同域名的申请;
（2）如果不同域名
不同域只能 cookie 拿，而后手动拼到申请头外面，作为 token
// 这个是拿全副的，所有 cookie 的挤在一起，要本人切割拼接
document.cookie
// 大略这个感觉
document.cookie.split(`; ${'_department'}=`)
（3）B 域名如何管制浏览器地址栏
目前遇到的，如果 B 域名携带的 token 过期了，要跳转 A 域名的登录
// window.parent.location.href = '/login'node 切换
这是个好货色，很多我的项目可能要不同版本的 node 装置依赖能力跑起来，因为 npm 是追随 node 的，node 版本多少，npm 版本也多少，最近我的项目大部分都是 10.0.0 能力失常跑
前端 excel 导出
有插件实现
"dependencies": {"xlsx": "^0.16.5" // 这个},
代码
// excel 表格数据格式, 二维数组
// [// ['题目名']
// ['表头','表头','表头']
// ['值','值','值']
// ]
// ws 是 sheet 对象，能够操作 sheet 合并单元格，设置单元格宽度等
let ws = XLSX.utils.aoa_to_sheet(exportData)
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, 'sheet')
XLSX.writeFile(wb, '营销资源扫描图表数据' + '.xlsx')html2canvas 纳闷
这个搁置了
申请头字段不辨别大小写
是的，不辨别,headers[‘token’]和 headers[‘TOKEN’]是一样的
对于工夫 new Date 用 - 原来默认是 8 点，只有用 / 才是失常的 0 点
new Date('2021-08-11')
Wed Aug 11 2021 08:00:00 GMT+0800 (中国规范工夫)
new Date('2021/08/11')
Wed Aug 11 2021 00:00:00 GMT+0800 (中国规范工夫)