本人初学者：仅记录工作中的需求功能
1.主页面
①template
<template>
<div>
<!-- echarts图表 -->
<el-row>
<el-col :span="8">
<!-- <LineF ref="lineF" :infos="info"></LineF> -->
</el-col>
<el-col :span="8">
<BarF ref="barF" :barInfos="barInfo"></BarF>
</el-col>
</el-row>
</div>
</template>
②script
import LineF from './lineF.vue';
import BarF from './barF.vue'
export default {
name: 'MyExamIndex',
components:{ LineF,BarF },
data() {
return {
info:{},
barInfo:{}
};
},
mounted() {
this.info = {
coreDTOList:[0, 0, 0, 281, 434, 569, 134, 0, 0, 0, 0, 0],
coreColor:'rgba(0, 149, 255, 1)',
dailyDTOList:[0, 0, 0, 0, 0, 2, 1, 0, 0, 0, 0, 0],
dailyColor: 'rgba(67, 207, 124, 1)',
ruleDTOList:[0, 0, 0, 822, 1091, 1042, 20, 0, 0, 0, 0, 0],
ruleColor: 'rgba(255, 141, 26, 1)',
}
this.barInfo = {
charName:['小升初一班','初一二班','高一三班','三年级一班','一年级一班','一年级二班','一年级三班','二年级一班'],
charScore:['100','200','30','80','90','100','100','100']
}
window.onresize = () => {
this.$nextTick(() => {
this.$refs["lineF"].resizeChart();
this.$refs["barF"].resizeChart();
});
};
},
};
2.子页面内容
①template
<template>
<!-- 柱状图 -->
<div>
<div class="topTitle">班级期末累计分数排名</div>
<div style="margin:29px 20px 0px;border: 0px solid red;height: 300px;">
<div style="font-size: 18px;color: rgba(56, 56, 56, 1);text-align: right;">单位：分</div>
<div id="barF" style="width: 100%; height: 260px;border: 0px solid red;"></div>
</div>
</div>
</template>
②script
import * as echarts from 'echarts';
export default {
name: 'MyExamBarF',
props: {
barInfos:{
type:Object,
default:''
}
},
watch: {
barInfos(n) {
this.initChar(n)
}
},
data() {
return {
myChart: null,
};
},
methods: {
initChar(n){
//销毁
if(this.myChart){
this.myChart.dispose();
}
this.myChart = echarts.init(document.getElementById('barF'));
var option = {
tooltip: {
backgroundColor: 'rgba(237,241,249,1)',
borderColor: new echarts.graphic.LinearGradient(
0, 0, 0, 1, // 渐变方向，从上到下
[
{offset: 0, color: 'rgba(60, 216, 86, 1)'}, // 渐变起始颜色
{offset: 1, color: 'rgba(255, 255, 255, 1)'} // 渐变结束颜色
]
),
borderWidth: 1,
trigger: 'axis',
formatter: function (params) {
// params 是一个数组，数组中包含每个系列的数据信息
var res = params[0].name + '<br/>'; // 显示名称
var score = params[0].value + '<br/>'; // 显示分数
return `
<div style="color:rgba(29, 33, 41, 1);font-size: 14px;font-family: HarmonyOS;">
<div style="background: #fff;border-radius: 4px;display: flex;justify-content: space-between;margin-bottom: 4px;padding:4px 6px;">
<div>班级名称:</div>
<div style="margin-left: 20px;">`+res+`</div>
</div>
<div style="background: #fff;border-radius: 4px;display: flex;justify-content: space-between;margin-bottom: 4px;padding:4px 6px;">
<div>分数:</div>
<div style="margin-left: 20px;">`+score+`</div>
</div>
</div>
`
}
},
dataZoom: [
{
show:n.charName.length > 7 ?true : false,
type: "slider",
realtime: true, // 拖动时，是否实时更新系列的视图
startValue: n.charName.length,
endValue: n.charName.length-6,
width: 4,
height: "76%",
top: "5%",
right: 0,
yAxisIndex: [0, 1], // 控制y轴滚动对象
fillerColor: "#0093ff", // 滚动条颜色
borderColor: "none",
backgroundColor: "rgba(229, 230, 235, 1)", //两边未选中的滑动条区域的颜色
handleSize: 0, // 两边手柄尺寸
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
zoomLock: true,
brushSelect: false,
handleStyle: {
borderRadius: 10, // 设置圆角大小
}
},
{
type: "inside",
startValue: 0,
endValue: 0,
minValueSpan: 10,
yAxisIndex: [0],
zoomOnMouseWheel: false, // 关闭滚轮缩放
moveOnMouseWheel: true, // 开启滚轮平移
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
},
],
grid: {
top: '0%',
left: 100,
right: 80,
bottom: '16%',
},
xAxis: {
show: true,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(239, 241, 243, 1)'
},
},
axisLabel: {
textStyle: {
fontSize: 16,
fontFamily: 'HarmonyOS',
color: 'rgba(56, 56, 56, 1)'
},
},
},
yAxis: [
{
data: n.charName,
axisLabel: {
textStyle: {
fontSize: 16,
fontFamily: 'HarmonyOS',
color: 'rgba(56, 56, 56, 1)'
},
formatter:function(value) {
let val = ''
if (value.length > 5) {
val = value.slice(0, 5) + '...'
return val
} else {
return value
}
}
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
],
series: [
{
data: n.charScore,
type: 'bar',
barWidth: 8,
orientation: 'horizontal',
itemStyle: {
borderRadius: [10, 10, 10, 10], // 这里设置圆角的大小
color: 'rgba(0, 149, 255, 1)',
emphasis: {
color: 'rgba(60, 216, 86, 1)' // 鼠标移入颜色
}
}
}
]
};
this.myChart.setOption(option);
},
resizeChart() {
if (this.myChart) {
this.myChart.resize();
}
}
},
};
③style
<style lang="scss" scoped>
.topTitle{
color:rgba(5, 0, 78, 1);
font-size: 20px;
font-weight: 700;
margin-top: 18px;
margin-left: 20px;
}
</style>
