echarts标准写法

步骤1：引入echarts

步骤2：准备一个呈现图表的盒子

步骤3：初始化echarts实例对象

步骤4：准备配置项

步骤5：将配置项设置给echarts实例对象

data(){
    return {
        chartInstance: null,
        allData: null,
        totalPage:0,
        currentPage:1,
        timerId:null
    }
},
methods:{
    //初始化echartInstance对象
    initChart(){
        this.chartInstance=this.$echarts.init(this.$refs.seller_ref)
    },
    //获取数据
    async getData(){
        const {data:ret} = await this.$http.get('seller)
        this.allData = ret
        this.totalPage=this.allData.length%5===0?this.allData.length/5:this.addData.length/5+1
        this.updateChart()
        this.startInterVal()
    },

    updateChart(){
        const start=(this.currentPage-1)*5
        const end =this.currentPage*5
        const showData=this.allData.slice(start,end)
        const sellerNames= this.showData.map((item)=>{return item.name})
        const sellerValues= this.showData.map((item)=>{return item.value})
        const option={
            xAxis:{type:'value'},
            yAxis:{
                type:'catogry',
                data:sellerNames
            },
            series:[
                {
                    type:'bar',
                    data:sellerValues
                }
            ]
        }
        this.chartInstance.setOption(option)
    },
    startInterVal(){
        this.timerId=setInterval(()=>{
            this.currentPage=1
            if(this.currentPage>this.totalPage){
                this.currentPage=1
            }
            this.updateChart()
        },3000)
    }
}

initChart()

getData()

updateChart(){}

主题设置:

1. 内置主题：echarts中默认内置了两套主题：light dark;

在初始化对象方法init中可以指明：var chart = echarts.init(dom,'light');

2. 自定义主题：在主题编辑器中编辑主题，下载主题，是一个js文件；引入js主题；在init中使用

自适应：

myChart.setOption(option)
//监听window的窗口大小的事件
//写法一：
window.onresize=function(){
    myChart.resize()
}
//写法二:
window.onresize=myChart.resize();

加载动画：

1. 显示加载动画：myChart.showLoading()

2.隐藏加载动画：myCharts.hideLoading()

增量动画

myCharts.setOption(option)

setOption可以设置多次

新的option和旧的option的关系不是相互覆盖的关系，是相互整合的关系

我们在设置新的option的时候，只需要考虑到变化的部分就可以了

比如：option={ series:[{data:newArr}]}

        myCharts.setOption(option);

xDaraArr.push('‘小明’)；

yDataArr.push(90)

option ={

xAxis:{data:xDataArr},

series:[{data:yDataArr}]

}

myCharts.setOption(option);