后台管理Echarts、时间线

最新推荐文章于 2023-11-09 16:59:20 发布

Tiam-2016

最新推荐文章于 2023-11-09 16:59:20 发布

阅读量620

点赞数

文章标签： vue 可视化

本文链接：https://blog.csdn.net/Y_Tiam/article/details/116495397

版权

1.查看物流进度

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

代码如下：

<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:timestamp="activity.time"
   >
{{ activity.context }}
</el-timeline-item>
</el-timeline>
注：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容器

<!DOCTYPE html>
<html lang="en">
<head>
</head>

<body>
    <!-- 存放图表的div容器  -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <!-- 引入echarts -->
    <script src="./echarts.min.js"></script>
</body>
</html>

第三步：创建化图表对象

  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容器
	<div ref="box" style="width: 900px; height: 400px"></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组件代码
<template>
  <div>
    <bread-crumb level1="数据统计" level2="数据报表"></bread-crumb>
    <!-- 卡片视图 -->
    <el-card>
      <div ref="box" style="width: 900px; height: 400px"></div>
    </el-card>
  </div>
</template>

<script>
// 引入echarts
import * as Echarts from "echarts";
//调数据报表接口
import {getEchartsAPI} from '@/http/api'
export default {
  name: "report",
  data() {
    return {
      //图表的初始数据
      initData: {
        title: {
          text: '用户来源'
        },
        tooltip: {
          backgroundColor: "rgba(0,0,0,0.3)",
          borderColor: "rgba(0,0,0,0)",
          textStyle:{
            color:"#fff"
          },
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ]
      }
    };
  },
  created() {
    // this.$nextTick(()=>{
    //   this.getEcharts()
    // })
  },

  //DOM加载后再触发
  mounted() {
    this.getEcharts();
  },
  methods: {
   async getEcharts() {
      //创建化Echrts对象
      let myChart = Echarts.init(this.$refs.box);
      //调用图表配置接口并返回图表配置数据
      const option=await getEchartsAPI()
      //合并图表初始数据和从接口返回的数据，如何合并多个对象？？
      let optionData={...this.initData,...option}

      //指定配置给myChart图表对象
      myChart.setOption(optionData)
    },
  },
};
</script>

<style lang="scss"></style>

Tiam-2016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
后台管理Echarts、时间线

1.查看物流进度主要用到了Element UI中的时间线组件代码如下：<el-timeline><el-timeline-itemv-for="(activity, index) in activities":key="index":timestamp="activity.time" >{{ activity.context }}</el-timeline-item></el-timeline&g
复制链接

扫一扫