Echarts的使用方法

1.安装Echarts

npm install echarts

2.引入echarts文件

import * as echarts from "echarts"

3.在组件中发送请求，请求echarts相关数据，并做处理，得到图标所需的数据

4.定义一个容器

5.设置echarts配置option（可参考官网配置，做响应修改）

Examples - Apache ECharts

6.初始化图表

将配好的配置放到上面定义的容器中

const E= echarts.init(容器Dom /this.$refs.useEcharts)

7.绘制图标

E.setOption(配置名 option)

 mounted () {
   getData().then(res=>{
      console.log(res)
     const {code,data}=res.data;
     if(code===20000){
       this.tableData=data.tableData     
    //  折线图数据
     const order=data.orderData
     const xData=order.date
     const keyArray= Object.keys(order.data[0])
     const seriseData=[]
     keyArray.forEach(key=>{
       seriseData.push({
         name:key,
         data:order.data.map(item=>item[key]),
         type:"line"
       })
     })

    //  折线图配置
     const option={
       xAxis:{
         data:xData
       },
       yAxis:{},
       series:seriseData
     }
    //  初始化 放到容器中 
   const Z=  echarts.init(this.$refs.echarts)
  //  绘图 
   Z.setOption(option)
}
}