Echarts在开发中的应用

Echart简介

  ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
  ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。2018年3月全球著名开源社区Apache宣布百度ECharts进入Apache孵化器。

Echart基本使用

点击进入>>> echarts官方网站

安装echarts

cnpm install echarts --save

配置echarts

全局配置

# main.js
    
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts

单个配置

# 在vue页面script标签中引入
import * as echarts from "echarts";

使用

  以生成下面的图为例，我们打开Echarts官网，找一个合适的图，点击进入，然后查看源代码，复制所有源码到vue-cli中。生成静态的图表很简单，所以，我们的数据都是来源于数据库，下面就是构造图标所需要的数据了。（星期和数量）

在Django视图中构造数据

观察图表，我们想要生成近七天的用户增量（模拟数据）,还要获取每天对应的星期，构造数据。

def get_week_day(date):
    week_day_dict = {
        0: 'Mon',
        1: 'Tue',
        2: 'Wed',
        3: 'Thu',
        4: 'Fri',
        5: 'Sat',
        6: 'Sun',
    }
    day = date.weekday()
    return week_day_dict[day]


class UserIncreaseView(APIView):
    """
    用户日增量
    """

    def get(self, request):
        """
        增量数据构造
        :param request:
        :return: 数据
        """
        count_list = []
        now = datetime.datetime.now()
        week_list = []
        for i in range(6, -1, -1):
            start = datetime.datetime.strftime(now - datetime.timedelta(days=i), '%Y-%m-%d 00:00:00')
            end = datetime.datetime.strftime(now - datetime.timedelta(days=i - 1), '%Y-%m-%d 00:00:00')
            count = User.objects.filter(date_joined__gte=start, date_joined__lte=end).count()
            count_list.append(count)
            week_list.append(get_week_day(now - datetime.timedelta(days=i)))
        return Response({'week_list': week_list, 'count_list': count_list})

数据结构展示

# 从接口获取到的Json数据
{
    "week_list": [
        "Thu",
        "Fri",
        "Sat",
        "Sun",
        "Mon",
        "Tue",
        "Wed"
    ],
    "count_list": [
        1,
        0,
        0,
        1,
        0,
        0,
        0
    ]
}

Vue中动态展示数据

  vue中数据是双向绑定的，我们给数据赋值后发现依然展示的是原数据，不是我们从接口中读到的数据，这时候就需要我们对图表中的数据进行监听了，且为深度监听。当然也可以试试直接赋值，如果可以的话，那就很简单了。

<template>
  <div>
    <!-- 用户日增量图表   -->
    <el-tabs type="border-card">
      <el-tab-pane label="用户日增量">
        <div id="userIncrease" style="width: 800px; height: 400px"></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>


  export default {
    data() {
      return {
        option: {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [1, 2, 3, 4, 5, 6, 7],
            type: 'line',
            smooth: true
          },]
        }
      };
    },
    methods: {
      // 初始化
      init() {
        let myChart = this.$echarts.init(document.getElementById('userIncrease'))
        this.option && myChart.setOption(this.option);
      },
      // 用户日增量
      userIncr() {
        this.axios.get('sadmin/userIncrease/').then(res => {
          this.option.series[0].data = res.data.count_list
          this.option.xAxis['data'] = res.data.week_list
        })
      }
    },
    mounted() {
      this.userIncr()
    },
    watch:{
      option:{
        handler(newVal,oldVal){
          if (this.myChart){
            if(newVal){
              this.myChart.setOption(newVal,true)
            }else{
              this.myChart.setOption(oldVal,true)
            }
          }else{
            this.init();
          }
        },
        deep:true
      }
    }
  };
</script>

<style scoped>

</style>

效果展示

用户数据比较少，展示的是七天前到今天的用户增加量。

总结

  Echarts是一个很好的图表展示软件，兼容很多浏览器，日常生活中我们所见到的大图都可以用它来完成，所以，深度的学习大家可以参见官方文档。感谢观看！！！

PS： 你们学废了嘛！！！