0
点赞
收藏
分享

微信扫一扫

Vue使用后台API接口做可视化界面

mm_tang 2022-01-05 阅读 40
vue.jsjavascript前端

1.后台API接口详情（只读即可）：

图表1：GET /screen/chart
变化趋势：GET /screen/trend
…

2.前端获取接口页面（api工具库里）：

src=>api=>screen(页面目录文件夹)=>index.js

import request from '@/router/axios'
	import store from "@/store";
	/* 图表1 */
	export function echartShow(obj) {
	    return request({
	        url: '/api/screen/echart',
	        method: 'get',
	        data:obj
	    })
	}
/* 变化趋势 */
export function trend(obj) {
    return request({
        url: '/api/screen.trend',
        method: 'get',
        params: obj
    })
}
......

3.页面详情：

(1) view=>screen=>index.vue
这是的内容：

 <div class="">
    <div id="index" ref="appRef">
      <!-- 左侧 -->
      <div class="left">
        <!-- 上部总图 -->
        <div class="header">
          <ul>
            <li>
              <img src="@/assets/images" alt="">
              <div class="box">
                <h5></h5>
                <span>{{num.}}<i>宗</i></span>
              </div>
            </li>
            <li>
              <img src="@/assets/images" alt="">
              <div class="box">
                <h5></h5>
                <span>{{num.}}<i>宗</i></span>
              </div>
            </li>
            <li>
              <img src="@/assets/images/" alt="">
              <div class="box">
                <h5></h5>
                <span>{{num.}}<i>宗</i></span>
              </div>
            </li>
            <li>
              <img src="../../assets/images/" alt="">
              <div class="box">
                <h5></h5>
                <span>{{num.}}<i>宗</i></span>
              </div>
            </li>
          </ul>
        </div>
        <!-- 中间饼图 -->
        <div class="contain">
          <div class="echart echart_l">
            <header>
              <h3>类型</h3>
            </header>
            <div class="border"></div>
            <div class="box">
              <div id="ebox1" class="echartStyle"></div>
            </div>
          </div>
          <div class="echart echart_r">
            <header>
              <h3>类型</h3>
            </header>
            <div class="border"></div>
            <div class="box">
              <div id="ebox2" class="echartStyle"></div>
            </div>
          </div>
        </div>
        <!-- 下部折线图 -->
        <div class="footer">
          <div class="line">
            <header>
              <h3>{{trend.month}}月变化趋势</h3>
            </header>
            <div class="border"></div>
            <div class="lineBox">
              <div id="ebox3" class="echartStyle"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <!-- 展示 -->
        <div class="list ...List">
          <header>展示</header>
          <div class="border"></div>
          <div class="listBox">
            <el-table :data="...ListData" style="width: 100%;height: 100%;">
              <el-table-column prop="hphm" label="" width="90"/>
              <el-table-column prop="cllx" label="" width="90"/>
              <el-table-column prop="sgsj" label=" width="140"/>
              <el-table-column prop="ddmc" label="过车点" width="160"/>
              <el-table-column prop="sglx" label="事故类型" width="140"/>
            </el-table>
          </div>
        </div>
        <!-- 展示 -->
        <div class="list ...List">
          <header>展示</header>
          <div class="border"></div>
          <div class="listBox">
            <el-table :data="...ListData" style="width: 100%;height: 100%;">
              <el-table-column prop="hphm" label="" width="90"/>
              <el-table-column prop="lx" label="" width="90"/>
              <el-table-column prop="wfsj" label="" width="140"/>
              <el-table-column prop="sbmc" label="" width="160"/>
              <el-table-column prop="wfxwmc" label="" width="140"/>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

这是

<script>
  import draMixin from '@/util/drawMixin';//适配屏幕工具
  import {option1, option2, ...} from './echartOption.js' //引入图表JS
  import {
    echartShow,
   	trend,
  } from '@/api/screen/....js'  //API接口
  export default {
    data() {
      return {
       ...ListData: [],
       ...ListData: [],
        num: [],//存放数
        trend: []
      }
    },
    mixins: [draMixin],
    created() {
    },
    mounted() {
      this.init()
    },
    methods: {
      init() { //初始化
        this.pieEcharts1(),
          this.pieEcharts2(),
          this.lineEchart(),
          this.getNum(),
          this....Show(),
          this....Show()
      },
      getNum() {//  获取...数的数据
       ....Num().then(res => {
          this.num = res.data.data;
        })
      },
      pieEcharts1() {//饼图：类型
       ...Type().then(res => {
          let data = []
          res.data.data.forEach(item => {
            data.push({
              name: item.name,
              value: item.count
            })
          })
          option1.series[0].data = data
          let dom1 = document.getElementById('ebox1')
          echarts.init(dom1).setOption(option1)
        })
      },
      pieEcharts2() {//饼图：类型
      ...Type().then(res => {
          let data = []
          res.data.data.forEach(item => {
            data.push({
              name: item.name,
              value: item.count
            })
          })
          option2.series[0].data = data
          let dom2 = document.getElementById('ebox2')
          echarts.init(dom2).setOption(option2)
        })
      },
      lineEchart() {//趋势图
        Trend().then(res => {
          this.trend = res.data.data;
          let Data = [], ...Data = [];
          // 获取的数据1
          this.trend.list.forEach(item => {
            Data.push({
              name: item.name,
              value: item.count
            })
          })
          option3.series[0].data = accidentData
          // 获取的数据2
          this.trend....list.forEach(item => {
            ...Data.push({
              name: item.name,
              value: item.count
            })
          })
          option3.series[1].data = Data
          let dom3 = document.getElementById('ebox3')
          echarts.init(dom3).setOption(option3)
        })
      },
      Show() {//展示1
        Show().then(res => {
          this.ListData = res.data.data;
        })
      },
      Show() {//展示2
        Show().then(res => {
          this.ListData = res.data.data;
        })
      }
    }
  }
