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

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

 
  • {{num.}}
  • {{num.}}
  • {{num.}}
  • {{num.}}

类型

类型

展示
展示

获取后台数据将数据传入echartOption.js的series的data里

(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: []
        }
    ]
};
........
本文由博客一文多发平台 OpenWrite 发布!

你可能感兴趣的