【若依前后端分离】仪表盘绘制

devtools/2024/9/24 12:45:08/

示例：

代码：

InstrumentPanel.vue组件

<template><div><!-- 在这里放置你的图表组件 --><div ref="echarts" style="width: 100%; height: 400px;"></div></div>
</template><script>
export default {name: 'instrumentPanel',props: {data: {type: Object,required: true}},// data() {//   return {//     value: 12,//     text: "温度"//   };// },mounted() {this.renderChart();},methods: {renderChart() {const echarts = require('echarts');const myChart = echarts.init(this.$refs.echarts);const option = {//提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。tooltip: {// 相对位置，放置在容器正中间position: ['50%', '50%'],formatter: "{a} <br/>{b} : {c}%"},series: [{name: "仓库信息",type: "gauge",//仪表盘min: -10,//最小值max: 60,//最大值// 设置成相对的百分比,中心（圆心）坐标center: ['50%', '50%'],//仪表盘半径,可以放大radius: '90%',//仪表盘起始角度startAngle: 225,//仪表盘结束角度。endAngle: -45,// 分割线的数量splitNumber: 20,//仪表盘详情，用于显示数据。detail: {show: true,formatter: this.data.text+"\n\n"+this.data.value + "℃",textStyle: {color: 'auto',fontSize: 40},offsetCenter: [0, '50%'],fontStyle:'normal',//italic 文字字体的风格。fontWeight:'bold',fontSize:40,},//仪表盘轴线相关配置。axisLine: {//是否在两端显示成圆形。roundCap: true,//仪表盘轴线样式。lineStyle: {//表盘宽度width: 25,//color[i][0] 的值代表整根轴线的百分比，应在 0 到 1 之间；color[i][1] 是对应的颜色。color: [[0.2, '#008FFF'],[0.3, '#00A2E8'],[0.4, '#00C3CD'],[0.5, '#00E7BB'],[0.6, '#00E79F'],[0.7, '#8CDC00'],[0.8, '#FFD306'],[0.9, '#FFB700'],[1, '#FF7D00']],//刻度样式。axisTick: {length: 12,lineStyle: {color: 'auto',}},pointer: {width: 5,length: '80%',shadowColor: '#ccc', //默认透明shadowBlur: 5,shadowOffsetX: 3,shadowOffsetY: 3},//图形阴影的模糊大小。会变立体shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,//阴影水平方向上的偏移距离shadowOffsetX: 8,//阴影垂直方向上的偏移距离。shadowOffsetY: 8,opacity: 0.8,},//展示当前进度。progress: {show: true,//进度条样式。itemStyle: {borderType: [5, 10],borderDashOffset: 5}},//分隔线样式。splitLine: {//分隔线线长。支持相对半径的百分比length: 20,distance:20,lineStyle: {color: 'auto',}},title: {show: true,offsetCenter: [0, '-30%'],textStyle: {color: '#333',fontSize: 30}},axisLabel:{show:true},},tooltip: {trigger:'item',},animationDuration: 4000, // 仪表盘动画时间data: [{title: "标题",value: this.data.value,// name: this.text}]}]};myChart.setOption(option);}}
};
</script><style>
/* 这里可以添加样式 */
</style>

主页面调用：

  <el-row :gutter="32"><el-col :xs="24" :sm="24" :lg="12"><div class="chart-wrapper"><instrument-panel :data="temperatureData"/></div></el-col><el-col :xs="24" :sm="24" :lg="12"><div class="chart-wrapper"><instrument-panel :data="humidityData"/></div></el-col></el-row>


<script>
//引用
import InstrumentPanel  from "@/views/dashboard/InstrumentPanel";export default {name: 'Index',
//数据data() {return {//温度信息temperatureData: {value:25.4,text:"温度",},//湿度信息humidityData: {value: 22.5,text: "湿度",},}},
}
</script>