1大屏适配 使用vue：
https://blog.csdn.net/qq_38210427/article/details/130345981
2 布局
使用flex 布局，分成三部分
布局使用px即可
2.1 添加背景图
2.2 服务订单
分头部和body
头部是文字，body 里边是ul>li
3 vue中使用echarts
1 安装 ：cnpm install echarts --save
2 引入
全局引入
局部引入 哪使用引用到那
3 定一个盒子，盒子得有宽和高
<div class="cicle" ref="cicdom"></div>
.cicle {
width: 100%;
height: 210px;
}4 使用
mounted () {
this.cicEchart()
},
methods: {
cicEchart () {
this.myChart = echarts.init(this.$refs.cicdom)
const option = {
....
}
this.myChart.setOption(option)
}
}4 饼图的基本配置
echarts 饼图 基本配置_喵喵酱仔__的博客-CSDN博客
cicEchart () {
this.myChart = echarts.init(this.$refs.cicdom)
const option = {
tooltip: {
trigger: 'item'
},
legend: { // 图例设置
type: 'scroll',
orient: 'vertical', // 位置
show: true,
left: 20,
top: 0,
bottom: 20,
textStyle: { // 文字样式
color: '#fff',
fontSize: 14
}
},
color: ['#45C2E0', '#C1EBDD', '#FFC851', '#5A5476', '#FF9393'], // 饼图颜色
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: { color: 'inherit' }, // 扇形颜色和文字颜色保持一致
center: ['60%', '50%'], // 这个属性调整图像的位置！！！！！
data: [
{
value: 1048,
name: 'Search Engine'
},
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
}
this.myChart.setOption(option)
},5 饼图基本配置
zheEchart () {
this.myChart = echarts.init(this.$refs.zheDom)
const option = {
xAxis: {
type: 'category',
boundaryGap: false, // 紧挨边缘
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
// 轴刻度
axisLabel: {
show: true,
textStyle: {
color: '#75bcff'
}
},
// 轴线
axisLine: {
lineStyle: {
color: '#5b7b80'
}
},
splitLine: {
// 显示垂直网格线
show: true,
lineStyle: {
color: '#75bcff'
}
}
},
yAxis: {
type: 'value',
// 轴刻度
axisLabel: {
show: true,
textStyle: {
color: '#75bcff'
}
},
// 轴线
axisLine: {
lineStyle: {
color: '#5b7b80'
}
},
// 显示垂直网格线
splitLine: {
show: false
}
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {
// 阴影面积
color: '#135877'
},
// 数据连线的线设置
itemStyle: {
normal: {
lineStyle: {
color: '#58b0f0'
}
}
}
}
]
}
this.myChart.setOption(option)
}6 使用地图
echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图_echart 地图_无知的小菜鸡的博客-CSDN博客
7 vue实现循环滚动列表vue-seamless-scroll
在线演示： chenxuan0000
1、首先下载插件
npm install vue-seamless-scroll --save
2、在需要的页面引入、使用配置
import vueSeamlessScroll from 'vue-seamless-scroll'
//注册组件
components: {
vueSeamlessScroll
},
3、代码如下
<template>
<vue-seamless-scroll
:data="arr"
class="seamless-warp"
:class-option="classOption"
>
<table cellspacing="0" cellpadding="0">
<tr
v-for="(item, index) in arr"
:key="index"
style="border: 1px dashed #ffffff;width:100%"
>
<td class="tab_title">{{ item.number }}</td>
<td class="tab_title">{{ item.name }}</td>
<td class="tab_title">{{ item.kind }}</td>
<td class="tab_title">{{ item.value }}</td>
<td class="tab_title">{{ item.result }}</td>
<td class="" style="width:30%">{{ item.time }}</td>
</tr>
</table>
</vue-seamless-scroll>
</template>
export default {
data(){
return{
arr:[数据.........]
},
computed:{
classOption() {
return {
step: 0.4, // 数值越大速度滚动越快
limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 43, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 2000 // 单步运动停止的时间(默认值1000ms)
};
},
}
}
<style>
.seamless-warp {
height: 500px;
overflow: hidden;
}
</style>注意：需要给父容器一个
height和:data='Array'和overfolw:hidden;左右滚动需要给ul容器一个初始化css width。
注意事项
- vue-seamless-scroll
滚动数据data必须设置，否则将不会滚动。样式需要设置高度与overflow: hidden; - 单步运动停止的高度
单步运动停止的高度应该为单行数据高度的整数倍，在文章示例中就是<tr>高度的整数倍。当设置为整数倍时，列表文字都可以清楚展示看做为无缝滚动，否则就会出现文字展示不全的问题。 - 单行数据添加点击事件无效
一般情况下我们会把点击事件添加到循环行<tr>上，但是由于此组件的原因，点击事件会出现问题。解决方法，给父元素绑定事件，在子元素上进行事件捕获。
- 父元素绑定事件：父容器添加click事件showInfo，如果需要传入其他参数，showInfo可以改为showInfo($event, param)，param为传入参数
- 在循环行上添加自定义的 data-x 属性
- 在事件showInfo中通过鼠标事件e与自定义属性进行查找
showInfo(e) {
let idx = e.target.parentNode.dataset.index;
console.log(this.list[idx]) //点击行数据
// e：鼠标事件，e.target：点击元素(<td>)，e.target.parentNode：点击元素父元素(<tr>)，e.target.parentNode.dataset：自定义属性位置
}
- 页面存在定时器，数据实时刷新时，数据量(list.length)减少，由可滚动数据量变为不可滚动，页面显示依然滚动，limitMoveNum未生效。
在vue-seamless-scroll增加key属性，避免组件复用，每次数据请求时刷新key。key可以定义为当前时间（new Date().getTime()）。
报错：vue-seamless-scroll报错“TypeError: Cannot read properties of undefined (reading ‘innerHTML‘)“”
但报错“报错“TypeError: Cannot read properties of undefined (reading 'innerHTML')"””，数据在mouted中定义数据，就不会报错
<script>
export default {
data () {
return {
listData: []
}
},
computed: {
optionHover () {
return {
hoverStop: false
}
}
},
mounted() {
this.listData={
'title': '无缝滚动第一行无缝滚动第一行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第二行无缝滚动第二行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第三行无缝滚动第三行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第四行无缝滚动第四行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第五行无缝滚动第五行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第六行无缝滚动第六行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第七行无缝滚动第七行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第八行无缝滚动第八行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第九行无缝滚动第九行',
'date': '2017-12-16'
}
},
}
</script>隔行换色
<vueSeamlessScroll :data="List"
:class-option="optionSingleHeight"
:key="new Date().getTime()"
class="seamless-warp">
<ul class="con"
v-for="(item, index) in List"
:key="index"
:class="index % 2 == 0 ? 'bg_color' : ''">
<li>{{ item.time }}</li>
<li>{{ item.name }}</li>
<li>{{ item.worh }}</li>
<li>{{ item.tel }}</li>
<li>{{ item.status }}</li>
</ul>
</vueSeamlessScroll>
.bg_color {
background-color: #174769;
}
7257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
