最终效果如下:
客源分析趋势图
—组件代码
<template>
<div class="com-container">
<div class="title" :style="comStyle">
<span>┃ {{ showTitle }}</span>
<span class="iconfont title-icon" @click="showChoice = !showChoice" :style="comStyle"></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
下一篇:数据可视化项目—客源分布图