参考博客: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) # 返回字典