1.后台API接口详情（只读即可）：
【Vue使用后台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.}}宗
类型
类型
{{trend.month}}月变化趋势
展示
展示
获取后台数据将数据传入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 发布！
推荐阅读
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- vue.js组件开发
- 前端开发|Vue2.x API 学习
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- vue.js|后端开发学习Vue(一)
- JS|VUE学习笔记[30-46]
- vue.js|Vue为何弃用经典的Ajax，选择自研Axios（）
- vue|vue3替代vuex的框架piniajs实例教程
- cmd配置npm仓库镜像报错