Django+vue-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 => {    //此处自己封装ajaxthis.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)  # 返回字典

Django+vue-echarts可视化显示相关推荐

三维交互可视化平台（智慧海上牧场平台）学习开发Flask+Vue+Echarts+Mysql+websocket 实战（四）
前言三维交互可视化平台(智慧海上牧场平台)学习开发之Vue(一) 三维交互可视化平台(智慧海上牧场平台)学习开发之Flask+Vue+Mysql(二) 三维交互可视化平台(智慧海上牧场平台)学习开发 ...
Vue项目9：Vue Cli项目使用echarts可视化
Vue Cli项目使用echarts可视化有两种方式:一.直接引入echarts 二.使用vue-ehcarts. 一.直接引入echarts 1.创建Vue Cli项目进入cmd命令行,输入如 ...
Django + vue 开发接口自动化可视化平台
Django + vue 开发接口自动化可视化平台界面演示接口详情环境管理变量管理定时任务定时任务结果任务结果详情 UML 图表 #体验地址: http://1.12.224.200/ ...
（二）最新版Django项目数据库迁移；读取数据库增添删改；以及显示在html或vue前端（Django+Vue+Mysql，数据库管理数据分析网站）
目录 1.创建django项目 2.数据库的增添删改 (1).创建models (2).数据库迁移数据库迁移的两大命令: (3).Django处理数据库 1)查询 url配置: 输入网址 2)增删改 ...
echarts可视化市级地图详细版(vue+element)
echarts可视化市级地图详细版(vue+element) 非常详细的echarts可视化地图,可全国可市级,各种属性踩了好几天的坑,一步一步归纳总结出来的 1.效果图代码如下 import e ...
初试vue写echarts可视化布局
初试vue写echarts可视化布局项目初始化创建全局样式表并导入iconfont字体文件全局挂载echarts对象初始化ScreenPage主体视图页面和各个组件配置路由主屏幕的布局分析 ...
Vue项目引入Echarts可视化图表库教程踩坑
Apache ECharts是一个基于 JavaScript 的开源可视化图表库,ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. ...
Vue+Echarts构建可视化大数据平台实战项目（上）粒子动效，登录界面抖动，背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
Vue+Echarts数据可视化(面积图)
Vue+Echarts数据可视化(面积图) 最近公司开发需要使用Echarts来进行数据展示,稍微记录一下.先看效果图: 话不多说,直接上代码: 1.使用npm下载安装Echarts依赖(下载速度慢可 ...
Vue Echarts 显示地图且根据坐标设置标注点
Vue Echarts 显示地图且根据坐标设置标注点哎哟我去我就想用Echarts在页面上画一张地图,这张地图显示全国,然后我有几个坐标点的经纬度信息,需要在这个地图上根据经纬度标注在Echart ...

Django+vue-echarts可视化显示

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

1. 使用npm安装vue-echarts

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

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

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

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

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

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

Django+vue-echarts可视化显示相关推荐

最新文章

热门文章