基于Echarts的图表绘制

我们在做管理平台的时候，难免会做各式各样的可视化图表，当前市场上已经有很多开发好的js框架，我们今天来学习echart.js绘图。
首先将下载好的echart.js放入目录

然后在我们的前端页面style模块导入echart.js

接下来就是开始绘图了，绘图的主要代码

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

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

{% block style %}
    <script src = "/static/js/echarts.min.js"></script>
{% endblock %}

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

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

    <div id = "panel" style = "height: 500px; width: 500px;">

    </div>
		//开始在画布上作图
    <script>
        //初始化画布
        var myChart = echarts.init(document.getElementById("panel"))
        //定义选项参数
        options = {
            title: {
                text: "我的柱状图"
            },
            tooltip:{},
            legend:{
                data:["学科"]
            },
            xAxis: {	//x轴
                data:["python","php","jave","linux","c"]
            },
            yAxis: {},//y轴
            series: [
                {
                    name: "学科",
                    type: "bar",
                    data:[5,3,2,4,3]
                }
            ]
        };
        myChart.setOption(options)
    </script>
{% endblock %}

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

bar柱状图效果如下：

funnel漏斗图效果如下：

还有更多的设置与方法等着你去发现！