vue-cli+elementUI+v-charts开发中遇到的问题

最近在开发的新项目中,前后端分离了,终于可以愉快的折腾了!

vue

1.重定向

config/index.js中找到proxyTable添加

1
2
3
4
5
6
7
'/api': {
target: '测试ip',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},

可以将/api请求都重定向到测试ip下

2.无需打包的静态资源放到static下

3.图片路径

直接在行内样式中引用出错时

1
2
3
4
5
6
7
8
9
10
<!--错误-->
<div style="background-image:url('../assets/xxx.png')></div>
<!--正确-->
<div :style="{backgroundImage: 'url(' + image + ')'}"></div>

data () {
return {
image: require('../assets/xxx.png')
}
}

4.eventBus

1
2
3
4
5
6
7
8
9
10
//main.js 
window.eventBus = new Vue();

//component 1
eventBus.$emit('pass1', 'from component 1');

//component 2
eventBus.$on('pass1', function(data) {
console.log(data); //=> 'from component 1'
})

5.部分CSS样式打包后不兼容

1
2
3
4
5
6
7
8
9
// package.json
"browserslist": [
"> 1%",
"last 2 versions",
"last 10 Chrome versions",
"last 5 Firefox versions",
"Safari >= 6",
"ie > 8"
]

v-charts

实现以下需求
v-charts

数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
:data="{
columns: ['名称', '区域流量', '设备', '业务', '系统软件'],
rows: [
{
'名称': '区域流量',
'区域流量': 14,
},
{
'名称': '设备',
'设备': 13,
},
{
'名称': '业务',
'业务': 0,
},
{
'名称': '系统软件',
'系统软件': 3
},
]
}"
:extend="{
series: {
barGap: '-100%'
}
}"

修改柱体颜色及其上方字体颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
:extend="{
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(78, 144, 253, 1)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(78, 144, 253, .2)' // 100% 处的颜色
}]
},
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(169, 77, 248, 1)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(169, 77, 248, .2)' // 100% 处的颜色
}]
},
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(74, 229, 252, 1)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(74, 229, 252, .2)' // 100% 处的颜色
}]
},
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(122, 255, 141, 1)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(122, 255, 141, .2)' // 100% 处的颜色
}]
}
],

series: {
label: {
show: true, //显示柱体文字
position: 'top', //显示文字在上方
color: 'sadfas' //关键是这里,color随便写点字符串就可以跟随主体颜色了,我也不知道为什么
}
}
}"

自定义字体

需要注意的是自定义字体不能用数字开头,否则将设置失败,原设置的字体名字叫’315-CAI978’一直没有成功,改为’CAI978’后成功了

值为0时显示

1
2
3
4
5
:extend="{
series: {
barMinHeight: 1 // 设置最小高度后就显示了
}
}"
坚持原创技术分享,您的支持将鼓励我继续创作!