ECharts图表绘画（基于Vue）
www.echartsjs.com/index.html 里面的x轴和y轴字体变化，官方文档的好像不生效，下面的才会生效
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
},
axisLabel:{
textStyle:{
fontSize:64,
color:'red'
}
}
}
],
关于显示百分百 数据一定要是百分比的，目前不知道数据怎么转为百分比，所以只能先将数据进行百分比处理
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
label: {
normal: {
show: true,
position: "top",
fontSize: 22,
color: "#fe8b1e",
formatter: "{c}%" 这里的c是指数据
}
data:[20,20,20,20,20]
}
]
关于视图窗口更新但是图表并没有更新
<div id="dataHistogram"></div>
//先获取dom中的图表元素
this.myChart = echarts.init(
document.getElementById("dataHistogram")
);
//使用this.myChart.resize();
this.myChart.resize();
截图并转为图片文件保存(html2canvas插件)
//获取截图区域
function html2canvas(document.getElementById("xxxx").get, {
backgroundColor: null,
useCORS: true
}).then(canvas => {
let dataURL = canvas.toDataURL("image/png");
let formObj = new FormData();
formObj.append("uploadFile", this.base64ToBlob(dataURL));
});
//进行转换
function base64ToBlob(urlData) {
var arr = urlData.split(",");
var mime = arr[0].match(/:(.*?);/)[1] || "image/png";
// 去掉url的头，并转化为byte
var bytes = window.atob(arr[1]);
// 处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
// 生成视图（直接针对内存）：8位无符号整数，长度1个字节
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
console.log(new Blob([ab], { type: mime }));
return new Blob([ab], {
type: mime
});
}
画布实现动态粒子背景(Vue插件)
vue-particles.netlify.com/ 忘记截图效果 可以去官网看一下
npm install vue-particles --save-dev
import Vue from 'vue'
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
<template>
<p id="app">
<vue-particles
color="#dedede"
:particleOpacity="0.7"
:particlesNumber="80"
shapeType="circle"
:particleSize="4"
linesColor="#dedede"
:linesWidth="1"
:lineLinked="true"
:lineOpacity="0.4"
:linesDistance="150"
:moveSpeed="3"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push"
>
</vue-particles>
</p>
</template>
| 名称 | 基础类型 | 默认值 | 说明 |
|---|---|---|---|
| color | String类型 | 默认'#dedede' | 粒子颜色。 |
| particleOpacity | Number类型 | 默认0.7 | 粒子透明度 |
| particlesNumber | Number类型 | 默认80 | 粒子数量 |
| shapeType | String类型 | 默认'circle' | 可用的粒子外观类型有："circle","edge","triangle", "polygon","star" |
| particleSize | Number类型。默认80 | 单个粒子大小 | |
| linesColor | String类型 | 默认'#dedede' | 线条颜色 |
| linesWidth | Number类型 | 默认1 | 线条宽度 |
| lineLinked | 布尔类型 | 默认true | 连接线是否可用 |
| lineOpacity | Number类型 | 默认0.4 | 线条透明度 |
| linesDistance | Number类型 | 默认150 | 线条距离 |
| moveSpeed | Number类型 | 默认3 | 粒子运动速度 |
| hoverEffect | 布尔类型 | 默认true | 是否有hover特效 |
| hoverMode | String类型 | 默认true | 可用的hover模式有: "grab", "repulse", "bubble" |
| clickEffect | 布尔类型 | 默认true | 是否有click特效 |
| clickMode | String类型 | 默认true | 可用的click模式有: "push", "remove", "repulse", "bubble" |
如果要在画布里面添加组件，则需要把组件绝对定位
<template>
<div id="app" class="wrap-banner">
<div >
<!-- <logo class="control"></logo> -->
<loginform class="control"></loginform>
</div>
<vue-particles
class="sky"
color="#dedede"
:particleOpacity="0.7"
:particlesNumber="80"
shapeType="circle"
:particleSize="4"
linesColor="#dedede"
:linesWidth="1"
:lineLinked="true"
:lineOpacity="0.4"
:linesDistance="150"
:moveSpeed="3"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push"
></vue-particles>
</div>
</template>
<script>
import logo from '../components/logo.vue'
import loginform from '../components/loginform.vue'
export default{
data(){
return{
}
},
components:{
logo,loginform
}
}
</script>
<style lang="scss" scoped>
.control{
height: 320px;
position: absolute;
left: 60%;
top: 30%;
border-radius: 2em;
}
//固定属性 对画布背景进行修改
#particles-js{
// background-color: #000000;
background-image: url('../assets/bk5.jpg');
background-repeat: no-repeat;
background-size: 100%;
}
.sky{
position: relative;
top: 0;
width: 100%;
height: 100%;
z-index: -1; //这个z-index 要是不设置 会对登录表单的点击产生干扰
}
.wrap-banner {
display: flex;
}
</style>
