1. 静态文件的建立,可以在app01项目下新建一个static文件夹存放静态文件
2. 在html中首行添加命令导入静态文件,静态文件导入如下
{% load static %}
3. js里面画图
function int(){ } 里面是一个完整的图的代码,代码来源于echarts
$(function () {
init();
})
function init() {
var colors = ['#FF6347','#228B22']
var histogramChart1 = echarts.init(document.getElementById('histogramChart1'));
histogramChart1.setOption({
legend: {
left: 30,
top: 5,
textStyle: {color: '#C0C0C0'},
},
toolbox: {
feature: {
saveAsImage: {
title: '下载',
backgroundColor: "RGB(8, 24, 50, 1)",
}
},
iconStyle: {
borderColor: "rgba(248, 245, 245, 1)"
},
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return `${params.data.name} <br />时长:${params.data.value}s`
}
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [15, 90],
center: ['50%', '60%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{value: 511, name: 'rose 1'},
{value: 0, name: 'rose 2'},
{value: 224, name: 'rose 3'},
{value: 30, name: 'rose 4'},
{value: 28, name: 'rose 5'},
{value: 26, name: 'rose 6'},
{value: 22, name: 'rose 7'},
{value: 18, name: 'rose 8'}
]
}
]
})
}