Vue?echarts實(shí)例項(xiàng)目地區(qū)銷量趨勢(shì)堆疊折線圖實(shí)現(xiàn)詳解
更新時(shí)間：2022年09月26日 08:45:19 作者：benlalagang
Echarts，它是一個(gè)與框架無(wú)關(guān)的 JS 圖表庫(kù)，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計(jì)IONIC也能用，因?yàn)槲业牧?xí)慣，每次新嘗試做一個(gè)功能的時(shí)候，總要新創(chuàng)建個(gè)小項(xiàng)目，做做Demo
最終效果如圖
組件結(jié)構(gòu)設(shè)計(jì)
外部 Trendpage.vue
<!--針對(duì)于/trendpage 這條路徑顯示 測(cè)試顯示組件-->
<template>
<div class="comP1">
<Trend></Trend>
</div>
</template>
<script>
import Trend from "@/components/Trend";
export default {
name: "TrendPage",
components:{Trend}
}
</script>
<style scoped>
</style>內(nèi)部Trend.vue
<!-- 顯示地區(qū)銷量趨勢(shì)的折線圖表 -->
<template>
<div class="comP2" ref="trend_1"></div>
</template>
<script>
export default {
data () {
return {}
},
methods: {}
}
</script>
<style lang="less" scoped>
</style>初始化圖表+數(shù)據(jù)的獲取+更新圖表
設(shè)置好這些函數(shù) 在mounted生命周期內(nèi)調(diào)用
mounted() {
// 渲染DOM元素之后 初始化圖表實(shí)例 請(qǐng)求數(shù)據(jù) 監(jiān)聽(tīng)頁(yè)面尺寸變化
this.initChart()
this.getData() // 請(qǐng)求數(shù)據(jù)
// 監(jiān)聽(tīng)圖表尺寸發(fā)生變化時(shí)的 處理函數(shù) 自適應(yīng)尺寸
window.addEventListener('resize',this.screenAdapter)
this.screenAdapter()
},找到盒子初始化圖表、這里只是簡(jiǎn)單設(shè)置的直角坐標(biāo)系
initChart(){
this.chartInstance = this.$echarts.init(this.$refs.trend_1,this.theme)
const initOption = {
grid:{
left:'3%',
top:'35%',
right:'4%',
bottom:'1%',
containLabel:true
},
tooltip:{ // 鼠標(biāo)懸浮時(shí)的提示框
trigger:'axis'
},
legend:{
left: 20,
top: '15%',
icon:'circle'
},
xAxis: {
type:'category',
boundaryGap:false // 緊貼兩側(cè)邊緣
},
yAxis:{
type:'value'
}
}
this.chartInstance.setOption(initOption)
},發(fā)送請(qǐng)求、獲取數(shù)據(jù)
getData(){
const {data:res} = await this.$http.get('trend')
this.allData = res
this.updateChart()
},請(qǐng)求過(guò)來(lái)的數(shù)據(jù)：
{
"map": {
"title": "地區(qū)銷量趨勢(shì)",
"base": 310,
"unit": "萬(wàn)",
"data": [{
"name": "上海",
"data": ["155.13","154.65","171.46","164.38","237.23","300.65","240.29","232.07","193.31","136.70","48.64","90.20"]
}, {
"name": "北京",
"data": ["86.25","33.80","145.58","21.79","176.09","132.41","291.05","191.89","151.54","94.25","141.75","157.14"]
}, {
"name": "深圳",
"data": ["143.94","186.29","183.64","251.48","195.48","152.16","52.47","184.12","203.79","39.16","56.37","161.64"]
}, {
"name": "廣州",
"data": ["57.60","77.61","307.24","165.05","175.41","276.88","269.04","296.11","105.31","283.39","134.08","265.38"]
}, {
"name": "重慶",
"data": ["200.82","215.56","249.80","222.67","216.98","60.12","309.68","273.35","150.99","251.97","26.15","186.99"]
}]
},
"seller": {
"title": "商家銷量趨勢(shì)",
"base": 120,
"unit": "萬(wàn)",
"data": [{
"name": "商家1",
"data": ["33.00","86.07","28.77","34.29","102.45","0.30","50.50","21.70","25.41","25.71","66.90","63.29"]
}, {
"name": "商家2",
"data": ["12.83","102.42","37.37","95.55","45.45","112.72","113.53","106.41","75.67","113.91", "37.32", "28.04"]
}, {
"name": "商家3",
"data": ["73.54","40.92","89.81","113.41","76.34","107.15","55.61","0.33","106.29","78.30","98.05","38.67"]
}, {
"name": "商家4",
"data": ["47.19","73.57","44.60","84.03","62.82","15.65","64.72","88.98","29.25","5.41","79.11","118.46"]
}, {
"name": "商家5",
"data": ["74.84","116.45","107.69","11.03","17.31","42.22","97.60","108.64","43.87","110.65","5.96","38.41"]
}]
},
"commodity": {
"title": "商品銷量趨勢(shì)",
"base": 50,
"unit": "萬(wàn)",
"data": [{
"name": "女裝",
"data": ["47.71","13.34","19.30","7.93","41.93","23.01","22.63","26.91","0.62","39.23","48.74","29.48"]
}, {
"name": "手機(jī)數(shù)碼",
"data": ["46.66","46.52","23.65","1.73","44.26","47.07","17.86","40.20","3.78","31.46","28.01","8.63"]
}, {
"name": "男裝",
"data": ["26.98","30.71","42.59","29.50","26.86","17.65","30.15","15.85","9.28","30.20","32.35","34.46"]
}, {
"name": "大家電",
"data": ["20.26","46.23","43.84","46.75","28.29","32.36","45.30","16.73","40.40","45.07","29.86","41.92"]
}, {
"name": "美妝護(hù)膚",
"data": ["7.58","23.66","39.78","30.20","25.72","36.20","47.55","35.39","27.85","37.56","16.91", "3.91"]
}]
},
"common": {
"month": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
},
"type": [{
"key": "map",
"text": "地區(qū)銷量趨勢(shì)"
}, {
"key": "seller",
"text": "商家銷量趨勢(shì)"
}, {
"key": "commodity",
"text": "商品銷量趨勢(shì)"
}]
}數(shù)據(jù)請(qǐng)求過(guò)來(lái)后在進(jìn)行 相應(yīng)處理 渲染圖表
data中預(yù)留的變量：
data(){
return{
chartInstance:null,// 預(yù)留初始化實(shí)例對(duì)象
allData:null, // 服務(wù)器請(qǐng)求過(guò)來(lái)的數(shù)據(jù)
showChoice:false, // 是否顯示可選項(xiàng)
choiceType:'map', // 顯示的數(shù)據(jù)類型
titleFontSize:0 // 指明標(biāo)題的字體
}
},
1.準(zhǔn)備好兩個(gè)數(shù)組 顏色透明度 0.5 ->0.1
2.抽取時(shí)間軸的數(shù)據(jù)
3.抽取組合 series 系列的數(shù)組
4.抽取 legend 分類提示
5.重新生成 option 調(diào)用 setOption 渲染圖表
updateChart(){
// 數(shù)據(jù)更新時(shí) 重新渲染
// 預(yù)設(shè)半透明顏色的值
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)'
]
// 預(yù)設(shè)全透明顏色的值
const colorArr2 = [
'rgba(11,168,44,0.1)',
'rgba(44,110,255,0.1)',
'rgba(22,242,217,0.1)',
'rgba(254,33,30,0.1)',
'rgba(250,105,0,0.1)'
]
// 處理請(qǐng)求過(guò)來(lái)的 this.allData 數(shù)據(jù) 直接用變量 導(dǎo)進(jìn)設(shè)置中
const timeArr = this.allData.common.month // 類目軸的月份
const valueArr = this.allData[this.choiceType].data // 數(shù)值軸的數(shù)據(jù)
const seriesArr = valueArr.map((item,index) => {
return {
type:'line', // 類型是折線圖
data:item.data, // 數(shù)據(jù)是每一項(xiàng)的data
stack:this.choiceType, // 設(shè)置成堆疊圖一樣的字符串就可以
name:item.name, // 每一項(xiàng)的提示 name
// 每一項(xiàng)面積顏色的設(shè)置 運(yùn)用到 上面定義的兩個(gè)數(shù)組
areaStyle:{
color:new this.$echarts.graphic.LinearGradient(0,0,0,1,[
{
offset:0,
color:colorArr1[index]
},
{
offset:1,
color:colorArr2[index]
}
])
}
}
})
const legendArr = valueArr.map(item => {
return item.name
})
const dataOption = {
xAxis: {
data:timeArr
},
legend:{
data:legendArr
},
series:seriesArr
}
this.chartInstance.setOption(dataOption)
},尺寸變化的適配-第三篇文章已經(jīng)詳細(xì)講過(guò)
screenAdapter(){
// 頁(yè)面分辨率發(fā)生改變時(shí) 重新渲染
this.titleFontSize = this.$refs.trend_1.offsetWidth / 100 * 3.6
const adapterOption = {
// legend 是提示類目的文字 可以總的設(shè)置 也可以在單獨(dú)的 series 里設(shè)置
legend: {
itemWidth: this.titleFontSize,
itemHeight: this.titleFontSize,
itemGap: this.titleFontSize,
textStyle: {
fontSize: this.titleFontSize / 2
}
}
}
this.chartInstance.setOption(adapterOption)
this.chartInstance.resize()
},標(biāo)題顯示以及對(duì)于數(shù)據(jù)的切換操作
請(qǐng)求過(guò)來(lái)的數(shù)據(jù)當(dāng)中 有 三種類型 map seller commodity 默認(rèn)是 map
在template 當(dāng)中添加 標(biāo)題選擇模塊 附加一定的樣式 使得標(biāo)題顯示在對(duì)應(yīng)的位置
- 整體的 位置 由title 樣式?jīng)Q定 動(dòng)態(tài)樣式 comStyle 會(huì)隨著窗口變化和主題切換而改動(dòng)
- showTitle 根據(jù)this.choiceType 動(dòng)態(tài)決定標(biāo)題
- icon-font 字體圖標(biāo) 小箭頭 點(diǎn)擊切換 下拉標(biāo)題的選擇
- v-for 渲染下拉標(biāo)題 過(guò)濾掉當(dāng)前選擇的標(biāo)題
- 為每一小項(xiàng) 添加點(diǎn)擊事件 傳入 對(duì)應(yīng)的key 更新this.choiceType 后重新渲染圖標(biāo) 并隱藏下拉
<template>
<div class="comP3">
<div class="title" :style="comStyle">
<span>{{'▎ ' + showTitle}}</span>
<span class="iconfont title-icon" :style="comStyle" @click="showChoice = !showChoice"></span>
<div class="select-con"
:style="theme === 'chalk' ? 'background-color: #222733;' : 'background-color: #ffffff;'"
v-show="showChoice">
<div class="select-item" :style="marginStyle" v-for="item in selectTypes" :key="item.key" @click="handleSelect(item.key)">
{{item.text}}
</div>
</div>
</div>
<div class="comP2" ref="trend_1"></div>
</div>
</template>
<style scoped lang="less">
.title {
position: absolute;
left: 20px;
top: 20px;
z-index: 10;
cursor: pointer;
user-select: none;
color: white;
.title-icon {
margin-left: 10px;
}
.select-con {
/*background-color: #222733;*/
}
}
</style>與之對(duì)應(yīng)的計(jì)算屬性和方法：
computed:{
...mapState(['theme']),
// 準(zhǔn)備遍歷選項(xiàng)的 元數(shù)據(jù)
selectTypes(){
if (!this.allData){
return []
}else {
return this.allData.type.filter(item =>{
return item.key !== this.choiceType
})
}
},
// 顯示當(dāng)前選中的標(biāo)題
showTitle(){
if(!this.allData){
return ''
}else {
return this.allData[this.choiceType].title
}
},
// 設(shè)置給標(biāo)題的樣式
comStyle(){
return `font-size:${this.titleFontSize}px;color:${getThemeValue(this.theme).titleColor}`
},
marginStyle(){
return `padding-left:${this.titleFontSize}px`
},
},
methods:{
handleSelect(currentType){
this.choiceType = currentType
this.updateChart()
this.showChoice = false
}
}
到此這篇關(guān)于Vue echarts實(shí)例項(xiàng)目地區(qū)銷量趨勢(shì)堆疊折線圖實(shí)現(xiàn)詳解的文章就介紹到這了,更多相關(guān)Vue echarts堆疊折線圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了vue3彈出層V3Popup實(shí)例詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
vue實(shí)現(xiàn)無(wú)縫滾動(dòng)手摸手教程
這篇文章主要為大家介紹了vue實(shí)現(xiàn)無(wú)縫滾動(dòng)手摸手教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
vue改變數(shù)據(jù)后數(shù)據(jù)變化頁(yè)面不刷新的解決方法
這篇文章主要給大家介紹了關(guān)于vue改變數(shù)據(jù)后數(shù)據(jù)變化頁(yè)面不刷新的解決方法,vue比較常見(jiàn)的坑就是數(shù)據(jù)(后臺(tái)返回)更新了,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue雙花括號(hào)的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
使用vue-cli初始化項(xiàng)目時(shí)運(yùn)行‘npm run dev’報(bào)錯(cuò)及解決
這篇文章主要介紹了使用vue-cli初始化項(xiàng)目時(shí)運(yùn)行‘npm run dev’報(bào)錯(cuò)及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue中前端代理跨域問(wèn)題實(shí)例總結(jié)
前后端分離進(jìn)行項(xiàng)目開(kāi)發(fā),跨域問(wèn)題不可避免,下面這篇文章主要給大家介紹了關(guān)于vue中前端代理跨域問(wèn)題的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
基于Vue設(shè)計(jì)實(shí)現(xiàn)一個(gè)彈幕組件
這篇文章主要給大家分享一個(gè)開(kāi)發(fā)中常見(jiàn)的需求，接下來(lái)將為大家詳細(xì)介紹彈幕的實(shí)現(xiàn)以及設(shè)計(jì)思路一步一步描述出來(lái)，希望大家能夠喜歡2023-06-06
Vue-cli3中如何引入ECharts并實(shí)現(xiàn)自適應(yīng)
這篇文章主要介紹了Vue-cli3中如何引入ECharts并實(shí)現(xiàn)自適應(yīng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue路由切換和Axios接口取消重復(fù)請(qǐng)求詳解
在web項(xiàng)目開(kāi)發(fā)的過(guò)程中,經(jīng)常會(huì)遇到客服端重復(fù)發(fā)送請(qǐng)求的場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于Vue路由切換和Axios接口取消重復(fù)請(qǐng)求的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue 組件高級(jí)用法,需要的朋友可以參考下2018-04-04