Django+Echart应用

1.首先在我们的html中引入echarts.js

2.获取从view传来的数据

3.配置echart

<div class="col-md-9" align="center">
<div id="main" style="width: 1080px;height:640px;"></div>
<script type="text/javascript">
    //基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    {#这里使用view传过来的数据必须进行safe操作（为了安全起见和防止页面乱码），导致数据不可用#}
    var data = [{{ area|safe }},{{ avg_price|safe }},{{ house_num|safe }}]

    //Echart配置
    option = {
        color:['#FF0000','#00FF00'],
        //设置图表边距
        grid:{
                left:0,
                right:15,
                top:15,
                bottom:15,
                containLabel: true
            },
        title:{
            text:'各个区域的平均价格及房源数量',
            x:'center',　　　　　　//标题居中
        },
        //自定义鼠标浮窗
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
            },
        },
        //图表展示样式切换按钮
        toolbox: {
            show:true,
            orient:'vertical',
            left:'right',
            top: 'center',
        },
        //echart图例
        legend: {
            right:10,　　　　//右对齐
            data:['平均价格','房源数量']
        },
        //坐标轴刻度相关设置
        xAxis: [
            {
                type: 'category',
                //设置x轴数据
                data:data[0],
                //刻度对齐
                boundaryGap:['%5','%5'],
                //刻度根据x轴数据对齐
                axisTick: {
                   alignWithLabel: true
                    }

            }

        ],
        yAxis: [

            {
                type: 'value',
            }
        ],
        //样式
        series: [
            {
                name:'平均价格',
                type:'bar',
                  label: {
                    show: true,     //显示数字
                    position: 'top'     //显示位置   top：顶端  insideRight:中右
                  },
                barGap:0,      //两个数据（平均价格、房源数量）无间隔
                boundaryGap:['%5',0],
                data:data[1],
            },
            {
                name:'房源数量',
                //type指定图表样式'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图）
                // 'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图）
                type:'bar',
                  label: {
                    show: true,
                    position: 'top'
                    },
                data:data[2],
            }
        ]
    };
    //使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
    
</script>
</div>