echarts移动端的适配思路

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

yarn add --dev @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)
})