資料視覺化專案---客源分析趨勢圖

最終效果如下：

客源分析趨勢圖—元件程式碼

<template>
    <div class="com-container">
        <div class="title" :style="comStyle">
            <span>┃ {{ showTitle }}</span>
            <span class="iconfont title-icon" @click="showChoice = !showChoice" :style="comStyle">&#xe6eb;</span>
            <div class="select-con" v-show="showChoice" :style="marginStyle">
                <div class="select-item" v-for="item in selectTypes" :key="item.key" @click="handleSelect(item.key)">
                    {{ item.text }}
                </div>
            </div>
        </div>
        <div class="com-chart" ref="trend_ref"></div>
    </div>
</template>

<script>
    export default {
        name: "Trend",
        data() {
            return {
                chartInstance:null,
                allData:null,//從伺服器獲取的所有資料
                showChoice:false, //是否顯示可選項
                choiceType:'originTrend', //顯示資料的型別
                titleFontSize:0,
            }
        },
        computed:{
          selectTypes(){
              if(!this.allData){
                  return [];
              }else {
                  return this.allData.type.filter(item=>{
                      return item.key!=this.choiceType;
                  });
              }
          },
          showTitle(){
              if(!this.allData){
                  return '';
              }else {
                  return this.allData[this.choiceType].title;
              }
          },
          //設定給標題的樣式
          comStyle(){
              return{
                  fontSize:this.titleFontSize+'px'
              }
          },
          marginStyle(){
              return{
                  marginLeft:this.titleFontSize+'px'
              }
          }
        },
        mounted(){
          this.initChart();
          this.getData();
          window.addEventListener('resize',this.screenAdapter);
          this.screenAdapter();
        },
        destroy(){
            window.removeEventListener('resize',this.screenAdapter)
        },
        methods: {
            initChart(){
                this.chartInstance=this.echarts.init(this.$refs.trend_ref,'chalk');
                const initOption={
                    grid:{
                      left:'3%',
                      top:'35%',
                      right:'4%',
                      bottom:'1%',
                      containLabel:true,
                    },
                    tooltip:{
                      trigger:'axis'
                    },
                    legend:{
                      left:20,
                      top:'15%',
                      icon:'circle'
                    },
                    xAxis: {
                        type:'category',
                        boundaryGap:false,
                    },
                    yAxis:{
                        type:'value'
                    }
                };
                this.chartInstance.setOption(initOption);
            },
            async getData(){
                await this.axios.get("/chart/trend").then(res=>{
                    //console.log(res.data);
                    this.allData=res.data;
                });
                this.updateChart();
            },
            updateChart(){
                // 半透明的顏色值
                const colorArr1 = [
                    'rgba(11, 168, 44, 0.5)',
                    'rgba(44, 110, 255, 0.5)',
                    'rgba(22, 242, 217, 0.5)',
                    'rgba(254, 33, 30, 0.5)',
                    'rgba(250, 105, 0, 0.5)'
                ]
                // 全透明的顏色值
                const colorArr2 = [
                    'rgba(11, 168, 44, 0)',
                    'rgba(44, 110, 255, 0)',
                    'rgba(22, 242, 217, 0)',
                    'rgba(254, 33, 30, 0)',
                    'rgba(250, 105, 0, 0)'
                ]
                //處理資料
                //類目軸的資料
                const timeArr=this.allData.common.month;
                //y軸的資料 series下的資料
                const valueArr=this.allData[this.choiceType].data;
                const seriesArr=valueArr.map((item,index)=>{
                    return{
                        name:item.name,
                        type:'line',
                        data:item.data,
                        stack:this.choiceType,
                        areaStyle:{
                            color:new this.echarts.graphic.LinearGradient(0,0,0,1,[
                                {
                                    offset:0,
                                    color:colorArr1[index]
                                },//0%的顏色值
                                {
                                    offset:1,
                                    color:colorArr2[index]
                                },//100%的顏色值
                            ]),
                        }
                    }
                });
                //圖例的資料
                const legendArr=valueArr.map(item=>{
                   return item.name;
                });
                const dataOption={
                    xAxis: {
                        data:timeArr
                    },
                    legend:{
                        data:legendArr
                    },
                    series:seriesArr,
                };
                this.chartInstance.setOption(dataOption);
            },
            screenAdapter() {
                this.titleFontSize=this.$refs.trend_ref.offsetWidth/100 * 3.6;
                const adapterOption={
                    //圖例大小
                    legend:{
                        itemWidth:this.titleFontSize,
                        itemHeight:this.titleFontSize,
                        itemGap:this.titleFontSize,
                        textStyle:{
                            fontSize: this.titleFontSize/2
                        }
                    }
                };
                this.chartInstance.setOption(adapterOption);
                this.chartInstance.resize();
            },
            handleSelect(currentType){
                this.choiceType=currentType;
                this.updateChart();
                this.showChoice=false;
            },
        }
    }

</script>

<style scoped>
    .com-container{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .com-chart{
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 20px;
    }
    .title{
        position:absolute;
        left: 20px;
        top: 20px;
        z-index: 10;
        color: white;
    }
    .title-icon{
        margin-left: 10px;
        cursor: pointer;
    }
    .select-item{
        cursor: pointer;
    }
    .select-con{
        background-color: #222733;
    }
</style>

客源分析趨勢圖—介面圖表資料

JOSN資料

{"originTrend":{"title":"客源分析趨勢","base":300,"unit":"萬","data":[{"name":"鄭州工商學院","data":["38","9","44","54","28","54","54","53","53","12","38","33"]},{"name":"河南交通學院","data":["13","21","19","29","3","29","29","28","28","13","13","8"]},{"name":"周口中心站","data":["15","9","18","28","2","28","28","27","27","3","12","7"]},{"name":"鄭州旅遊學院","data":["12","12","18","27","1","27","27","27","27","16","12","7"]}]},"destinationTrend":{"title":"去向分析趨勢","base":300,"unit":"萬","data":[{"name":"周口火車站","data":["33","27","46","70","17","73","77","74","74","4","42","30"]},{"name":"周口市中心站","data":["17","5","26","25","10","25","25","25","25","8","18","9"]},{"name":"周口市淮陽","data":["26","5","21","33","5","25","25","25","25","22","9","9"]},{"name":"周口市項城","data":["2","5","6","10","2","15","10","10","10","3","6","6"]}]},"common":{"month":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]},"type":[{"key":"originTrend","text":"客源分析趨勢"},{"key":"destinationTrend","text":"去向分析趨勢"}]}

截圖

客源分析趨勢圖—設計流程

參考https://blog.csdn.net/liudachu/article/details/109273102