入职了新公司，回归写静态页面了，但是不一样的是这次有了UI，审美这一块有人给订好了，一个字爽。
前言
由于以前没有那么在意页面的颜值所以都是套各种库组件，这次有了UI出图，只要把精力专注在写代码上就行了。
总结
字体引入
iconfont使用过，这个里就很简单了了解iconfont点这里
首先看一下颜值
- 默认
- 使用
颜值是不是高了很多。
使用方法也很简单：
- 找ui要字体，然后下载下来，得到的文件类型为.ttf
- @font-face去引入并使用
// 引入字体
@font-face {
font-family: 'numberFont'; /* Project id 3159656 */
src: url('../../font/font.ttf');
}
// 使用
font-family: 'numberFont';
icon使用
从UI切出来的图片主要以svg的形式去使用，然后问题就来了（选中时候，icon也要有颜色变化）。
- 问题复现
图标并没有变化，我的解决办法是通过iconfont去操作
- 问题解决
解决方法：
- 自己传图去iconfont
- 找UI去传推荐找UI传，以后要改啥的或者复用都很方便
echarts
对于图表有很多选择
- vue-echarts
- highcharts
- echarts 但是我只选echarts,因为懒
折线图
- UI给的
- 我画的
这里因为太菜了，实现不了显示的标签为UI给的那样，代码如下
<script lang="ts">
import { reactive, toRefs, getCurrentInstance, ref, onMounted } from 'vue';
import { date } from '@/utils/date';
import * as echarts from 'echarts/core';
import {
TitleComponent,
TitleComponentOption,
ToolboxComponent,
ToolboxComponentOption,
TooltipComponent,
TooltipComponentOption,
GridComponent,
GridComponentOption,
LegendComponent,
LegendComponentOption
} from 'echarts/components';
import { LineChart, LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
TitleComponent,
ToolboxComponent,
TooltipComponent,
GridComponent,
LegendComponent,
LineChart,
CanvasRenderer,
UniversalTransition
]);
type EChartsOption = echarts.ComposeOption<
| TitleComponentOption
| ToolboxComponentOption
| TooltipComponentOption
| GridComponentOption
| LegendComponentOption
| LineSeriesOption
>;
export default {
setup(props:any,context:any) {
const state = reactive({
searchClass: '2',
timeBetween: [
new Date().getTime() - 7*24*60*60*1000,
new Date().getTime()
]
});
onMounted(() => {
setEcharts();
});
// 画布数据倒入
const setEcharts = () => {
var chartDom = document.getElementById('three')!;
var myChart = echarts.init(chartDom);
var option: EChartsOption;
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['总计','xxx','yyy'],
right: 0,
top: 0,
align: 'right'
},
grid: {
left: '3%',
right: '0%',
bottom: '16px',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: true,
axisLine:{
show: false,
},
axisTick:{
show: false
},
axisLabel:{
color:'#606266',
fontSize:14,
fontWeight: 400,
},
offset:10,
data: ['2021.11.30', '2021.11.31', '2021.12.01', '2021.12.02', '2021.12.03', '2021.12.04', '2021.12.05']
},
yAxis: {
type: 'value',
offset: 10
},
color: [ '#07BF26', '#F17F23', '#068EF1' ],
series: [
{
name: '总计',
type: 'line',
stack: 'Total',
symbolSize:9,
lineStyle:{
width:1
},
data: [10, 57, 44, 17, 60, 35, 53]
},
{
name: 'xxx',
type: 'line',
stack: 'Total',
symbolSize:9,
lineStyle:{
width:1
},
data: [10, 37, 12, 12, 36, 10, 20]
},
{
name: 'yyy',
type: 'line',
stack: 'Total',
symbolSize:9,
lineStyle:{
width:1
},
data: [0, 20, 32, 5, 24, 25, 33]
}
]
};
option && myChart.setOption(option);
};
// 时间区间改变事件
const changeTime = () => {
console.log(date(state.timeBetween[0],1),date(state.timeBetween[1],1))
};
const changeClass = () => {
console.log(state.searchClass)
};
return {
...toRefs(state),
changeTime,
changeClass
}
}
}
具体就不细说了echarts有详细的文档；可以自己对着找。
柱状图
- UI给的
- 我画的
大体算是一样吧，写完总结还得回去改，写总结发现很多不一样的地方😂😂，还好写了总结。 上代码：
<script lang="ts">
import { reactive, toRefs, getCurrentInstance, ref, onMounted } from 'vue';
import { date } from '@/utils/date';
import * as echarts from 'echarts/core';
import { GridComponent, GridComponentOption } from 'echarts/components';
import { BarChart, BarSeriesOption } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([GridComponent, BarChart, CanvasRenderer]);
type EChartsOption = echarts.ComposeOption<
GridComponentOption | BarSeriesOption
>;
export default {
setup(props:any,context:any) {
const state = reactive({
searchClass: '1',
timeBetween: [
new Date().getTime() - 7*24*60*60*1000,
new Date().getTime()
],
cumulative: true,
});
onMounted(() => {
setEcharts();
});
// 画布数据倒入
const setEcharts = () => {
var chartDom = document.getElementById('six')!;
var myChart = echarts.init(chartDom);
var option: EChartsOption;
option = {
grid: {
left: '3%',
right: '0%',
bottom: '16px',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: true,
axisLine:{
show: false,
},
axisTick:{
show: false
},
axisLabel:{
color:'#606266',
fontSize:14,
fontWeight: 400,
},
offset:10,
data: ['0-1 min', '1-5 min', '5-15 min', '15-30 min', '30-60 min', '60+ min']
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.8)',
borderWidth: 0,
padding: 2,
formatter: function(params: any, ticket: any, callback: any){
let html = '<div style="height: 54px;color: #ffffff;min-width:152px;font-size: 12px;font-weight: 400;">';
html += '<div style="display: flex;align-items: center;height:18px">';
html += '<div style="margin:0 9px 0 6px;width: 4px;height: 4px;background-color:#07BF26"></div>';
html += '<span>xxx：</span>';
html += `<span style="font-weight: 600;font-family: 'numberFont';">${params[4].value}%</span>`;
html += `<span style="margin:0 8px;opacity: 0.8;font-family: 'numberFont';">${params[1].value}</span>`;
html += '</div>';
html += '<div style="display: flex;align-items: center;height:18px">';
html += '<div style="margin:0 9px 0 6px;width: 4px;height: 4px;background-color:#F17F23"></div>';
html += '<span>yyy：</span>';
html += `<span style="font-weight: 600;font-family: 'numberFont';">${params[3].value}%</span>`;
html += `<span style="margin:0 8px;opacity: 0.8;font-family: 'numberFont';">${params[0].value}</span>`;
html += '</div>';
html += '<div style="display: flex;align-items: center;height:18px">';
html += '<div style="margin:0 9px 0 6px;width: 4px;height: 4px;background-color:#068EF1"></div>';
html += '<span>zzz：</span>';
html += `<span style="font-weight: 600;font-family: 'numberFont';">${params[5].value}%</span>`;
html += `<span style="margin:0 8px;opacity: 0.8;font-family: 'numberFont';">${params[2].value}</span>`;
html += '</div>';
html += '</div>';
console.log(1,params)
console.log(2,ticket)
return html;
}
},
yAxis:[{
type: 'value',
offset: 10,
},
{
type: 'value',
show: false,
min: 0,
max: 100,
position: 'right',
}],
legend: {
right: 0,
top: 0,
align: 'right',
itemWidth: 12,
itemHeight: 6,
data: [ 'xxx', 'yyy', 'zzz' ]
},
color: [ '#F17F23', '#07BF26', '#068EF1', '#ffffff', '#ffffff', '#ffffff' ],
series: [
{
data: [37, 28, 12, 28, 28, 14],
type: 'bar',
name: 'yyy',
barWidth: 20,
yAxisIndex: 0,
itemStyle: {
borderRadius: [2,2,0,0]
}
},
{
data: [ 40, 25, 28, 8, 34, 28],
type: 'bar',
name: 'xxx',
barWidth: 20,
yAxisIndex: 0,
itemStyle: {
borderRadius: [2,2,0,0]
}
},
{
data: [8, 20, 38, 19, 26, 28],
type: 'bar',
name: 'zzz',
barWidth: 20,
yAxisIndex: 0,
itemStyle: {
borderRadius: [2,2,0,0]
}
},
{
data: [ 20, 21, 22, 24, 34, 70],
type: 'bar',
name: 'xxx百分比',
barWidth: 1,
yAxisIndex: 1,
itemStyle: {
opacity: 0
}
},
{
data: [10, 11, 12, 13, 14, 24],
type: 'bar',
name: 'yyy百分比',
barWidth: 1,
yAxisIndex: 1,
itemStyle: {
opacity: 0
}
},
{
data: [30, 20, 40, 45, 46, 48],
type: 'bar',
barGap: '40%',
name: 'zzz百分比',
barWidth: 1,
yAxisIndex: 1,
itemStyle: {
opacity: 0
}
}
]
};
option && myChart.setOption(option);
};
// 时间区间改变事件
const changeTime = () => {
console.log(date(state.timeBetween[0],1),date(state.timeBetween[1],1))
};
const changeClass = () => {
console.log(state.searchClass)
};
const isCumulative = () => {
console.log(state.cumulative)
};
return {
...toRefs(state),
changeTime,
changeClass,
isCumulative
}
}
}
</script>
