接上一期说的
我们大屏的主体框架已经搭建好了，后续我们只需要往大屏里面添加内容即可
本期我们将讲述如何往大屏里面添加echarts的组件内容
1,echarts组件引入
这里我们在index.vue文件里，在script标签内的最顶部，我们引入echarts的组件
如图所示：
2，使用echarts组件
我们在网站里面找到我们需要使用的组件，这里我找了一个油表的组件
点击组件，进入组件详情里，将组件配置项给复制过来。在文件中进行配置，具体配置见代码注释。
<template>
<div>
<dv-full-screen-container class="box">
<dv-border-box-11 title="测试">
<!-- 小图表的外边框组件 -->
<dv-border-box-1 class="box1">
<!-- 小图表图标组件 -->
<dv-capsule-chart
:config="config"
style="
width: 400px;
height: 300px;
margin-left: 10px;
margin-top: 10px;
"
/></dv-border-box-1>
<!-- 创建一个容器，设置ref来获取元素对象，同时，这个标签将用来显示echarts的组件 -->
<div ref="oil_meter" style="height: 220px; width: 220px"></div>
</dv-border-box-11>
</dv-full-screen-container>
</div>
</template>
<script>
import * as echarts from 'echarts'; //引入echarts
export default {
data() {
return {
config: {//组件的配置数据
data: [
{
name: '南阳',
value: 167
},
{
name: '周口',
value: 67
},
{
name: '漯河',
value: 123
},
{
name: '郑州',
value: 55
},
{
name: '西峡',
value: 98
},
]
},
unit: '单位'
}
},
mounted() {
setTimeout(() => { //因为dom原因，待组件加载完后在执行echerts来渲染页面
this.opt()
setInterval(() => { //每隔一秒钟执行一次，实现秒表每秒钟刷新一次，形成动态效果
this.opt()
}, 1000)
}, 1000)
},
methods: {
opt() { //echarts组件配置
const mychart = echarts.init(this.$refs.oil_meter)
console.log(mychart)
const option = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
name: 'Pressure',
type: 'gauge',
progress: {
show: true
},
detail: {
valueAnimation: true,
formatter: '{value}'
},
data: [
{
value: Math.floor(Math.random() * (100 - 1) + 1),//这里是生成1-100的随机数
name: 'SCORE'
}
]
}
]
};
mychart.setOption(option)
}
},
}
</script>
<style>
/* 根据具体的情况对图表进整体的布局以及css的修改 */
.box {
background-color: black;
}
.box1 {
margin-left: 20px;
padding-top: 40px;
height: 320px;
width: 420px;
}
</style>
效果图如下
项目到这就完结了，我这个由于是讲解版的，没有在大屏里添加其他的元素里，但是方式都基本一致，有不清楚的可以私聊，需要源码的也可以私聊！！
