基于Echarts的图表绘制

我们在做管理平台的时候,难免会做各式各样的可视化图表,当前市场上已经有很多开发好的js框架,我们今天来学习echart.js绘图。
首先将下载好的echart.js放入目录
基于Echarts的图表绘制_第1张图片
然后在我们的前端页面style模块导入echart.js
基于Echarts的图表绘制_第2张图片
接下来就是开始绘图了,绘图的主要代码

{% extends "blank.html" %}  //这里是我们继承的基础模板,这个是我们项目开发时需要做一个base页面用来代表大多数共同属性和方法

{% block title %}
    EchartsExample
{% endblock %}

{% block style %}
    
{% endblock %}

{% block label %}
    EchartsExample
{% endblock %}

{% block content %}
//设置一个画布

    
//开始在画布上作图 {% endblock %}

echarts 需要定义画布,而且选择器最好用js
echarts主要有以下几种类型
1、bar 柱状图
2、line 折线图
3、gauge 仪表盘
4、pie 饼状图
5、island 孤岛图
6、funnel 漏斗图

bar柱状图效果如下:
基于Echarts的图表绘制_第3张图片
funnel漏斗图效果如下:
基于Echarts的图表绘制_第4张图片
还有更多的设置与方法等着你去发现!

你可能感兴趣的:(笔记)