</script>

(2) view=>screen=>echartOption.js

/* 
   图表1
*/
export let option1 = {
    color: ['#FFAD05', '#3DD1F9', '#01E17E', '#906BF9'],
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        y: 'center',
        x: '55%',
        icon: 'circle',
        textStyle: { color: '#B8C0FF', fontSize: 14 },
    },
    series: [
        {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            label: { show: false, position: 'center' },
            emphasis: {
                label: { show: false, fontSize: '40', fontWeight: 'bold' }
            },
            labelLine: {
                show: false
            },
            data: []
        }
    ]
}

/* 
    变化趋势
*/
export let option2 = {
    tooltip: {
        trigger: "axis"
    },
    legend: {
        top: "0%",
        data: ["名称1", "名称2"],
        textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12"
        },
        // icon:"",//设置图例
    },
    grid: {
        left: "10",
        top: "20",
        right: "15",
        bottom: "10",
        containLabel: true
    },
    xAxis: [
        {
            type: "category",
            boundaryGap: false,
            // x轴更换数据
            data: [
                "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30", "31"
            ],
            // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: 12
                }
            },
            // x轴线的颜色为   rgba(255,255,255,.2)
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.2)"
                }
            }
        }
    ],
    yAxis: [
        {
            type: "value",
            min: 0,
            // splitNumber:10,//设置y轴间距
            // interval:5,
            axisTick: { show: true },
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                }
            },
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: 12
                }
            },
            // 修改分割线的颜色
            splitLine: {
                lineStyle: { color: "rgba(255,255,255,.1)" },
            }
        }
    ],
    series: [
        {
            name: "名称1",
            type: "line",
            smooth: false,
            // 单独修改当前线条的样式
            lineStyle: {
                color: "#FFFF00",
                width: "2"
            },
            // 填充颜色设置
            areaStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 3, 0, 0,
                    [
                        {
                            offset: 0,
                            color: "rgba(255, 255, 0, 0.4)" // 渐变色的起始颜色
                        },
                        {
                            offset: 0.8,
                            color: "rgba(255, 255, 0, 0.4)" // 渐变线的结束颜色
                        }
                    ],
                    false
                ),
                shadowColor: "rgba(255, 255, 0, 0.3)",
            },
            // 设置拐点
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            // 设置拐点颜色以及边框
            itemStyle: {
                color: "#FFFF00",
                borderColor: "rgba(255, 255, 0, 0.3)",
                borderWidth: 12
            },
            data: [],
            connectNulls: false,
        },
        {
            name: "名称2",
            type: "line",
            smooth: false,
            lineStyle: { normal: { color: "#08F6B4", width: 2 } },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 3, 0, 0,
                        [
                            {
                                offset: 0,
                                color: "rgba(8, 246, 180, 0.4)"
                            },
                            {
                                offset: 0.8,
                                color: "rgba(8, 246, 180, 0.4)"
                            }
                        ],
                        false
                    ),
                    shadowColor: "rgba(8, 246, 180, 0.2)"
                }
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 5,
            // 设置拐点颜色以及边框
            itemStyle: {
                color: "#08F6B4",
                borderColor: "rgba(8, 246, 180, 0.2)",
                borderWidth: 12
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            data: []
        }
    ]
};
........
举报

相关推荐

python可视化界面自动生成,python如何做可视化界面

运维安全web安全

RabbitMq设置可视化界面

java后端

RocketMQ可视化界面安装

luakubernetesdocker容器nginxtengine

RocketMq可视化界面搭建

杨文来架构

使用python做周期财务统计可视化

计算机从入门到***代码改变世界每天写1000字计算机杂谈

新版kafka可视化界面组件

dockerkafkakafka可视化界面

java如何生成可视化界面

javaSwingJava后端开发

VUE中使用后台返回图片流方法

vue.jsjavascript前端

vue使用echarts可视化图形插件

初始化参数配置虚拟化云计算

关于Vue ui的可视化界面进行Vue项目的创建

前端萌新求大佬带Vue
0 条评论