本文章解決的問題如下：
能夠在Django框架下使用echarts.js制作簡單的可視化展示
本文章環(huán)境需要：
echarts官方主頁 ： http://echarts.baidu.com/index.html
echarts.js下載?：?http://echarts.baidu.com/download.html
搜索887934385交流群，進(jìn)入后下載資料工具安裝包等。最后，感謝觀看！
https://jq.qq.com/?_wv=1027&k=55RAtTB
下載文件后放進(jìn)自己的靜態(tài)文件文件夾中，比方說
然后在需要使用的html頁面中進(jìn)行關(guān)聯(lián)，比方說
注意,靜態(tài)文件的位置一定要確定好，一定要弄清楚相對位置和絕對位置的含義，如果位置錯誤則會顯示找不到靜態(tài)包
我在這里示例一個百度官方的echarts.js的使用
注意,靜態(tài)文件的位置一定要確定好，一定要弄清楚相對位置和絕對位置的含義，如果位置錯誤則會顯示找不到靜態(tài)包
我在這里示例一個百度官方的echarts.js的使用
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <title>ECharts</title>
? ? <!-- 引入 echarts.js -->
? ? <script src="echarts.min.js"></script>
</head>
<body>
? ? <!-- 為ECharts準(zhǔn)備一個具備大小（寬高）的Dom -->
? ? <div id="main" style="width: 600px;height:400px;"></div>
? ? <script type="text/javascript">
? ? ? ? // 基于準(zhǔn)備好的dom，初始化echarts實例
? ? ? ? var myChart = echarts.init(document.getElementById('main'));
? ? ? ? // 指定圖表的配置項和數(shù)據(jù)
? ? ? ? var option = {
? ? ? ? ? ? title: {
? ? ? ? ? ? ? ? text: 'ECharts 入門示例'
? ? ? ? ? ? },
? ? ? ? ? ? tooltip: {},
? ? ? ? ? ? legend: {
? ? ? ? ? ? ? ? data:['銷量']
? ? ? ? ? ? },
? ? ? ? ? ? xAxis: {
? ? ? ? ? ? ? ? data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
? ? ? ? ? ? },
? ? ? ? ? ? yAxis: {},
? ? ? ? ? ? series: [{
? ? ? ? ? ? ? ? name: '銷量',
? ? ? ? ? ? ? ? type: 'bar',
? ? ? ? ? ? ? ? data: [5, 20, 36, 10, 10, 20]
? ? ? ? ? ? }]
? ? ? ? };
? ? ? ? // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
? ? ? ? myChart.setOption(option);
? ? </script>
</body>
</html>
然后實現(xiàn)
我們可以嘗試一個進(jìn)階圖例，圖例代碼來源：http://gallery.echartsjs.com/editor.html?c=xH1PiorBb-
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <title>ECharts</title>
? ? <!-- 引入 echarts.js -->
? ? <script src="echarts.min.js"></script>
</head>
<body>
? ? <!-- 為ECharts準(zhǔn)備一個具備大?。▽捀撸┑腄om -->
? ? <div id="main" style="width: 600px;height:400px;"></div>
? ? <script type="text/javascript">
? ? ? ? // 基于準(zhǔn)備好的dom，初始化echarts實例
? ? ? ? var myChart = echarts.init(document.getElementById('main'));
? ? ? ? // 指定圖表的配置項和數(shù)據(jù)
? ? ? ? ? var base = +new Date(2014, 9, 3, 0);
? var oneDay = 600000;
? var date = [];
? var data = [];
? for (var i = 0; i < 144; i++) {
? ? ? var now = new Date(base += oneDay);
? ? ? date.push([now.getHours(), now.getMinutes()].join(':'));
? ? ? data.push(Math.floor(Math.random() * (1000 + 1 - 400) + 400));
? }
? date.unshift(0.0);
? data.unshift(500);
? option = {
? ? ? color: ['#6EE4C2'],
? ? ? tooltip: {
? ? ? ? ? trigger: 'axis',
? ? ? ? ? axisPointer: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
? ? ? ? ? ? ? type: 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
? ? ? ? ? }
? ? ? },
? ? ? title: {
? ? ? ? ? text: 'xx館每日進(jìn)出人次統(tǒng)計',
? ? ? },
? ? ? dataZoom: [{
? ? ? ? ? type: 'inside',
? ? ? ? ? start: 0,
? ? ? ? ? end: 100
? ? ? }],
? ? ? grid: {
? ? ? ? ? left: '3%',
? ? ? ? ? right: '4%',
? ? ? ? ? bottom: '3%',
? ? ? ? ? containLabel: true
? ? ? },
? ? ? toolbox: {
? ? ? ? ? show: true,
? ? ? ? ? feature: {
? ? ? ? ? ? ? restore: {
? ? ? ? ? ? ? ? ? show: true
? ? ? ? ? ? ? },
? ? ? ? ? ? ? magicType: {
? ? ? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? ? ? type: ['line', 'bar', 'stack', 'tiled']
? ? ? ? ? ? ? },
? ? ? ? ? }
? ? ? },
? ? ? xAxis: [{
? ? ? ? ? name: '日期',
? ? ? ? ? type: 'category',
? ? ? ? ? data: date,
? ? ? ? ? axisTick: {
? ? ? ? ? ? ? alignWithLabel: true
? ? ? ? ? }
? ? ? }],
? ? ? yAxis: [{
? ? ? ? ? name: '進(jìn)出人次',
? ? ? ? ? type: 'value'
? ? ? }],
? ? ? series: [{
? ? ? ? ? name: '圖書館每日進(jìn)出人次統(tǒng)計',
? ? ? ? ? type: 'bar',
? ? ? ? ? barWidth: '60%',
? ? ? ? ? data: data
? ?? ? ? }]
?? ? ? };
? ? ? ? // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
? ? ? ? myChart.setOption(option);
? ? </script>
</body>
</html>
然后顯示效果為：
這樣就完成了echarts在html頁面中的調(diào)用，有人肯定就會說，我要怎么在模版頁面里面使用echarts？
而不是霸占整個頁面？ 其實就是給這個圖表一個容器就可以了。
我拿我自己的軟件舉一個例子：
現(xiàn)在看到我其中的一個頁面是這樣的，但是echarts并不是霸占整個頁面，是因為我給網(wǎng)頁中的所有元素都設(shè)置了容器。
可以看到這個圖表就是在容器內(nèi)
通過上圖就可以看到我相關(guān)圖表的代碼，這其中涉及到了前端框架Bootstrap的相關(guān)技術(shù)
我簡要解釋一下： 1.代碼中的row的容器代表我設(shè)置了一列容器?2.col-md-12的容器代表其占比是100%
3. 最后設(shè)置該圖表id是echarts1（因為我在同一個頁面設(shè)置了多個echarts），其圖表的長寬分別是1600px和400px
通過容器的概念，我們就可以任意的在某個地方放置我們的echarts了
肯定還會有人問，那你的echarts配置語句呢？怎么只看到容器？
我的語句統(tǒng)一放在html頁面下方，通過容器id=echarts1與圖表js語句關(guān)聯(lián)。?
簡單總結(jié):
1. 下載echarts.js文件，并導(dǎo)入項目，讓項目找得到它
2. 調(diào)用echarts文件，具體調(diào)用方法見百度官方使用說明：http://echarts.baidu.com/tutorial.htmlO#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
3.給一個網(wǎng)頁容器把echarts裝進(jìn)去，更加美觀
4.前端都涉及Html，CSS，JS等，只要不調(diào)用數(shù)據(jù)庫和后臺就涉及不到Django，所以放心的按照官方來做
下一章講如何使用Django調(diào)用數(shù)據(jù)庫給前臺的echarts
