本文目录一览：
- 1、echarts.js是什么
- 2、如何在django中使用Echarts的js文件
- 3、ECharts js收费吗？
- 4、运行Echarts.js报错，啥原因？
- 5、echarts.js一个页面如何加载多个图表？
- 6、echarts 怎样用js自定义图表数据
echarts.js是什么
是一个 百度旗下 使用各种图表展示统计分析结果的js插件
引入这个js，你就可以使用echarts官网上提供的所有图表工具
官网链接：网页链接
如图所示：
如何在django中使用Echarts的js文件
1. 选择正确的echarts.js，开发版选择echarts.baidu.com上的源码版，避免出现问题
2. 在项目主目录中新建static文件夹，里面建立js、css、images文件夹
3. 在settings文件中新增如下代码配置：
复制代码
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
('css', os.path.join(STATIC_ROOT, 'css').replace('\', '/')),
('js', os.path.join(STATIC_ROOT, 'js').replace('\', '/')),
('images', os.path.join(STATIC_ROOT, 'images').replace('\', '/')),
)
复制代码
4. 在html页面引入本地js文件static/js/echarts.js
script type="text/javascript" src="/static/js/echarts.js"/script
5. 启动python Django服务器
python3 manage.py runserver
6. 刷新页面，OK
成功将网络echarts.js文件改成引用本地echarts.js文件
ECharts js收费吗？
ECharts 是百度提供的免费开源图表库，不收费。
但是如果需求定制的话，可以联系作者或者相关服务商会收取一些费用。
运行Echarts.js报错，啥原因？
以前使用echarts.js都是到官网上下载，然后放在项目中引用，没有问题。
现在写一个c++程序，想输出一个html,引用了echarts.js,因为src的路径填的是相对于html的js的路径，这就导致输出文件只能和
echarts.js在同一个文件夹下，这样局限性很大，不方便。
尝试了引用网络上的echarts.js，可是出现了echarts is not defined的错误。
我在项目中用到了var myChart=echarts.init(document.getElementById('main'));这样的语句，echarts是在js中定义了的，我自己在服务器里放了一个同样的js，然后引用，但是还是出现一样的错误。
echarts.js一个页面如何加载多个图表？
echarts是一个很有用，很炫，也很强大的插件，这里用模块化的方法来实现同一个页面引用多个不同图表。
1、找打文件，下载到本机。
2、把文件名改为echarts（也可以不用改，我是方便自己用才改的），然后放到自己项目里的js文件里（这里也可以和js平级，看自已的喜好）。
3、在html文件里用script引用echarts文件，html里引用成功后，打开js文件或script标签配置文件路径：注意这个路径要和刚刚引入的echarts文件路径一致，目录到js文件上一级就可以了。
4、这里就是我们根据自己需要用的图表进加载相应的文件就是你要什么图就是加载什么图，比如饼图就是pie,柱状图就是bar，地图就是map等。
5、注意这个步骤：两个红框框起来的是自己写的方法的引用，传的参数 ec 就是代表我们在实例化echarts.init() 时 的 "echarts"。
6、我们把每个图表都用一个方法表示，就是每个图表的具体设置。
7、最后全放入刚刚的那个“McChart”方法里
8、最终显示效果
echarts 怎样用js自定义图表数据
引入ECharts
echarts提供多种引入方式，请根据你的项目类型选择合适的方式：
模块化包引入
如果你熟悉模块化开发，你的项目本身就是模块化且遵循AMD规范的，那引入echarts将很简单，使用一个符合AMD规范的模块加载器，如esl.js，只需要配置好packages路径指向src即可，你将享受到图表的按需加载等最大的灵活性，由于echarts依赖底层zrender，你需要同时下载zrender到本地，可参考demo，你需要配置如下。
需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中最基本但很重要的规则，务必在上线时做文件的连接压缩。
//from echarts example
require.config({
packages: [
{
name: 'echarts',
location: '../../src',
main: 'echarts'
},
{
name: 'zrender',
location: '../../../zrender/src', // zrender与echarts在同一级目录
main: 'zrender'
}
]
});
模块化单文件引入（推荐）
如果你使用模块化开发但并没有自己的打包合并环境，或者说你不希望在你的项目里引入第三方库的源文件，我们建议你使用单文件引入，同模块化包引入一样，你需要熟悉模块化开发。
自2.1.8起，我们为echarts开发了专门的合并压缩工具echarts-optimizer。如你所发现的，build文件夹下已经包含了由echarts-optimizer生成的单文件：
dist（文件夹） : 经过合并、压缩的单文件
line.js : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）
bar.js : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line）
scatter.js : 散点图
k.js : K线图
pie.js : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
radar.js : 雷达图
map.js : 地图
force.js : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）
chord.js : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）
funnel.js : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）
gauge.js : 仪表盘
eventRiver.js : 事件河流图
treemap.js : 矩阵树图
venn.js : 韦恩图
echarts.js : 这是包含AMD加载器的echarts主文件，需要通过script最先引入
chart（文件夹） : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载
source（文件夹） : 经过合并，但并没有压缩的单文件，内容同dist，可用于调试
采用单一文件使用例子见ECharts单一文件引入，存放在example/www下，首先你需要通过script标签引入echarts主文件
//from echarts example
body
div id="main" style="height:400px;"/div
...
script src="./js/echarts.js"/script
/body
在主文件引入后你将获得一个AMD环境，配置require.conifg如下：
//from echarts example
body
div id="main" style="height:400px;"/div
...
script src="./js/echarts.js"/script
script type="text/javascript"
require.config({
paths: {
echarts: './js/dist'
}
});
/script
/body
require.config配置后就可以通过动态加载使用echarts
//from echarts example
body
div id="main" style="height:400px;"/div
...
script src="./js/echarts.js"/script
script type="text/javascript"
require.config({
paths: {
echarts: './js/dist'
}
});
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
}
);
/script
/body
总结来说，模块化单文件引入ECharts，你需要如下4步：
为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）
通过script标签引入echarts主文件
为模块加载器配置echarts的路径，从当前页面链接到echarts.js所在目录，见上述说明
动态加载echarts及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）
详见入门教程 ( Getting started ) »
标签式单文件引入
自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require。Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入，需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。
标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：
echarts.config = require('echarts/config')， zrender.tool.color = require('zrender/tool/color')
//from echarts example
body
div id="main" style="height:400px;"/div
...
script src="example/www2/js/dist/echarts-all.js"/script
script
var myChart = echarts.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
/script
/body