echarts移动端的适配思路
16lz
2021-11-23
echarts移动端的适配思路
常规技巧
1,mate 标签viewport的设置,可以抄淘宝的
打开淘宝,切换成手机,刷新,然后copyhtml,找到mate标签复制
2,JS获取屏幕高度在设置在div上
ducoment.ducomenElement.clientWidth
3,设定宽高比
const width=document.documentElement.clientWidth
main.style.width=`${width}px`
main.style.height=`${width*1.2}px`
echarts提供的功能
baseOption+media
baseOption:是共用属性
media是查询属性
query:查询条件
option:放样式
myChart.setOption({
baseOption: {
xAxis: {
type: 'category',
data: date
},
yAxis: {
type: 'value'
},
series: [
{
lineStyle: {
color: '#c9c9c9',
},
itemStyle: {
borderWidth: 5
},
data: values,
type: 'line'
}
]
},
media: [{
query:{
maxWidth:500
},
option:{
series: [
{
lineStyle: {
color: '#c0c9c9',
},
itemStyle: {
borderWidth: 30
},
data: values,
type: 'line'
}
]
}
}]
})
echarts 改外观
配合安装的@type/echarts
点击事件的处理
myChart.on('click',(e)=>{
console.log(e)//e包含所有的事件信息
window.open('www.baidu.com')
})
点样式
线样式
添加数据
let isLoading=false;//这是一个阻挡变量
buttonId.addEventListener('click',()=>{
if(isLoading===true){return}
myChart.showLoading()
isLoading=true
setTimeout(()=>{
date=[...date,createKey()]
values=[...values,createValue()]
myChart.setOption({
xAxis:{ data: date},
series:[{data: values}]
})
myChart.hideLoading()
isLoading=false
},3000)
})
更多相关文章
- 古籍排版CSS样式
- 鼠标悬停伪类的理解
- 自定义导航条样式
- 使用定位、flex与grid布局仿酒仙网手机端页面
- css与javascript重难点,学前端,基础不好一切白费!
- HTML常用元素样式、定位学习与应用
- 使用flex、grid跟定位布局仿一个简易的淘宝手机端静态页面
- Form注册表单 选择器权重计算及上下文选择器
- 注册表单选,择器权重的计算过程,上下文选择器