ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求，可以免费商用。当我们想要在网页中插入一些图表，来让数据可视化时，就可以使用Echats。
首先去官网（https://echarts.apache.org/examples/zh/index.html）。
这里有很多的图，基本上包含了平常所需要的图表。那怎么使用呢？
第一步，在官网下载界面获取官方码源包后构建。
点击下载。
这里有很多的下载方式，推荐下载方法一中从GitHub下载编译产物，可以直接拿来使用。
进来后也是有很多的码源包，每个码源包都有不同的使用条件，看自己需求来选择。
每个码源包具体的使用条件还不是很清楚，如果你只是使用一些简单的饼状图，折线图，柱状图等选择echatrs.min.js即可。
进来后选择右边Raw，然后右键选择将链接另存为。
除了这些你还能在线定制，可自由选择所需图表、坐标系、组件进行打包下载。注意：打包的源文件来自 jsdelivr CDN，非 Apache 官方源代码和编译产物。在下载界面往下滑就能找到。
选择好后，点击下载，就能得到一个适合自己的最小化的js文件，提升网站的加载速度。
接下来主要就是三大步，在网页中通过标签方式直接引入构建好的echarts文件，绘制图表，插入图表。
引入Echarts
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="static/js/echarts.min.js"></script>
</head>
</html>新建一个空HTML文件，或者是在写好的HTML文件中，引入echarts就是把刚刚下载好的echarts文件的位置放在HTML网页的头部位置。
我使用的开发环境是pycharm里的flask，把下载好的echarts文件复制到static/js中，其实放别的地方也行，只要在src中把绝对路径写出来。
<script src="static/js/echarts.min.js"></script>
然后在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 </head> 之后添加，容器的高宽就是图表的大小，可以自己设置。
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>绘制图表
现在就可以去官网找一个你认为合适的图表，然后在此基础上进行修改。例如选择第一个柱状图。
进来之后左边是图表JavaScript的代码，右边是数据的显示。我们主要是修改js代码，那不会js怎么办呢。其实关系也不大，只要能看懂一点基础的就行。
我们现在来修改右边图形的颜色。在option下加上color:[''], 里面的填写#加上RGB的16进制的颜色编码。例如 color:['#ff00f8'],
option下面xAxis是X轴，data里面就是X轴坐标。 yAxis是Y轴。series是系列的意思，实际上就是柱的数据，例如可以调整data的第一个数据的数值，改成250。
其实更多的用法是在其他图表里找有什么是我们需要的部分。
看右边这个图表的左上方有标题，而我们刚刚那个图表就没有。我们就看左边代码里有个title，里面的内容和标题是一样的，就把这个title复制到刚刚的图表里。
像柱状图比较常见的操作还有就是：
当你把鼠标放到某一柱上时，背后会有阴影，且还会显示柱的数值。
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },当你第一次打开时，每个柱都是从0开始向上增加的动图。
const drilldownData = [ { dataGroupId: 'Mon', }, { dataGroupId: 'Tue', }, { dataGroupId: 'Wed', }, { dataGroupId: 'Thu', }, { dataGroupId: 'Fri', }, { dataGroupId: 'Sat', }, { dataGroupId: 'Sun', } ];其中dataGroupId就是X轴坐标。注意这段代码要放到分号；的后面，不然会报错。
如果遇到了实在不理解的部分，可以在官网中查询。
先复制不理解的部分，然后点击文档->配置项手册。 
在配置项下粘贴，例如title。就会有解释，还会告诉有什么属性和怎么用。
插入图表
当我们修改好了图表时，点击下载实例。
下载下来的是一个HTML网页，把这个复制到templates下，打开。把这个页面body中的script复制到我们引入好echarts的页面中的body里面。
script下的第一句为基于准备好的dom，初始化一个echarts实例。
var dom = document.getElementById('container');
这里面的container改成main，因为我们之前在为echarts定义一个dom时，div里的id为main。
注意不要和其他div里的id重名，不然就改成别的名字。
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
这样就把echarts插入到了我们的HTML页面中了。
如果你不想要echarts中的写好的数据，可以使用数据库或者excel中的数据，这就像是把后端中的数据传到前端表示出来。
例如我想做一个电影评分表，之前就要把电影的评分存入MySQL数据库中。然后使用SQL语句，把相同电影评分放在一组。
先在flask中连接好MySQKL数据库。
HOSTNAME = '127.0.0.1'
PORT = '3306'
DARABASE = '数据库名字'
USERNAME = 'root'
PASSWORD = '数据库密码'
DB_URI = 'mysql+pymysql://{}:{}@{}:{}/{}?charset=utf8'.format(USERNAME,PASSWORD,HOSTNAME,PORT,DARABASE)
app.config['SQLALCHEMY_DATABASE_URI'] = DB_URI
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True
db = SQLAlchemy(app)然后统计相同评分的电影有多少部。
@app.route('/score')
def score():
score = [] #评分
num = [] #每个评分所统计出的电影数量
db.reflect()
#获取数据库的所有表
all_table = {table_obj.name: table_obj for table_obj in db.get_tables_for_bind()}
#把movies表中评分相同的分为一组，并统计其数量
data = db.session.query(all_table['movies'].c.rate , db.func.count(all_table['movies'].c.rate)).group_by(all_table['movies'].c.rate).all()
for item in data:
score.append(item[0])
num.append(item[1])
print(score)
print(num)
#把评分和数量传给HTML页面
return render_template("score.html",score = score,num = num)HTML中把传过来的值写在两对花括号里{{}}。其中 |tojson 是为了防止页面不能正常显示字符串。
xAxis: {
type: 'category',
data: {{ score|tojson }}
<!--['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']-->
},
yAxis: {
type: 'value'
},
series: [
{
data:{{ num|tojson}},
<!-- [120, 200, 150, 80, 70, 110, 130],-->
type: 'bar'
}
]好了，echarts的基本使用方法就这些，还有什么问题可以去官网查看手册和API，还是比较详细的。
387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
