总结
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //引入组件
父组件
father.vue
记得给盒子模型高宽度
<template>
<div>
<div class="demo">
<barEchartsdata :data="barEchartsdata"></barEchartsdata>
</div>
</div>
</template>
<script>
import \* as echarts from 'echarts';
import barEchartsdata from './index'
export default {
components:{
barEchartsdata
},
data(){
return{
//一般数据都是从后台接口获取,这里为了方便 在data里面初始化就好了
//柱状图加折线图
barEchartsdata:{
xAxis:['集团','客户','KA','商用','海外','电商'],
data:[
{
data:['5','50','5','20','5','120'],
color:"#519EF6",
type:"bar", //这个复用组件只支持柱状图和折线图
width:20,
zlevel:10,
name:"供应成本控制率",
labelIsShow:false,
yAxisIndex:0,
},
{
data:['60','50','55','100','150','100'],
color:"#519EF6",
type:"line",
width:20,
zlevel:10,
name:"供应成本控制率",
labelIsShow:false,
yAxisIndex:0,
},
],
}
}
}
</script>
<style scoped>
.demo{
width:100%;
height:500px;
border:1px solid;
}
</style>
子组件
son.vue
<template>
<div class="bar-line" :id="id"></div>
</template>
<script>
export default {
components: {},
props: {
/\* 数据 \*/
//数据类型
data:{
type:Object
},
//标题
title:{
type:String,
default:'柱状折线图'
},
//直角坐标系内绘图网格
grid:{
type:Object,
default:()=>{
return {
//左间距 右间距 底部距离 顶部距离
left: 40,
right: 55,
bottom: '12%',
top:15
}
}
},
//刻度标签旋转
rotate:{
type:Number,
default:0
},
/\* 图例设置 \*/
legend:{
type:Boolean,
default:false
},
// 图例距离底部距离
legendBottom: {
type: Number,
default: 2
},
//图例顶部距离
legendTop: {
type: Number
},
//鼠标移到图表上后展示的类似数据点详情的一个说明
tooltipFormatter:{
type:Object,
default:()=>{
return {
tooltipArray:[]
}
}
},
//图例输出文案
legendFormatter:{
type:Object,
},
//是否显示Y轴
yAxisIsShow:{
type:Boolean,
default:true
},
//X轴的字体颜色
xAxisAxisLabel:{
type:Object,
default:()=>{
return {
show:true,
color:'#4a4a4a',
fontSize:11,
}
}
},
//X轴的展示内容
xAxisFormatterType:{
type:String,
},
//X轴的底线颜色
xAxisAxisLine:{
type:Object,
default:()=>{
return {
show:true,
color:'#ccc'
}
}
},
//x轴刻度样式
xAxisplitLine:{
type:Object,
default:()=>{
return {
show:false,
type:'dotted',
color:'#000'
}
}
},
//y轴刻度样式
yAxisplitLine:{
type:Object,
default:()=>{
return {
show:true,
type:'dotted',
color:'rgba(204,204,204,0.6)'
}
}
},
//Y轴文字轴样式
yAxisAxisLine:{
type:Object,
default:()=>{
return {
show:false,
type:'dotted',
color:'#ccc',
}
}
},
//Y轴文字
yAxisAxisLabel:{
type:Object,
default:()=>{
return {
show:true,
color:'#4a4a4a',
fontSize:11,
}
}
},
//Y轴刻度线
yAxisAxisTick:{
type:Boolean,
default:false
},
//提示
toolTipData:{
type:Array,
default:()=>{
return [
{
name:'1月',
list:[
{name:'2018',value:'1,234万'},
{name:'2019',value:'2,222万'},
{name:'2020',value:'2,222万'},
]
},
{
name:'2月',
list:[
{name:'2018',value:'1,234万'},
{name:'2019',value:'2,222万'},
{name:'2020',value:'2,222万'},
]
},
]
}
},
//点击事件
chartHandleClick:{
type:Function
},
agemom:{
type:Boolean,
},
ySetNum:{
type:Array,
default:null
},
// 判断哪个模块进入 显示哪个模块的tip
echartTypeModule:{
type: String,
}
},
data() {
//初始化定义id mychart flag 属性
return {
id:'',
myChart:'',
flag:true,
};
},
//创建周期后做的事情
created() {
//当前的id=生成的20位随机字符串
this.id = this.genRandomString(20)
},
//载入周期后做的事情
mounted() {
//this赋值给\_this,当前的id赋值给doc 然后初始化echarts
var _this = this
var doc = document.getElementById(this.id);
var echarts = _this.$echarts;
_this.myChart = echarts.init(doc);
window.addEventListener('resize',() => {
_this.myChart.resize();
});
// \_this.myChart.getZr().on('click',function(){
// let canvas = document.querySelectorAll('.bar-line');
// for(let i=0;i<canvas.length;i++){
// if(canvas[i].getAttribute('id') == \_this.id){
// \_this.myChart.dispatchAction({
// type: 'showTip'
// })
// }else{
// let myChart = echarts.init(canvas[i]);
// myChart.dispatchAction({
// type: 'hideTip'
// })
// }
//}
//})
_this.barChartFun()
},
watch: {
data: {
handler(newval) {
this.barChartFun()
},
deep: true
}
},
computed: {},
methods: {
//处理
barChartFun(){
var _this = this
//定义两个数组 seriesData color
let seriesData = [] , color = [];
console.log(111)
console.log(_this.data.data)
_this.data.data.map((item)=>{
//遍历图例的颜色
//如果当前传入的颜色=true color数组里面就添加item第一个数据的颜色
//又如果item的颜色=黑色 不处理 否则color里面添加一个item的颜色
if(item.barGradientsTrue === true){
color.push(item.barGradientsColor[0])
}else if(item.color == 'rgba(0,0,0,0)'){
}else{
color.push(item.color)
}
//series的数据
seriesData.push({
stack:item.stack, //名字一样就重叠
name:item.name, //柱子名字
type:item.type, //是柱子图还是折线图
data:item.data, //数据
yAxisIndex: item.yAxisIndex , //Y轴index
barWidth:item.width, //柱子宽度
symbol:item.symbol == undefined ? 'emptyCircle' : item.symbol, //折线图拐点样式
barGap:item.barGap, //柱子间距
zlevel:item.zlevel, //柱子层级
showSymbol: true, //是否显示点
symbolSize:item.symbolSize, //点的大小
smooth:false, //是否是波浪线 false 就是直角线
lineStyle: {
normal: {
color: item.color, // 线条颜色
type:item.typeLine,
opacity:0.6
},
// borderColor: '#f0f'
},
itemStyle:{
normal:{
color:function(params){
//如果barGradientsTrue 是true 那么就是渐变
// if(item.barGradientsTrue === true ){
// return new \_this.$echarts.graphic.LinearGradient(
// 0, 0, 0, 1,
// [{
// offset: 1,
// color: item.barGradientsColor[1]
// },
// {
// offset: 0,
// color: item.barGradientsColor[0]
// }
// ]
// )
// }else
//如果当前的data.rulesList不等于无法定义以及类型是柱状图的话
if(_this.data.rulesList !== undefined && item.type == 'bar'){
let color
if(params.data >= _this.data.rulesList){
color = new \_this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{
offset: 0,
color: 'rgba(38, 190, 184, 1)'
},
{
offset: 1,
color: 'rgba(22, 161, 233, 1)'
}
]
)
}else{
color = new \_this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{
offset: 0,
color: 'rgba(255, 86, 62, 1)'
},
{
offset: 1,
color: 'rgba(247, 56, 49, 1)'
}
]
)
}
return color
}else if(_this.data.rulesList2 !== undefined && item.type == 'bar'){
let color
if(params.data <= _this.data.rulesList2){
color = new \_this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{
offset: 0,
color: 'rgba(38, 190, 184, 1)'
},
{
offset: 1,
color: 'rgba(22, 161, 233, 1)'
}
]
)
}else{
color = new \_this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{
offset: 0,
color: 'rgba(255, 86, 62, 1)'
},
{
offset: 1,
color: 'rgba(247, 56, 49, 1)'
}
]
)
}
return color
}
// else if(item.type == 'line'){
// // return '#fff'
// return item.color
// }
else{
return item.color
}
},
// borderColor: item.color,
// borderWidth: 1,
},
//触摸后的高亮样式
emphasis: {
// color: item.color//hover拐点颜色定义
color:'red'
},
},
areaStyle: { //区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new \_this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: item.areaStyleShadow == true ? item.areaStyleColor[0] : 'rgba(0,0,0,0)',
},
{
offset: 1,
color: item.areaStyleShadow == true ? item.areaStyleColor[1] : 'rgba(0,0,0,0)',
}
], false),
// shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
// shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
}
},
//柱状图上的文字定义
label:{
normal:{
//是否显示
show:true,
formatter:function(value){
// let val = ''
// // val = \_this.chartDataProcess(value.data,\_this.data.data[0].unit[1]).num + \_this.chartDataProcess(value.data,\_this.data.data[0].unit[1]).unit
// return val
},
//定位在哪里
position: 'top',
color: function(){
},
//字体样式 大写 顶部距离 字体粗细
fontFamily:'pingfang',
### 最后
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
**《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》**
},
//字体样式 大写 顶部距离 字体粗细
fontFamily:'pingfang',
### 最后
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
**《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》**
[外链图片转存中...(img-lU4aLZv5-1715845502301)]
[外链图片转存中...(img-eazVke3z-1715845502302)]
[外链图片转存中...(img-nvPiqpqn-1715845502302)]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
