Django+Echart应用

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

2.获取从view传来的数据

3.配置echart

<div class="col-md-9" align="center">
<div id="main" style=" 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>

这个跟上面没关系：（其他注释）

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

            {#这里使用view传过来的数据必须进行safe操作（为了安全起见和防止页面乱码），导致数据不可用#}
            //Echart配置
            option = {
                color:['#FF0000','#00FF00'],
                //设置图表边距
                grid:{
                        top:'10%',
                        bottom:'10%',
                        containLabel: true          //true为包含x轴标签范围   false不包含
                    },
                title:{
                    text:'每个小区的3室-2厅-2卫户型数目及平均价格',
                    x:'center',             //居中
                },
                //自定义鼠标浮窗
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                },
                //toolbox echart的工具箱
                //图表展示样式切换按钮
                toolbox: {
                    show:true,
                    feature: {
                        mark: {show: true},
                        dataZoom: {show: true},
                        dataView: {show: true, readOnly: false},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                //echart图例
                legend: {
                    top:'15%',
                    right:'15%',       //右对齐
                    data:['房源数量','平均价格']
                },
                //坐标轴刻度相关设置
                xAxis: [
                    {
                        type: 'category',
                        //设置x轴数据
                        data:{{ hma1.0|safe}},
                        //刻度对齐
                        boundaryGap:['%5','%5'],
                        //刻度根据x轴数据对齐
                        axisTick: {
                            //show:false,             //不显示刻度
                           alignWithLabel: true
                            },
                        axisLabel:{
                            interval:0,        //坐标轴刻度标签的显示间隔
                            {#rotate:90          //x轴字体倾斜90度#}

                            {#formatter:function(value)  #}         //formatter实现文字竖直x显示
                            {#   {  #}
                            {#       return value.split("").join("
");  #}
                            {#   },#}

                            //formatter实现文字竖直并两字排列显示
                            formatter:function(value)
                                 {
                                     debugger
                                     var ret = "";//拼接加
返回的类目项
                                     var maxLength = 2;//每项显示文字个数
                                     var valLength = value.length;//X轴类目项的文字个数
                                     var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                     if (rowN > 1)//如果类目项的文字大于3,
                                     {
                                         for (var i = 0; i < rowN; i++) {
                                             var temp = "";//每次截取的字符串
                                             var start = i * maxLength;//开始截取的位置
                                             var end = start + maxLength;//结束截取的位置
                                             //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                             temp = value.substring(start, end) + "
";
                                             ret += temp; //凭借最终的字符串
                                         }
                                         return ret;
                                     }
                                     else {
                                         return value;
                                     }
                                 }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                    }
                ],
                //样式
                series: [
                    {
                        name:'房源数量',
                        type:'bar',
                          label: {
                            show: true,     //显示数字
                            position: 'top'     //显示位置   top：顶端  insideRight:中右
                          },
                        barGap:0,      //两个数据（平均价格、房源数量）无间隔
                        boundaryGap:['%5',0],
                        data:{{ hma1.1|safe }},
                    },
                    {
                        name:'平均价格',
                        //type指定图表样式'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图）
                        // 'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图）
                        type:'bar',
                          label: {
                            show: true,
                            position: 'top'
                            },
                        data:{{ hma1.2|safe }},
                    }
                ]
            };
            //使用刚指定的配置项和数据显示图表
            myChart.setOption(option);
            </script>
    </div>
</div>