vite/vue-clie配置代理和特殊图表echarts_vite vue-cli vite 代理-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_62902737/article/details/130309184

一、创建项目

1、vite

全局安装vite
```
npm install vite -g
```

创建项目

npm init vite@latest 项目名 --template vue

安装依赖

sass预处理器
```
npm install sass --save-dev
```
路由
```
npm install vue-router@4
```
echarts
```
npm install echarts --save
```

配置依赖

//main.js
import { createApp } from 'vue'
import "./style.css"
import App from './App.vue'
import router from './router'
import * as echarts from 'echarts'
window.echarts=echarts

const app=createApp(App)
app.use(router)
app.mount('#app')

运行
```
npm run dev
```

2、vue-cli

全局安装vue-cli
```
npm install -g @vue/cli
```
创建项目
```
vue create 项目名
```

安装依赖

路由
```
npm install vue-router@4
```
echarts
```
npm install echarts --save
```

运行
```
npm run serve
```

二、代理

1、vite

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: "http://localhost:8000",//目标端口
        changeOrigin: true,//允许跨域
        rewrite: (path) => path.replace(/^\/api/, ""),//使用正则代替端口
      }
    }
  }
})

2、vue-cli

 devServer:{
    proxy:{
      '/api':{
        target:"http://10.112.1.4/:8001",
        changeOrigin:true,
        pathRewrite:{
          '^/api':""
        }
      }
    }
  }

三、特殊图表

1、单轴散点图

单轴散点图需要散点图配合多条单轴来使用

使用场景：

比如每个星期几，每个时间点的产量，这个使用需要单轴散点图\

参数：

option:{
	series,
	singleAxis,
	title
}

series:[
	{//设置一个单轴，一个星期有七天，就有七条单轴
		coordinateSystem:"singleAxis",//选择坐标系为singleAxis坐标系
        data:[
            [0,2],
            [1,4],
            [2,2],
            ...
            [23,4],
            [24,1]
        ],//data为数组，表示一天24小时每个小时的产量，命data数组内每个元素为item数组，item数组的第一个元素为小时，第二个元素为该小时的产量
        singleAxisIndex:0//表示每个单轴的索引
        symbolSize:(item)=>item[1] * 4,//控制气泡的大小
    	type:"scatter"
	},
    {...}x7
],
singleAxis:[
    {
        axisLabel:{
            interval:2//坐标标签每2个隔断
        },
        boundaryGap:false,//俩边不留白
        data:['1h','2h','3h'...,'23h','24h'],
        type:"category",//类目轴，无数据
        top:0%,//根据索引位置，top计算递增，不然坐标轴会堆积
        height:0%,//设置为一样的高度，且必须有高度，不然堆积
        left:0//避免与标题内容重叠
    },
    {...}x7
],
title:[
    {
        textVerticalAlign:'middle',//标题垂直居中
        text:"星期一",
        top:0%//根据索引位置，top计算递增，不然标题会堆积
    },
    {...}x7
]

const update = () => {
    // 所有设备名称
    const machineNames=[]
    allData.value.forEach(item=>{
        if(!machineNames.includes(item.machineName)) machineNames.push(item.machineName) 
    })
    // 计算title
    const titles=machineNames.map((item,index)=>{
        return {
            textVerticalAlign:"middle",
            text:item,
            top:10+index*10+"%"
        }
    })
    const singleAxisData=[]
    // 计算series和singleAxis
    const seriesData=machineNames.map((item1,index1)=>{
        let data=[]
        let singAxisItemData=[]
        allData.value.forEach(item2=>{
            if(item1==item2.machineName){
                item2.showFactProduceRecords.forEach(item3=>{
                    let startTime=new Date(item3.produceCodeStartTime)
                    let endTime=new Date(item3.produceCodeEndTime)
                    let time=((endTime-startTime)/1000).toFixed(2)*1
                    singAxisItemData.push(item3.produceRecordId)
                    data.push([item3.produceRecordId,time])
                })
            }
        })
        singleAxisData.push(singAxisItemData)
        return {
            coordinateSystem:"singleAxis",
            data: data,
            singleAxisIndex:index1,
            symbolSize:function(item){
                return item[1]/10000
            },
            type:"scatter"
        }
    })
    const singleData=singleAxisData.map((item,index)=>{
        return {
            axisLabel:{
                interval:2
            },
            boundaryGap:false,
            data:item,
            typeL:"category",
            top:10+index*10+"%",
            left:150,
            height:"10%"
        }
    })

    const updateOption = {
        series:seriesData,
        title:titles,
        singleAxis:singleData
    }
    console.log(updateOption);
    myChart.value.setOption(updateOption)
}

2.多个饼图

const centerData=[["15%","50%"],["40%", '50%'],['65%', '50%'],['85%', '50%']]
    const seriesData=alldateAllMachineStaus.map((item,index)=>{
        return {
            name:item.date,
            type:"pie",
            radius:50,
            center:centerData[index],
            data:item.value
        }
    })

3.日期饼图

const option={
    legend: {
        data: ['运行', "待机", "离线"],//每个饼图的各占比名字
        bottom: 20//设置位置
    },
   calendar: {
       cellSize: [80,80],
       orient: 'vertical',
       yearLabel: {
           show: true,
           fontSize: 30
       },
       dayLabel: {
           margin: 20,
           firstDay: 1,
           nameMap: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
       },
       monthLabel: {
           show: true
       },
       range: ['2021-10']
   },
    series:[
        {
            type: 'scatter',
            coordinateSystem: 'calendar',
            symbolSize: 0,
            label: {
                show: true,
                offset: [-30, -30],
                fontSize: 14
            },
            data: virtualData//数组，日期加每天总量
        }
        ...pieSeries
    ]
}

//pieSeries 由很多个
{
type: 'pie',
 id: 'pie-' + index,
 center: item[0],
 radius: 30,
coordinateSystem: 'calendar',
label: {
    formatter: '{c}',
	position: 'inside'
   },
data: value//{name,value}
}

4.玫瑰图

 series:[
        {
            type:"pie",
            radius:[50,200],
            center:["50%","50%"],
            roseType:'area',
            itemStyle:{
                borderRadius:8
            },
            data:seriesData
        }