创新实训【18】——热词来源分析的图表展示

主要内容

这篇主要记录了热词来源的图表展示网页，从数据库中统计出每个来源的网页数量，用echarts的扇形图和柱状图展示数量最多的10个来源和网页数量。

展示内容

主要步骤

1.在前端用div展示图表的长度和宽度。

<template>
    <div>
        
        <div>
       <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main1" style="width:450px;height: 800px;float:left;margin-left:120px"></div>
        <div id="main2" style="width:600px;height: 500px;float:right;margin-right:20px"></div>
      </div>
      
    </div>
</template>

2.从后端获取数据
shan是扇形图需要的数据，为每个来源和网页数量，label和size是柱状图需要的数据，label是来源的名称列表，size是对应来源名称列表的来源的网页数量。

data(){
     return{
        data:[],
        label:[],
        size:[],
     };
    },

获得数据，展示图表。

 async getdata(){
            const {data:res}= await this.$http.post("getTongji");
           this.data=res.shan;
           this.label=res.label;
           this.size=res.size;
           this.getPie1();
           this.getbar();
       },

3.后端使用hashmap保存每个来源和网页数量，label为每个来源名称的列表，size为来源的网页数量列表。

@RequestMapping("/getTongji")
    public String getTongji()
    {
        List<tongji> tongji_list=lianjiedao.getTongji(10);
        List<Map> result=new ArrayList();
        List<String> label=new ArrayList();
        List<Integer> size=new ArrayList();
        for(tongji t:tongji_list){
            Map<String,Object> m=new HashMap();
            m.put("name",t.getName());
            m.put("value",t.getValue());
            result.add(m);
            label.add(t.getName());
            size.add(t.getValue());
        }

        HashMap<String,Object> res =new HashMap<>();
        res.put("shan",result);
        res.put("label",label);
        res.put("size",size);
        System.out.println(res);
        String res_json=JSON.toJSONString(res);
        return res_json;
    }

从数据库中通过来源source分组，count(*)统计每个来源的数量，降序排序，获得数量最大的10个来源和个数。

<select id="getTongji" resultType="com.example.demo.bean.tongji">
        select source as name,count(*)as value
        from data1
        group by source
        order by value desc
        LIMIT #{limit}
</select>

4.使用echarts展示来源的扇形图和柱状图
引入echarts

let echarts = require('echarts/lib/echarts')
// 引入饼状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

展示来源的扇形图

getPie1() {
        console.log(111);
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main1'));
      // 绘制图表
      myChart.setOption(
          {title: {
        text: '来源扇形图',
       
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: this.data,
        }
    ]
}
         );

    },

展示来源的柱状图

 getbar(){
        // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main2'));
      // 绘制图表
      myChart.setOption(
          {
              title: {
        text: '来源柱状图',
       
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: this.label,
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '数量',
            type: 'bar',
            barWidth: '60%',
            data: this.size,
            itemStyle: {
                    normal: {
　　　　　　　　　　　　　　//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                              '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0',
                               '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                            return colorList[params.dataIndex]
                        },
　　　　　　　　　　　　　
                    }
                },
        }
    ]
}
      )
    }