创新实训【17】——热词趋势图表展示

主要内容

这篇主要记录了热词的变化趋势图表展示，使用echarts展示了2021年1月-5月每个月热词的讨论次数，用柱状图动态展示。

展示内容

2021-01热词

2021-02热词

2021-03热词

2021-04热词

2021-05热词

主要步骤

1.在前端div展示这个图表的长度和宽度

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

2.获得数据，每个列表为每个月每个热词的讨论次数

dataMap.data = {
    //max : 60000,
   1:[120,22,10,100,10,50],
   2:[100,10,2,100,2,28],
   3:[180,20,8,120,8,30],
   4:[150,60,5,120,6,50],
   5:[120,60,6,120,20,30],

};

3.使用柱状图展示每个月每个热词讨论的次数

 gettu(){
                var myChart = echarts.init(document.getElementById('main1'));
      // 绘制图表
      var dataMap = {};

dataMap.data = {
    //max : 60000,
   1:[120,22,10,100,10,50],
   2:[100,10,2,100,2,28],
   3:[180,20,8,120,8,30],
   4:[150,60,5,120,6,50],
   5:[120,60,6,120,20,30],

};




myChart.setOption( {
    baseOption: {
        timeline: {
            axisType: 'category',
            // realtime: false,
            // loop: false,
            autoPlay: true,
            // currentIndex: 2,
            playInterval: 1000,
            // controlStyle: {
            //     position: 'left'
            // },
            data: [
                '2021-01','2021-02','2021-03',
               '2021-04','2021-05',
                
            ],
            label: 
                {'2021-01':'111','2021-02':'','2021-03':'','2021-04':'','2021-05':'222'},
            
        },
        title: {
            subtext: '热词'
        },
        tooltip: {
        },
       
        calculable : true,
        grid: {
            top: 80,
            bottom: 100,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true,
                        formatter: function (params) {
                            return params.value.replace('\n', '');
                        }
                    }
                }
            }
        },
        xAxis: [
            {
                'type':'category',
                'axisLabel':{'interval':0},
                'data':[
                    '山东大学','学位','校区','教育','《文史哲》','团队'
                ],
                splitLine: {show: false}
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '数量'
            }
        ],
        series: [
            {name: '数量', type: 'bar',
            itemStyle: {
                    normal: {
　　　　　　　　　　　　　　//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                             
                               '#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]
                        },
　　　　　　　　　　　　　
                    }
                },
                },
            {name: '数量', type: 'line'}
           
        ]
    },
    options: [
        {
            title: {text: '2021-01热词'},
            series: [
                {data: dataMap.data['1']},
               
            ]
        },
        {
            title : {text: '2021-02热词'},
            series : [
                {data: dataMap.data['2']},
                
            ]
        },
        {
            title : {text: '2021-03热词'},
            series : [
                {data: dataMap.data['3']},
               
            ]
        },
        {
            title : {text: '2021-04热词'},
            series : [
                {data: dataMap.data['4']},
               
            ]
        },
        {
            title : {text: '2021-05热词'},
            series : [
                {data: dataMap.data['5']},
               
            ]
        },
       
    ]
});
           },