后台管理Echarts、时间线

1.查看物流进度

主要用到了Element UI中的时间线组件

代码如下：

{
     { activity.context }}

注：timestamp:主要用于显示时间进度的属性

2.数据统计功能

主要用到了Echarts图表库

2.1 初识数据可视化技术

• chrome浏览器支持绘图技术：canvas,svg,webGL

• chrome浏览器支持的渲染引擎：skia,openGL

• 数据可视化需要会的技术：D3.js、HighCharts、Echarts、Three.js、WebGL，canvas, webGL, CSS3动画效

• Echarts介绍:ECharts是一款基于JavaScript的数据可视化图表库。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，

2.2 Echarts如何使用

第一步：下载安装echarts.min.js

下载链接：https://echarts.apache.org/zh/download.html

第二步:引入echarts并创建一个存放图表的div容器

第三步：创建化图表对象

  var myChart = echarts.init(dom对象);
  
 例如：  var myChart = echarts.init(document.getElementById('main'));

第四：指定图表配置项

  // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

第五步：将配置项指定给某个图表对象

 // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

2.3 在vue中使用Echarts

• 第一步：安装echarts

 npm install echarts

• 在需要的组件中引入Echarts

// 引入echarts
import * as Echarts from 'echarts'

• 第三步：创建一个div容器并创建化图表对象

html:
  //创建一个div容器
	

    
JS:
 //创建化图表对象
 let myChart = Echarts.init(this.$refs.box);

• 第四步：指定配置项

  const option=await getEchartsAPI()
 //合并图表初始数据和从接口返回的数据
   let optionData={...this.initData,...option}

• 第五步：将配置项指定给某个图表对象

 //指定配置给myChart图表对象
      myChart.setOption(optionData)

• 完整代码如下：

//图表api接口JS
export function getEchartsAPI() {
  return request({
    url: 'reports/type/1',
    method:'GET'
  })
}

//vue组件代码