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 (中国规范工夫)
发表回复