django中引用Echarts进行图表可视化网页展示出现的相关问题

存在问题:
django中引用Echarts图表进行web网页可视化时出现很多问题,最主要的是图表不显示,调试中报错信息有如下:
1)“Uncaught SyntaxError: Unexpected token <”
2)echarts Uncaught ReferenceError: echarts is not defined
3)Echart Can’t get dom width or height
解决的过程中指向路径错误方面的问题,先后尝试过如下方法:
1)<script src="/static/js/echarts.min.js"></script>改为
这样:<script src="https://lib.baomitu.com/echarts/5.2.0/echarts.common.js"></script>
此处CDN地址为:https://cdn.baomitu.com/echarts
2)将https://echarts.apache.org/zh/download.html里下载的echarts.min.js文件替换为:
https://echarts.apache.org/zh/builder.html里定制的echarts.min.js文件
总之,还尝试了网上各种其他办法,均不成功。


解决方案:
两个重要的位置添加东西,分别是setting.py文件中和html文件中
1)setting.py文件中,一定要配置静态文件路径

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')  
 #此处static文件夹如果不是默认根目录下,则必须将路径根据自己实际路径对上面两个*static*处重新设置填写
STATICFILES_DIRS = [
    ("css", os.path.join(STATIC_ROOT, 'css')),
    ("img", os.path.join(STATIC_ROOT, 'img')),
    ("js", os.path.join(STATIC_ROOT, 'js')),
]

2)html文件中,本来div默认是百分自适应模式,这里必须改为固定的高度和宽度,里面需加入
style="width:600px;height:400px;

div id="chart" style="width:600px;height:400px;"></div>

成功解决!

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Django使用Echarts进行数据可视化的步骤如下: 1. 安装Echarts 可以通过Echarts官方网站下载或者使用CDN引入Echarts库。 2. 将数据从数据库提取出来 在视图函数编写查询数据库的逻辑,将查询结果传递给模板。 3. 在模板引入Echarts库和绘图容器 在模板引入Echarts库和一个HTML元素作为绘图容器,例如: ```html {% extends "base.html" %} {% block content %} <div id="main" style="width: 800px;height:600px;"></div> {% endblock %} {% block scripts %} <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script> {% endblock %} ``` 4. 编写绘图代码 在模板编写JavaScript代码,使用Echarts API绘制图表。 ```javascript {% block scripts %} <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script> <script> var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: '数据可视化' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: {{ labels | safe }} }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: {{ values | safe }} }] }; myChart.setOption(option); </script> {% endblock %} ``` 其,`labels`和`values`是从视图函数传递到模板的数据,分别表示X轴标签和Y轴数据。 5. 运行程序 运行Django服务器,访问对应的页面即可看到Echarts绘制的图表。 以上是简单的步骤,具体实现可以根据自己的需要进行修改和完善。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值