后台接口创建express介绍
后台路由创建
1.创建一个文件夹 server 在其中创建index.js与router文件夹容来容纳代码
2.在router下创建4个文件分别容纳 对应的接口
// 存放路由的文件
var express=require("express");
var router=express.Router()
// 设置路由
router.get("/data",function(req,res){
res.send({msg:"第一个接口"})
})
// 暴露路由
module.exports=router
3.在index.js下引用使用刚才创建的内容
var express=require("express");
var app=express();
// 引用路由文件
var chartOne=require("./router/one.js");
var chartTwo=require("./router/two.js");
var chartThree=require("./router/three.js");
var chartFour=require("./router/four.js");
// 中间件中使用路由
app.use("/one",chartOne)
app.use("/two",chartTwo)
app.use("/three",chartThree)
app.use("/four",chartFour)
// 请求是localhost:3000/user/路由文件中的地址
app.listen(3000)
api接口数据创建
1.在server文件夹下创建mock文件夹用来容纳数据(数据可以从代码中获取)
2.引用并且把数据返回给前台
var express=require("express");
var router=express.Router()
// 引用数据
let data=require("../mock/one.json")
router.get("/data",function(req,res){
// 数据返回给前台
res.send({msg:"第1个接口",data})
})
module.exports=router
解决跨域
var express=require("express");
var app=express();
app.use(function(req,res,next){
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
// 千万不要网%%¥¥¥###
// 千万不要网
// 千万不要网
next();
})
图表1基本设置销售总量
1.在components文件夹下的 itemOne.vue中 设置图表1
<template>
<div>
<h2>图表1</h2>
<div id="chartDom" class="chart">
容纳后期的图表
</div>
</div>
</template>
<script>
// 1引用inject获取全局echarts
import {inject,onMounted} from "vue"
export default {
setup() {
// 2得到echarts对象
let $echarts= inject("echarts")
//3.需要获取到element,所以是onMounted 别忘了上面引用
onMounted(() => {
// 4.初始化echarts 别忘了给上面echarts容器添加id
let myChart = $echarts.init(document.getElementById("chartDom"));
// 5.绘制图表
myChart.setOption({
})
})
}
}
</script>
<style scoped>
h2{
/* 48像素 */
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart{
/* 高度360 */
height: 4.5rem;
background-color: gray;
}
</style>
2.我们要完成的横向柱状图
所以在设置echarts配置的时候。给xAxis 的type设置value数值轴。给yAxis设置 catehory类目轴
<template>
<div>
<h2>图表1</h2>
<div id="chartDom" class="chart">
容纳后期的图表
</div>
</div>
</template>
<script>
// 1引用inject获取全局echarts
import {inject,onMounted} from "vue"
export default {
setup() {
// 2得到echarts对象
let $echarts= inject("echarts")
//3.需要获取到element,所以是onMounted 别忘了上面引用
onMounted(() => {
// 4.初始化echarts 别忘了给上面echarts容器添加id
let myChart = $echarts.init(document.getElementById("chartDom"));
// 5.绘制图表
myChart.setOption({
xAxis:{
type:"value"
},
yAxios:{
type:"category"
},
series:[
{
type:"bar"
}
]
})
})
}
}
</script>
<style scoped>
h2{
/* 48像素 */
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart{
/* 高度360 */
height: 4.5rem;
background-color: gray;
}
3 接下来我们需要图表展示的数据(后台提供)
设置axios请求
在组件内容请求数据
<template>
<div>
<h2>图表1</h2>
<div id="chartDom" class="chart">
容纳后期的图表
</div>
</div>
</template>
<script>
import {inject,onMounted} from "vue"
export default {
setup() {
// let $echarts= inject("echarts")
// 引用axios
let $http= inject("axios")
// 设置数据请求方法 不要忘了return
async function getState(){
let chartData=await $http({url:"http://localhost:3000/one/data"})
console.log(chartData)
}
onMounted(() => {
// let myChart = $echarts.init(document.getElementById("chartDom"));
// myChart.setOption({
// xAxis:{
// type:"value"
// },
// yAxios:{
// type:"category"
// },
// series:[
// {
// type:"bar"
// }
// ]
// })
// 测试数据请求的数据 但是先要把上面的注释掉否则会报错
getState()
})
return {
getState
}
}
}
</script>
<style scoped>
h2{
/* 48像素 */
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart{
/* 高度360 */
height: 4.5rem;
background-color: gray;
}
</style>
设置请求基准路径
后续我们右很多的请求 或者后期请求地址改变的时候我们在一个个组件的修改非常的麻烦 所以我们可以设置请求基准路径方便修改
1.在app.vue中设置
<script>
// 1.引用proivde
import {provide} from "vue"
// 2.引用echarts
import * as echarts from "echarts"
// 引用axios
import axios from 'axios'
// 设置请求基准路径
axios.defaults.baseURL="http://localhost:3000/"
export default {
setup() {
provide("echarts",echarts)//第一个参数是名字 第二个参数是你传递的内容
provide("axios",axios)//第一个参数是名字 第二个参数是你传递的内容
},
}
</script>
2.在需要请求的地方只需要写请求的路由地址即可
async function getState(){
let chartData=await $http({url:"chartDataOne"})
console.log(chartData)
}
处理数据
我们请求来的数据事一个数组对象 那么我们需要把x轴的数据于y轴的数据取出来变成两个数组方便echarts使用
<template>
<div>
<h2>图表1</h2>
<div id="chartDom" class="chart">
容纳后期的图表
</div>
</div>
</template>
<script>
// 1.引用reactive
import {inject,onMounted,reactive} from "vue"
export default {
setup() {
// let $echarts= inject("echarts")
let $http= inject("axios")
async function getState(){
// 3.吧请求过来的值传递给变量接收方便使用
data=await $http({url:"chartDataOne"})
}
// 2.创建接受请求的数据于接受x轴的数据于y轴的数据 别忘了return
let data=reactive({})
let xdata=reactive([])
let ydata=reactive([])
// 4.创建处理数据的方法
function setData(){
console.log("data",data)
// 便利数据并且去除对应的值
xdata=data.data.data.chartData.map(v=>v.title)
ydata=data.data.data.chartData.map(v=>v.num)
console.log("x",xdata)
console.log("y",ydata)
}
onMounted(() => {
// let myChart = $echarts.init(document.getElementById("chartDom"));
// myChart.setOption({
// xAxis:{
// type:"value"
// },
// yAxios:{
// type:"category"
// },
// series:[
// {
// type:"bar"
// }
// ]
// })
// 5在请求成功之后调用处理数据的方法
getState().then(()=>{
// 测试下处理的数据
setData()
})
})
return {
getState,data,xdata,ydata,setData
}
}
}
</script>
<style scoped>
h2{
/* 48像素 */
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart{
/* 高度360 */
height: 4.5rem;
background-color: gray;
}
</style>
动态展示图表
<template>
<div>
<h2>图表1</h2>
<div id="chartDom" class="chart">
容纳后期的图表
</div>
</div>
</template>
<script>
import {inject,onMounted,reactive} from "vue"
export default {
setup() {
// 1.打开echarts的注释
let $echarts= inject("echarts")
let $http= inject("axios")
async function getState(){
data=await $http({url:"chartDataOne"})
}
let data=reactive({})
let xdata=reactive([])
let ydata=reactive([])
function setData(){
console.log("data",data)
xdata=data.data.data.chartData.map(v=>v.title)//名字在y轴展示
ydata=data.data.data.chartData.map(v=>v.num)//数据在x轴展示
console.log("x",xdata)
console.log("y",ydata)
}
onMounted(() => {
getState().then(()=>{
setData()
// 2.吧图表展示放到数据请求成功当中 并且传入对应数据
let myChart = $echarts.init(document.getElementById("chartDom"));
myChart.setOption({
xAxis:{
type:"value"
},
yAxis:{
type:"category",
// 2.插入数据
data:xdata
},
series:[
{
data:ydata,
type:"bar"
}
]
})
})
})
return {
getState,data,xdata,ydata,setData
}
}
}
</script>
<style scoped>
h2{
/* 48像素 */
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart{
/* 高度360 */
height: 4.5rem;
background-color: gray;
}
</style>
添加echarts
echart图表本身是提供了一个resize
的函数的。是当浏览器发生resize事件的时候,让其触发echart的resize事件,重绘canvas。
用window.onresize = myChart.resize; 可以完成自适应,就是把window的onresize事件赋值为echart的resize事件
<template>
<div>
<h2>图表1</h2>
<div id="chartDom" class="chart">
容纳后期的图表
</div>
</div>
</template>
<script>
import {inject,onMounted,reactive} from "vue"
export default {
setup() {
let $echarts= inject("echarts")
let $http= inject("axios")
async function getState(){
data=await $http({url:"chartDataOne"})
}
let data=reactive({})
let xdata=reactive([])
let ydata=reactive([])
function setData(){
console.log("data",data)
xdata=data.data.data.chartData.map(v=>v.title)
ydata=data.data.data.chartData.map(v=>v.num)
console.log("x",xdata)
console.log("y",ydata)
}
onMounted(() => {
getState().then(()=>{
setData()
let myChart = $echarts.init(document.getElementById("chartDom"));
myChart.setOption({
xAxis:{
type:"value"
},
yAxis:{
type:"category",
data:xdata
},
series:[
{
data:ydata,
type:"bar"
}
]
})
// 让echarts根据浏览器大小改变动态该改变
window.onresize = function () {//自适应大小
myChart.resize();
};
})
})
return {
getState,data,xdata,ydata,setData
}
}
}
</script>
<style scoped>
h2{
/* 48像素 */
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart{
/* 高度360 */
height: 4.5rem;
background-color: gray;
}
</style>
图表一样式修改
柱状图圆角与线段渐变色设置
在components下的itemOne.vue
<template>
<div>
<h2>图表1</h2>
<div id="chartDom" class="chart">
容纳后期的图表
</div>
</div>
</template>
<script>
import {inject,onMounted,reactive} from "vue"
export default {
setup() {
let $echarts= inject("echarts")
let $http= inject("axios")
async function getState(){
data=await $http({url:"chartDataOne"})
}
let data=reactive({})
let xdata=reactive([])
let ydata=reactive([])
function setData(){
console.log("data",data)
xdata=data.data.data.chartData.map(v=>v.title)
ydata=data.data.data.chartData.map(v=>v.num)
console.log("x",xdata)
console.log("y",ydata)
}
onMounted(() => {
getState().then(()=>{
setData()
let myChart = $echarts.init(document.getElementById("chartDom"));
myChart.setOption({
xAxis:{
type:"value"
},
yAxis:{
type:"category",
data:xdata
},
series:[
{
data:ydata,
type:"bar",
// 设置柱状图区域样式
itemStyle: {
normal: {
// 如果传递数组,则需要传递四个元素,依次表示 左上,右上,右下、左下
barBorderRadius: [0,20,20,0],
// color:"red"如果写死值那么是一个固定的颜色
// 我们需要设置渐变色使用
// new echarts.graphic.LinearGradient(a,b,c,d,arr)来进行设置
// a ,b,c,d为0,1
// a:1 arr中的颜色右到左
// c:1 arr中的颜色左到右
// b:1 arr中的颜色下到上
// d:1 arr中的颜色上到下
color:new $echarts.graphic.LinearGradient(0,0,1,0,[
{
offset:0,
color:'#005eaa'
},
{
offset:0.5,
color:'#339ca8'
},
{
offset:1,
color:'#cda819'
}
])
}
}
},
]
})
window.onresize = function () {
myChart.resize();
};
})
})
return {
getState,data,xdata,ydata,setData
}
}
}
</script>
<style scoped>
h2{
/* 48像素 */
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart{
/* 高度360 */
height: 4.5rem;
background-color: gray;
}
</style>
柱状图的柱状的位置与上面显示文字
<template>
<div>
<h2>图表1</h2>
<div id="chartDom" class="chart">
容纳后期的图表
</div>
</div>
</template>
<script>
import {inject,onMounted,reactive} from "vue"
export default {
setup() {
let $echarts= inject("echarts")
let $http= inject("axios")
async function getState(){
data=await $http({url:"chartDataOne"})
}
let data=reactive({})
let xdata=reactive([])
let ydata=reactive([])
function setData(){
console.log("data",data)
xdata=data.data.data.chartData.map(v=>v.title)
ydata=data.data.data.chartData.map(v=>v.num)
console.log("x",xdata)
console.log("y",ydata)
}
onMounted(() => {
getState().then(()=>{
setData()
let myChart = $echarts.init(document.getElementById("chartDom"));
myChart.setOption({
xAxis:{
// 设置坐标轴上文字颜色
axisLine:{
lineStyle:{
color:"#fff"
}
},
type:"value"
},
yAxis:{
// 设置坐标轴上文字颜色
axisLine:{
lineStyle:{
color:"#fff"
}
},
type:"category",
data:xdata
},
// 配置图标的位置 不包含坐标轴中的文字
grid:{
top:'3%',
left:'1%',
bottom:'3%',
right:'6%',
containLabel:true // 包含坐标轴中的文字
},
series:[
{
data:ydata,
type:"bar",
// 设置图形上的文字
label:{
show:true, // 显示数值
position:'right',//位置
textStyle:{
color:'#fff'
}
},
itemStyle: {
normal: {
barBorderRadius: [0,20,20,0],
// 我们需要设置渐变色使用
// new echarts.graphic.LinearGradient(a,b,c,d,arr)来进行设置
// a ,b,c,d为0,1
// a:1 arr中的颜色右到左
// c:1 arr中的颜色左到右
// b:1 arr中的颜色下到上
// d:1 arr中的颜色上到下
color:new $echarts.graphic.LinearGradient(0,0,1,0,[
{
offset:0,
color:'#005eaa'
},
{
offset:0.5,
color:'#339ca8'
},
{
offset:1,
color:'#cda819'
}
])
}
},
},
]
})
})
})
return {
getState,data,xdata,ydata,setData
}
}
}
</script>
<style scoped>
h2{
/* 48像素 */
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart{
/* 高度360 */
height: 4.5rem;
/* background-color: gray; */
}
</style>
图表2 地图展示
如果要展示地图那么需要中国地图的矢量数据与省份数据 在public中的map文件夹已经提供了
由于数据实在我们本地 所以 我们在启动项目的时候可以直接在浏览器上输入
http://localhost:8080/map/china.json即可看到数据
我们在components文件夹下创建一个mapPage.vue组件用来容纳地图。同时在views下的homePage.vue中引用调用并且在页面中间的div中使用
<template>
<div class="map">
map
</div>
</template>
<script>
export default {
}
</script>
<style lang="less">
.map{
width: 100%;
height: 100%;
}
</style>
获取地图数据
因为我们在项目中app.vue中 设置了 请求基准路径
axios.defaults.baseURL="http://localhost:3000/"
所以我们不能在使用全局的axiso 否则会使用基准路径完成请求
我们单独引用axios进行数据的请求
<template>
<div class="map">
map
</div>
</template>
<script>
// 1.引用
import axios from "axios"
import {onMounted,reactive} from "vue"
export default {
setup(){
// 2.设置请求 并且创建变量接收获取来的数据 不要忘了报漏
let mapData=reactive({})
async function getState(){
mapData=await axios.get("http://localhost:8080/map/china.json")
}
onMounted(()=>{
// 3发送请求
getState().then(()=>{
console.log("map",mapData)
})
})
return {
mapData
}
}
}
</script>
<style lang="less">
.map{
width: 100%;
height: 100%;
}
</style>
设置地图
echarts.registerMap(名字,数据)
<template>
<div class="map" id='map'>
map
</div>
</template>
<script>
import axios from "axios"
// 1.引用
import {onMounted,reactive,inject} from "vue"
export default {
setup(){
// 2.得到echarts
let $echarts= inject("echarts")
let mapData=reactive({})
async function getState(){
mapData=await axios.get("http://localhost:8080/map/china.json")
}
onMounted(()=>{
getState().then(()=>{
console.log("map",mapData)
// 3.设置地图
$echarts.registerMap('china', mapData.data);
var chart = $echarts.init(document.getElementById('map'));
chart.setOption({
geo: {
map: 'china'
}
});
})
})
return {
mapData
}
}
}
</script>
<style lang="less">
.map{
width: 100%;
height: 100%;
}
</style>
设置地图样式
<template>
<div class="map" id='map'>
map
</div>
</template>
<script>
import axios from "axios"
import {onMounted,reactive,inject} from "vue"
export default {
setup(){
let $echarts= inject("echarts")
let mapData=reactive({})
async function getState(){
mapData=await axios.get("http://localhost:8080/map/china.json")
}
onMounted(()=>{
getState().then(()=>{
console.log("map",mapData)
$echarts.registerMap('china', mapData.data);
var chart = $echarts.init(document.getElementById('map'));
chart.setOption({
geo: {
map: 'china',
itemStyle:{//地图区域的多边形 图形样式
areaColor:"#0099ff",//地图区域的颜色。
borderColor:"#00ffff",//图形的描边颜色。
shadowColor: 'rgba(230,130, 70, 0.5)',//橙色
shadowBlur: 30,//图形阴影的模糊大小
emphasis: {//高亮状态下的多边形和标签样式。
focus: 'self'//在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果self'self' 只聚焦(不淡出)当前高亮的数据的图形。
}
}
},
});
})
})
return {
mapData
}
}
}
</script>
在地图上设置散点标记图
<template>
<div class="map" id="map">map</div>
</template>
<script>
import axios from "axios";
import { onMounted, reactive, inject } from "vue";
export default {
setup() {
let $echarts = inject("echarts");
let mapData = reactive({});
async function getState() {
mapData = await axios.get("http://localhost:8080/map/china.json");
}
onMounted(() => {
getState().then(() => {
console.log("map", mapData);
$echarts.registerMap("china", mapData.data);
var chart = $echarts.init(document.getElementById("map"));
chart.setOption({
geo: {
map: "china",
itemStyle: {
//地图区域的多边形 图形样式
areaColor: "#0099ff", //地图区域的颜色。
borderColor: "#00ffff", //图形的描边颜色。
shadowColor: "rgba(230,130, 70, 0.5)", //橙色
shadowBlur: 30, //图形阴影的模糊大小
emphasis: {
//高亮状态下的多边形和标签样式。
focus: "self", //在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果self'self' 只聚焦(不淡出)当前高亮的数据的图形。
},
},
},
series: [
{
type: "scatter",//类型散点图
itemStyle: {//散点图的颜色
color:"red",
},
name: "所在城市销售额",
coordinateSystem: "geo",//该系列使用的坐标系 geo使用地理坐标系
data: [
{ name: "北京", value: [116.46, 39.92, 4367] },
{ name: "上海", value: [121.48, 31.22, 8675] },
{ name: "深圳", value: [114.07, 22.62, 2461] },
{ name: "广州", value: [113.23, 23.16, 187] },
{ name: "西安", value: [108.45, 34, 3421] },
],
},
],
// tooltip: {
// trigger: "item",
// },
// visualMap: {
// type: "continuous", // 连续型
// min: 100, // 值域最小值,必须参数
// max: 5000, // 值域最大值,必须参数
// calculable: true, // 是否启用滑动空间
// inRange: {
// color: ["#50a3ba", "#eac736", "#d94e5d"], // 指定数值从低到高时的颜色变化
// },
// textStyle: {
// color: "#fff", // 值域控件的文本颜色
// },
// },
});
});
});
return {
mapData,
};
},
};
</script>
<style lang="less">
.map {
width: 100%;
height: 100%;
}
</style>
设置提示框组件的视觉映射效果(地图左下角效果)
<template>
<div class="map" id="map">map</div>
</template>
<script>
import axios from "axios";
import { onMounted, reactive, inject } from "vue";
export default {
setup() {
let $echarts = inject("echarts");
let mapData = reactive({});
async function getState() {
mapData = await axios.get("http://localhost:8080/map/china.json");
}
onMounted(() => {
getState().then(() => {
console.log("map", mapData);
$echarts.registerMap("china", mapData.data);
var chart = $echarts.init(document.getElementById("map"));
chart.setOption({
geo: {
map: "china",
itemStyle: {
areaColor: "#0099ff",
borderColor: "#00ffff",
shadowColor: "rgba(230,130, 70, 0.5)",
shadowBlur: 30,
emphasis: {
focus: "self",
},
},
},
series: [
{
type: "scatter",
itemStyle: {
color:"red",
},
name: "所在城市销售额",
coordinateSystem: "geo",
data: [
{ name: "北京", value: [116.46, 39.92, 4367] },
{ name: "上海", value: [121.48, 31.22, 8675] },
{ name: "深圳", value: [114.07, 22.62, 2461] },
{ name: "广州", value: [113.23, 23.16, 187] },
{ name: "西安", value: [108.45, 34, 3421] },
],
},
],
tooltip: {//提示框组件。
trigger: "item",
},
visualMap: {//是视觉映射组件就是地图左下角的选择器
type: "continuous", // 连续型
min: 100, // 值域最小值,必须参数
max: 5000, // 值域最大值,必须参数
calculable: true, // 是否启用滑动空间
inRange: {
color: ["#50a3ba", "#eac736", "#d94e5d"], // 指定数值从低到高时的颜色变化
},
textStyle: {
color: "#fff", // 值域控件的文本颜色
},
},
});
});
});
return {
mapData,
};
},
};
</script>
<style lang="less">
.map {
width: 100%;
height: 100%;
}
</style>
图表3 产品库存统计分析图
获取数据
在components下的itemThree.vue
<template>
<div>
<h2>图表1</h2>
<div id="chartDomb" class="chart">
</div>
</div>
</template>
<script>
import {inject,onMounted,reactive} from "vue"
export default {
setup() {
// 1.设置echarts设置axios 创建接受请求的变量
let $echarts= inject("echarts")
let $http= inject("axios")
let data=reactive({})
// 2.获取数据
async function getState(){
data=await $http({url:"three/data"})
}
return{
getState,data
}
}
}
</script>
<style scoped>
h2 {
/* 48像素 */
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart {
/* 高度360 */
height: 4.5rem;
/* background-color: gray; */
}
</style>
动态生成图表
<template>
<div>
<h2>图表1</h2>
<div id="chartDomb" class="chart">
</div>
</div>
</template>
<script>
import {inject,onMounted,reactive} from "vue"
export default {
setup() {
let $echarts= inject("echarts")
let $http= inject("axios")
let data=reactive({})
async function getState(){
data=await $http({url:"three/data"})
}
// 1.在dom加载完毕后动态展示图表
onMounted(()=>{
// 2.发送请求
getState().then(()=>{
console.log("饼状图",data.data.data)
// 初始化echarts
let myChart = $echarts.init(document.getElementById("chartDomb"));
myChart.setOption({
legend: {//设置图例
top: 'bottom'//放到最下面
},
series: [
{
// name: 'Nightingale Chart',
type: 'pie',//饼图
radius: [10, 100],//饼图的半径数组的第一项是内半径,第二项是外半径
center: ['50%', '45%'],//饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。
roseType: 'area',//设置成玫瑰图
itemStyle: {
borderRadius: 10//用于指定饼图扇形区块的内外圆角半径,
},
data: data.data.data.chartData//数据
}
]
})
})
return{
getState,data
}
})
}
}
</script>
<style scoped>
h2 {
/* 48像素 */
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart {
/* 高度360 */
height: 4.5rem;
/* background-color: gray; */
}
</style>
类别分析图样式修改
<template>
<div>
<h2>图表1</h2>
<div id="chartDomb" class="chart">
</div>
</div>
</template>
<script>
import {inject,onMounted,reactive} from "vue"
export default {
setup() {
let $echarts= inject("echarts")
let $http= inject("axios")
let data=reactive({})
async function getState(){
data=await $http({url:"three/data"})
}
onMounted(()=>{
getState().then(()=>{
console.log("饼状图",data.data)
let myChart = $echarts.init(document.getElementById("chartDomb"));
myChart.setOption({
legend: {
top: 'bottom'
},
series: [
{
type: 'pie',
radius: [10, 100],
center: ['50%', '45%'],
roseType: 'area',
itemStyle: {
borderRadius: 10
},
data: data.data.data.chartData
}
],
// 设置饼状图的颜色
color:['#c12e34', '#e6b600', '#0098d9','#2b821d','#005eaa','#339ca8'],
//提示框,鼠标悬浮交互时的信息提示
tooltip : {
show: true,//默认值true,可选为:true(显示) | false(隐藏)
borderRadius: 10,//提示边框圆角,单位px,默认为4
},
})
})
return{
getState,data
}
})
}
}
</script>
<style scoped>
h2 {
/* 48像素 */
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart {
/* 高度360 */
height: 4.5rem;
/* background-color: gray; */
}
</style>
图表4 产品月销图
数据获取
在components文件夹下的itemTwo.vue中进行设置
<template>
<div>
<h2>图表1</h2>
<div id="chartDomb" class="chart">
</div>
</div>
</template>
<script>
import {inject,onMounted,reactive} from "vue"
export default {
setup() {
// 1.设置echarts设置axios 创建接受请求的变量
let $echarts= inject("echarts")
let $http= inject("axios")
let data=reactive({})
// 2.获取数据
async function getState(){
data=await $http({url:"two/data"})
}
return{
getState,data
}
}
}
</script>
<style scoped>
h2 {
/* 48像素 */
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart {
/* 高度360 */
height: 4.5rem;
/* background-color: gray; */
}
</style>
动态生成基本折线图
<template>
<div>
<h2>图表1</h2>
<div id="chartDomc" class="chart">
</div>
</div>
</template>
<script>
import {inject,onMounted,reactive} from "vue"
export default {
setup() {
let $echarts= inject("echarts")
let $http= inject("axios")
let data=reactive({})
async function getState(){
data=await $http({url:"two/data"})
}
// 1.在dom加载完毕后动态展示图表
onMounted(()=>{
// 2.发送请求
getState().then(()=>{
console.log("折线图",data.data)
// 初始化echarts
let myChart = $echarts.init(document.getElementById("chartDomc"));
myChart.setOption({
// 设置x轴内容
xAxis: [
{
type: "category",
boundaryGap: false,//折线图与y轴距离false 没有距离
data: data.data.data.chartData.day,
},
],
// 设置y轴内容
yAxis: [
{
type: "value",
},
],
series: [
// 设置服饰的折线图
{
name: "服饰",
type: "line",
data:data.data.data.chartData.num.Chemicals
},
{
name: "数码",
type: "line",
data:data.data.data.chartData.num.Clothes
},
{
name: "家电",
type: "line",
data:data.data.data.chartData.num.Electrical
},
{
name: "家居",
type: "line",
data:data.data.data.chartData.num.digit
},
{
name: "日化",
type: "line",
data:data.data.data.chartData.num.gear
},
]
})
})
return{
getState,data
}
})
}
}
</script>
<style scoped>
h2 {
/* 48像素 */
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart {
/* 高度360 */
height: 4.5rem;
/* background-color: gray; */
}
</style>
折线图样式设置
<template>
<div>
<h2>图表1</h2>
<div id="chartDomc" class="chart">
</div>
</div>
</template>
<script>
import {inject,onMounted,reactive} from "vue"
export default {
setup() {
let $echarts= inject("echarts")
let $http= inject("axios")
let data=reactive({})
async function getState(){
data=await $http({url:"two/data"})
}
onMounted(()=>{
getState().then(()=>{
console.log("折线图",data.data)
let myChart = $echarts.init(document.getElementById("chartDomc"));
myChart.setOption({
xAxis: [
{
type: "category",
boundaryGap: false,
data: data.data.data.chartData.day,
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "服饰",
type: "line",
data:data.data.data.chartData.num.Chemicals,
stack: "Total",//数据堆叠
smooth: true,//折线图平滑效果 变成曲线图
showSymbol: false,// 隐藏所有数据点
areaStyle: {//设置填充区域的样式
opacity: 0.8,
color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(128, 255, 165)",
},
{
offset: 1,
color: "rgb(1, 191, 236)",
},
]),
},
lineStyle: { // 设置线段样式
width: 0,
},
emphasis: {//设置高亮的图形样式和标签样式
focus: "series",//只显示选中的内容高亮
},
},
{
name: "数码",
type: "line",
data:data.data.data.chartData.num.Clothes,
stack: "Total",//数据堆叠
smooth: true,//折线图平滑效果 变成曲线图
showSymbol: false,// 隐藏所有数据点
areaStyle: {
opacity: 0.8,
color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(0, 221, 255)",
},
{
offset: 1,
color: "rgb(77, 119, 255)",
},
]),
},
lineStyle: { // 设置线段样式
width: 0,
},
emphasis: {//设置高亮的图形样式和标签样式
focus: "series",//只显示选中的内容高亮
},
},
{
name: "家电",
type: "line",
data:data.data.data.chartData.num.Electrical,
stack: "Total",//数据堆叠
smooth: true,//折线图平滑效果 变成曲线图
showSymbol: false,// 隐藏所有数据点
areaStyle: {
opacity: 0.8,
color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(55, 162, 255)",
},
{
offset: 1,
color: "rgb(116, 21, 219)",
},
]),
},
lineStyle: { // 设置线段样式
width: 0,
},
emphasis: {//设置高亮的图形样式和标签样式
focus: "series",//只显示选中的内容高亮
},
},
{
name: "家居",
type: "line",
data:data.data.data.chartData.num.digit,
stack: "Total",//数据堆叠
smooth: true,//折线图平滑效果 变成曲线图
showSymbol: false,// 隐藏所有数据点
areaStyle: {
opacity: 0.8,
color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(255, 0, 135)",
},
{
offset: 1,
color: "rgb(135, 0, 157)",
},
]),
},
lineStyle: { // 设置线段样式
width: 0,
},
emphasis: {//设置高亮的图形样式和标签样式
focus: "series",//只显示选中的内容高亮
},
},
{
name: "日化",
type: "line",
data:data.data.data.chartData.num.gear,
stack: "Total",//数据堆叠
smooth: true,//折线图平滑效果 变成曲线图
showSymbol: false,// 隐藏所有数据点
areaStyle: {
opacity: 0.8,
color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(255, 191, 0)",
},
{
offset: 1,
color: "rgb(224, 62, 76)",
},
]),
},
lineStyle: { // 设置线段样式
width: 0,
},
emphasis: {//设置高亮的图形样式和标签样式
focus: "series",//只显示选中的内容高亮
},
},
]
})
})
return{
getState,data
}
})
}
}
</script>
<style scoped>
h2 {
/* 48像素 */
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart {
/* 高度360 */
height: 4.5rem;
/* background-color: gray; */
}
</style>
优化
设置提示框等信息
<template>
<div>
<h2>图表1</h2>
<div id="chartDomc" class="chart"></div>
</div>
</template>
<script>
import { inject, onMounted, reactive } from "vue";
export default {
setup() {
let $echarts = inject("echarts");
let $http = inject("axios");
let data = reactive({});
async function getState() {
data = await $http({ url: "two/data" });
}
onMounted(() => {
getState().then(() => {
console.log("折线图", data.data);
let myChart = $echarts.init(document.getElementById("chartDomc"));
myChart.setOption({
tooltip: { //提示框组件
trigger: "axis",//触发类型。坐标轴触发
axisPointer: {//坐标轴指示器配置项
type: "cross",//指示器类型 十字准星指示器
label: {//坐标轴指示器的文本标签
backgroundColor: "#e6b600",//文本标签的背景颜色就是x轴y轴上的内容
},
},
},
legend: {
data: ["服饰", "数码", "家电", "家居", "日化"],
},
// toolbox: {//下载
// feature: {
// saveAsImage: {},
// },
// },
grid: {//组件离容器的距离
left: "1%",
right: "4%",
bottom: "3%",
containLabel: true,//grid 区域是否包含坐标轴的刻度标签
},
xAxis: [
{
// 设置坐标轴上文字颜色
axisLine:{
lineStyle:{
color:"#fff"
}
},
type: "category",
boundaryGap: false,
data: data.data.data.chartData.day,
},
],
yAxis: [
{
// 设置坐标轴上文字颜色
axisLine:{
lineStyle:{
color:"#fff"
}
},
type: "value",
},
],
series: [
{
name: "服饰",
type: "line",
data: data.data.data.chartData.num.Chemicals,
stack: "Total", //数据堆叠
smooth: true, //折线图平滑效果 变成曲线图
showSymbol: false, // 隐藏所有数据点
areaStyle: {
//设置填充区域的样式
opacity: 0.8,
color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(128, 255, 165)",
},
{
offset: 1,
color: "rgb(1, 191, 236)",
},
]),
},
lineStyle: {
// 设置线段样式
width: 0,
},
emphasis: {
//设置高亮的图形样式和标签样式
focus: "series", //只显示选中的内容高亮
},
},
{
name: "数码",
type: "line",
data: data.data.data.chartData.num.Clothes,
stack: "Total", //数据堆叠
smooth: true, //折线图平滑效果 变成曲线图
showSymbol: false, // 隐藏所有数据点
areaStyle: {
opacity: 0.8,
color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(0, 221, 255)",
},
{
offset: 1,
color: "rgb(77, 119, 255)",
},
]),
},
lineStyle: {
// 设置线段样式
width: 0,
},
emphasis: {
//设置高亮的图形样式和标签样式
focus: "series", //只显示选中的内容高亮
},
},
{
name: "家电",
type: "line",
data: data.data.data.chartData.num.Electrical,
stack: "Total", //数据堆叠
smooth: true, //折线图平滑效果 变成曲线图
showSymbol: false, // 隐藏所有数据点
areaStyle: {
opacity: 0.8,
color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(55, 162, 255)",
},
{
offset: 1,
color: "rgb(116, 21, 219)",
},
]),
},
lineStyle: {
// 设置线段样式
width: 0,
},
emphasis: {
//设置高亮的图形样式和标签样式
focus: "series", //只显示选中的内容高亮
},
},
{
name: "家居",
type: "line",
data: data.data.data.chartData.num.digit,
stack: "Total", //数据堆叠
smooth: true, //折线图平滑效果 变成曲线图
showSymbol: false, // 隐藏所有数据点
areaStyle: {
opacity: 0.8,
color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(255, 0, 135)",
},
{
offset: 1,
color: "rgb(135, 0, 157)",
},
]),
},
lineStyle: {
// 设置线段样式
width: 0,
},
emphasis: {
//设置高亮的图形样式和标签样式
focus: "series", //只显示选中的内容高亮
},
},
{
name: "日化",
type: "line",
data: data.data.data.chartData.num.gear,
stack: "Total", //数据堆叠
smooth: true, //折线图平滑效果 变成曲线图
showSymbol: false, // 隐藏所有数据点
areaStyle: {
opacity: 0.8,
color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(255, 191, 0)",
},
{
offset: 1,
color: "rgb(224, 62, 76)",
},
]),
},
lineStyle: {
// 设置线段样式
width: 0,
},
emphasis: {
//设置高亮的图形样式和标签样式
focus: "series", //只显示选中的内容高亮
},
},
],
});
});
return {
getState,
data,
};
});
},
};
</script>
<style scoped>
h2 {
/* 48像素 */
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart {
/* 高度360 */
height: 4.5rem;
/* background-color: gray; */
}
</style>
图表5 产品库存统计图
基本柱状图
<template>
<div>
<h2>图表1</h2>
<div id="chartDomd" class="chart">
</div>
</div>
</template>
<script>
import {inject,onMounted,reactive} from "vue"
export default {
setup() {
let $echarts= inject("echarts")
let $http= inject("axios")
let data=reactive({})
async function getState(){
data=await $http({url:"four/data"})
}
// 1.在dom加载完毕后动态展示图表
onMounted(()=>{
// 2.发送请求
getState().then(()=>{
console.log("柱状图",data.data)
// 初始化echarts
let myChart = $echarts.init(document.getElementById("chartDomd"));
myChart.setOption({
xAxis: {
type: "category",
data: data.data.data.chartData.day,
},
yAxis: {
type: "value",
},
series: [
{
name:"服饰",
type: "bar",
data:data.data.data.chartData.num.Chemicals,
}
]
})
})
return{
getState,data
}
})
}
}
</script>
<style scoped>
h2 {
/* 48像素 */
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart {
/* 高度360 */
height: 4.5rem;
/* background-color: gray; */
}
</style>
完成堆叠效果
template>
<div>
<h2>图表1</h2>
<div id="chartDomd" class="chart"></div>
</div>
</template>
<script>
import { inject, onMounted, reactive } from "vue";
export default {
setup() {
let $echarts = inject("echarts");
let $http = inject("axios");
let data = reactive({});
async function getState() {
data = await $http({ url: "four/data" });
}
onMounted(() => {
getState().then(() => {
console.log("柱状图", data.data);
let myChart = $echarts.init(document.getElementById("chartDomd"));
myChart.setOption({
xAxis: {
type: "category",
data: data.data.data.chartData.day,
},
yAxis: {
type: "value",
},
series: [
{
name: "服饰",
type: "bar",
data: data.data.data.chartData.num.Chemicals,
stack: "total",//数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置
},
{
name: "数码",
type: "bar",
data: data.data.data.chartData.num.Clothes,
stack: "total",//数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置
},
{
name: "家电",
type: "bar",
data: data.data.data.chartData.num.Electrical,
stack: "total",//数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置
},
{
name: "家居",
type: "bar",
data: data.data.data.chartData.num.digit,
stack: "total",//数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置
},
{
name: "日化",
type: "bar",
data: data.data.data.chartData.num.gear,
stack: "total",//数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置
},
],
});
});
return {
getState,
data,
};
});
},
};
</script>
<style scoped>
h2 {
/* 48像素 */
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart {
/* 高度360 */
height: 4.5rem;
/* background-color: gray; */
}
</style>
样式优化
<template>
<div>
<h2>图表1</h2>
<div id="chartDomd" class="chart"></div>
</div>
</template>
<script>
import { inject, onMounted, reactive } from "vue";
export default {
setup() {
let $echarts = inject("echarts");
let $http = inject("axios");
let data = reactive({});
async function getState() {
data = await $http({ url: "four/data" });
}
onMounted(() => {
getState().then(() => {
console.log("柱状图", data.data);
let myChart = $echarts.init(document.getElementById("chartDomd"));
myChart.setOption({
xAxis: {
// 设置坐标轴上文字颜色
axisLine:{
lineStyle:{
color:"#fff"
}
},
type: "category",
data: data.data.data.chartData.day,
},
yAxis: {
// 设置坐标轴上文字颜色
axisLine:{
lineStyle:{
color:"#fff"
}
},
type: "value",
},
tooltip: {
trigger: "axis",
axisPointer: {//设置鼠标选中样式为阴影
type: "shadow",
},
},
legend: {},//图例
grid: {//位置
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,//设置包含坐标轴
},
series: [
{
name: "服饰",
type: "bar",
data: data.data.data.chartData.num.Chemicals,
stack: "total",
label: {
//图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。
show: true,
},
emphasis: {
//高亮的图形样式和标签样式。
focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
},
},
{
name: "数码",
type: "bar",
data: data.data.data.chartData.num.Clothes,
stack: "total",
label: {
//图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。
show: true,
},
emphasis: {
//高亮的图形样式和标签样式。
focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
},
},
{
name: "家电",
type: "bar",
data: data.data.data.chartData.num.Electrical,
stack: "total",
label: {
//图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。
show: true,
},
emphasis: {
//高亮的图形样式和标签样式。
focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
},
},
{
name: "家居",
type: "bar",
data: data.data.data.chartData.num.digit,
stack: "total",
label: {
//图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。
show: true,
},
emphasis: {
//高亮的图形样式和标签样式。
focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
},
},
{
name: "日化",
type: "bar",
data: data.data.data.chartData.num.gear,
stack: "total",
label: {
//图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。
show: true,
},
emphasis: {
//高亮的图形样式和标签样式。
focus: "series", //聚焦当前高亮的数据所在的系列的所有图形。
},
},
],
});
});
return {
getState,
data,
};
});
},
};
</script>
<style scoped>
h2 {
/* 48像素 */
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
}
.chart {
/* 高度360 */
height: 4.5rem;
/* background-color: gray; */
}
</style>
项目打包
vue项目中大家在运行的时候我们是需要用内置的devServer帮助我们自动项目 开发过程中没有问题
但是 我们所写的项目今后是需要上公网让用户访问的 所以我们需要把项目放在性能更好的服务器上运行
还有就是 我们所写的是.vue文件 浏览器不认识 没有办法直接解析
所以我们就绪要对当前项目 进行打包 就是把项目编译成 html css js 方便我们把项目放到服务器上也方便浏览器解析
打包流程
1.npm run build命令打包 但是会发现打包之后资源路径有问题
2.修改静态资源路径 publicPath
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? './'
: '/'
}
3.修改路由模式为hash
// 1.需要引入
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'// 2.修改配置
const router = createRouter({
history: createWebHashHistory(process.env.BASE_URL),
routes
})
服务器购买与连接
在购买ECS服务器后,系统会创建一个ECS实例。每一个ECS实例对应一台已购买的云服务器。您可以通过电脑上自带的终端工具访问云服务器,进行应用部署和环境搭建。
-
在ECS实例列表页面,选择实例的所属地域。
-
找到目标实例,然后在操作列选择【更多】> 【密码/密钥】 > 【重置实例密码】,然后在弹出的对话框设置ECS实例的登录密码
3.在弹出的页面,单击【立即重启】使新密码生效。
4.在ECS实例列表页面,复制ECS实例的公网IP地址。
5.连接远程桌面
(1)方式1 浏览器直接访问
即可连接
(2)远程桌面方式
在电脑的开始中搜索远程桌面
nginx服务器使用
Nginx是一个http服务器。是一个高性能的http服务器及反向代理服务器。官方测试nginx能够支支撑5万并发链接,并且cpu、内存等资源消耗却非常低,运行非常稳定。
代理服务器
代理服务器,客户机在发送请求时,不会直接发送给目的主机,而是先发送给代理服务器,代理服务接受客户机请求之后,再向主机发出,并接收目的主机返回的数据,存放在代理服务器的硬盘中,再发送给客户机。
注意
我们学习的vue的跨域 是基于脚手架内置服务器的 但是我们打包之后这个服务器就不帮助我们启动服务了 所以我们之前配置的跨域设置就作废了
使用
1.解压出nginx得到如下内容
2.打开conf文件夹 复制一份nginx.conf文件 并且修改名字(名字随便起) 这个文件就是nginx的配置文件
3.打开Powershell cd到当前nginx路径下 输入 ./nginx.exe -c ./conf/你复制的文件名.conf 启动
4.打开浏览器输入localhost:80即可启动
使用小扩展
记得如果修改服务器内容了 要停止之后在重新启动
打开Powershell cd到当前nginx路径下 输入 ./nginx.exe -c ./conf/你复制的文件名.conf -s stop 停止
69. 项目运行
1.把我们打包好的dist放到根路径下
2.修改我们的.conf文件
3.配置端口
4.在电脑浏览器尝试使用 你的公网ip加端口访问
如不行 重新启动(不要忘了先关闭nginx) 运行浏览器即可看见
后端上线
同前端方式