# echarts数据可视化
**Repository Path**: huitailang2021/echarts-data-visualization
## Basic Information
- **Project Name**: echarts数据可视化
- **Description**: 用echarts实现疫情数据的大屏展示
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-11-11
- **Last Updated**: 2023-12-11
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# day01 echarts使用
## echarts简单实现
```html
Document
```
## 在项目中实现echarts图表
## 合并对象
- 扩展运算符
- Object.assign()
- lodash合并
# day02 echarts
## 柱状图
```html
```
## 渐变色
## 饼状图
## 折线图
# day03 echarts之大图项目
## 定义字体
```html
北京你好
123456
```
### 世界地图参考
世界地图这两个你可以参考结合下
https://www.makeapie.cn/echarts_content/map-world-dataRange.html
https://www.makeapie.cn/echarts_content/xS1Edb0qnz.html
# day04 大图项目
## 1.datav的使用
安装
```
npm install @jiaminghi/data-view
```
引入
/main.js
```
// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)
```
使用
/views/home.vue
```html
```
## 2.竖直柱状图
## 3.水平柱状图
/src/components/BarOne.vue
```js
import * as echarts from "echarts"
export default {
name: "BarOne",
mounted() {
let myChart = echarts.init(this.$refs.box)
let option = {
//标题
title: {
text: "新增确诊TOP10", //标题内容
left: "50%", //标题位置
textAlign: "center", //文字居中
textStyle: { //文字样式
color: "#fff"
}
},
//网格
grid: {
left:50, //网格位置
bottom: 25
},
//x轴
xAxis: {
type: "category", //类目轴
data: ['英国', '美国', '法国', '德国', '乌克兰', '俄罗斯', '中国', '韩国', '日本', '云南'],
//x轴线
axisLine:{
show:false
},
//x刻度
axisTick:{
show:false
},
// axisLabel:{
// color:"red",
// fontSize:20
// }
},
//y轴
yAxis: {
type: "value", //数值轴
//分割线
splitLine:{
//分割线样式
lineStyle:{
color:"#121c45"
}
},
//y轴轴线
axisLine:{
show:true,
lineStyle:{
color:"#192047"
}
},
//y轴标签
axisLabel:{
color:"#757b90"
}
},
//系列
series: [
{
type: "bar", //柱状图
data: [
{ name: "英国", value: 40000 },
{ name: "美国", value: 38000 },
{ name: "法国", value: 30000 },
{ name: "德国", value: 28000 },
{ name: "乌克兰", value: 26000 },
{ name: "俄罗斯", value: 24000 },
{ name: "中国", value: 20000 },
{ name: "韩国", value: 19000 },
{ name: "日本", value: 17000 },
{ name: "云南", value: 20000 },
],
//柱状图宽度
barWidth:10,
//柱状图样式
itemStyle:{
borderRadius:10, //圆角
color:"#2f89cf" //填充色
}
}
]
}
myChart.setOption(option)
}
}
```
## 4.折线图
/src/components/LineOne.vue
```vue
```
## 5.面积图
/src/components/lineTwo.vue
```
```
## 6.饼状图
/src/components/Pie.vue
```
```
## 7.南丁格尔图
# day05 Canvas语法
ctx.stroke() 描边
ctx.moveTo() 移动画笔
ctx.lineTo() 绘制路径
ctx.strokeStyle 颜色
ctx.fillStyle 填充颜色
## 矩形
ctx.fillRect 填充矩形
ctx.strokeRect 描边矩形
ctx.arc(x,y,r,startAngle,endAngel,true) 弧形
## 坐标系变换
平移
ctx. translate() 坐标轴平移
旋转坐标系
ctx.save()
ctx.rotate() 坐标轴旋转
ctx.reset()
# day06
## 1.大屏适配
### 1.1安装插件
```
npm i lib-flexible
```
### 1.2引入
/main.js
```
import 'lib-flexible/flexible'
```
### 1.3 检测是否引入成功
审查html元素，查看font-size是否变化。如果变化，则引入成功
### 1.4 全局样式设置
app.vue
```css
//检测设备 1024px 1920px
//响应式布局
@media screen and (max-width:1024px) {
html{
font-size: 42px !important;
}
}
@media screen and(min-width:1920px){
html{
font-size: 80px !important;
}
}
```
### 1.6 vscode添加插件
插件名称： px to rem
### 1.7 调整图形的大小
跟随屏幕的缩放，来进行变化
```js
//调整地图的缩放
window.addEventListener("resize",()=>{
myChart.resize()
})
```
## 2.打包上线
### 2.1 打包
生成dist文件夹
```
npm run build
```
### 2.2注册服务器
https://www.sanfengyun.com/
获取账号、IP、密码
### 2.3 用FileZilla链接服务器
