Django+vue-echarts可视化显示_vue django echarts

参考博客：https://segmentfault.com/a/1190000019326252

参考博客：https://blog.csdn.net/zhongguohaoshaonian/article/details/89405546

1. 使用npm安装vue-echarts

2.在vue中main.js文件中引用

import ECharts from 'vue-echarts/components/ECharts'
 
Vue.component('chart', ECharts)

3.在对应的vue文件中引用

<script>
// 折线
import 'echarts/lib/chart/line'
// 饼状图
import 'echarts/lib/chart/pie'
// 柱状图
import 'echarts/lib/chart/bar'
// 提示
import 'echarts/lib/component/tooltip'
// 图例
import 'echarts/lib/component/legend'
// 标题
import 'echarts/lib/component/title'

4.在3中的文件的<template></template>选取适当位置插入

 <div>
        <chart :options="options" :auto-resize="true" />
 </div>

5.在3中文件的数据中初始化options

 data() {
    return {
        options: {}
    }
  }

6.先在3中文件mounted写出方法名，再在methods中写该方法请求ajax

mounted() {
    this.getComOptions()
 }, 
methods: {
 getComOptions() {
    getCom().then(res => {    //此处自己封装ajax
       this.login_options = {   //此处可以直接+echats的options

7.Django按字段返回数据给data(value要求列表)

xlist = UserInfo.objects.order_by("-loginNum").values_list("username").filter(user_type=2)[0:7]  #返回元组
ylist = UserInfo.objects.order_by("-loginNum").values_list("loginNum", flat=True).filter(user_type=2)[0:7] #返回列表
        # xlist = ["a", "b", "c"]   #必须是列表形式返回前端才能显示数据
        # xlist = UserInfo.objects.values("username").filter(user_type=2)  # 返回字典