单独图表组件的开发 --- 库存与销量模块(圆环饼图 )
Posted So istes immer
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了单独图表组件的开发 --- 库存与销量模块(圆环饼图 )相关的知识,希望对你有一定的参考价值。
通用代码结构和流程
组件的结构:StockPage.vue、Stock.vue
代码流程结构:初始化图表对象initChart、获取数据getData、处理数据更新图表updateChart、分辨率适配screenAdapter
图表基本功能的实现
数据的获取:/api/stock
数据的处理:五个饼图(series数组下有5个对象)、每个饼图两个区域(series下的每个对象的data属性拥有两个对象)
图表的位置:type为pie、每个饼图的位置不同(center)、圆环需要设置两个半径(radius)
UI调整
主题的使用:init的第二个参数
标题的设置:title
鼠标动画的移除:hoverAnimation
指示线移除:labelLine
圆环内文字的显示:label(position:center、color)
颜色设置:销量(颜色渐变LinearGradient)、库存(固定的颜色值)
切换动画
数据的处理:currentIndex 标识当前的页数,每一页显示5个圆环
启动和停止的时机:启动(获取数据之后、鼠标移出图表)、停止(组件销毁时、鼠标移入图表)
边界值的处理:判断currentIndex是否大于1
分辨率适配
标题的文字大小、圆环半径、圆环文字
components/Stock.vue
<!-- 库存销量分析 -->
<template>
<div class="com-container">
<div class="com-chart" ref="stock_ref"></div>
</div>
</template>
<script>
export default {
data () {
return {
chartInstance: null,
allData: null,
currentIndex: 0, // 当前显示的数据
timerId: null // 定时器的标识
}
},
mounted () {
this.initChart()
this.getData()
window.addEventListener('resize', this.screenAdapter)
this.screenAdapter()
},
destroyed () {
window.removeEventListener('resize', this.screenAdapter)
clearInterval(this.timerId)
},
methods: {
initChart () {
this.chartInstance = this.$echarts.init(this.$refs.stock_ref, 'chalk')
const initOption = {
title: {
text: '▎ 库存和销量分析',
left: 20,
top: 20
}
}
this.chartInstance.setOption(initOption)
this.chartInstance.on('mouseover', () => {
clearInterval(this.timerId)
})
this.chartInstance.on('mouseout', () => {
this.startInterval()
})
},
async getData () {
// 获取服务器的数据,对this.allData进行赋值之后,调用updateChart方法更新图表
const { data: ret } = await this.$http.get('stock')
this.allData = ret
this.updateChart()
this.startInterval()
},
updateChart () {
const centerArr = [
['18%', '40%'],
['50%', '40%'],
['82%', '40%'],
['34%', '75%'],
['66%', '75%']
]
const colorArr = [
['#4FF778', '#0BA82C'],
['#E5DD45', '#E8B11C'],
['#E8821C', '#E55445'],
['#5052EE', '#AB6EE5'],
['#23E5E5', '#2E72BF']
]
// 处理图表需要的数据
const start = this.currentIndex * 5
const end = (this.currentIndex + 1) * 5
const showData = this.allData.slice(start, end)
const seriesArr = showData.map((item, index) => {
return {
type: 'pie',
radius: [110, 100],
center: centerArr[index],
hoverAnimation: false, // 关闭鼠标移入到饼图时的动画效果
labelLine: {
show: false // 隐藏指示线
},
label: {
position: 'center',
color: colorArr[index][0]
},
data: [
{
name: item.name + '\\n' + item.sales,
value: item.sales,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: colorArr[index][0]
},
{
offset: 1,
color: colorArr[index][1]
}
])
}
},
{
value: item.stock,
itemStyle: {
color: '#333843'
}
}
]
}
})
const dataOption = {
series: seriesArr
}
this.chartInstance.setOption(dataOption)
},
screenAdapter () {
const titleFontSize = this.$refs.stock_ref.offsetWidth / 100 * 3.6
const innerRadius = titleFontSize * 2
const outterRadius = innerRadius * 1.125
const adapterOption = {
title: {
textStyle: {
fontSize: titleFontSize
}
},
series: [
{
type: 'pie',
radius: [outterRadius, innerRadius],
label: {
fontSize: titleFontSize / 2
}
},
{
type: 'pie',
radius: [outterRadius, innerRadius],
label: {
fontSize: titleFontSize / 2
}
},
{
type: 'pie',
radius: [outterRadius, innerRadius],
label: {
fontSize: titleFontSize / 2
}
},
{
type: 'pie',
radius: [outterRadius, innerRadius],
label: {
fontSize: titleFontSize / 2
}
},
{
type: 'pie',
radius: [outterRadius, innerRadius],
label: {
fontSize: titleFontSize / 2
}
}
]
}
this.chartInstance.setOption(adapterOption)
this.chartInstance.resize()
},
startInterval () {
if (this.timerId) {
clearInterval(this.timerId)
}
this.timerId = setInterval(() => {
this.currentIndex++
if (this.currentIndex > 1) {
this.currentIndex = 0
}
this.updateChart()
}, 5000)
}
}
}
</script>
<style>
</style>
views/StockPage.vue
<!--
针对/stockpage这条路径而显示出来
在这个组件中,通过注册子组件的方式显示Stock.vue这个组件
-->
<template>
<div class="com-page">
<stock></stock>
</div>
</template>
<script>
import Stock from '../components/Stock.vue'
export default {
components: {
stock: Stock
}
}
</script>
<style>
</style>
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import SellerPage from '../views/SellerPage'
import TrendPage from '../views/TrendPage'
import MapPage from '../views/MapPage'
import RankPage from '../views/RankPage'
import HotPage from '../views/HotPage'
import StockPage from '../views/StockPage'
Vue.use(VueRouter)
const routes = [
{
path: '/sellerpage',
component: SellerPage
},
{
path: '/trendpage',
component: TrendPage
},
{
path: '/mappage',
component: MapPage
},
{
path: '/rankpage',
component: RankPage
},
{
path: '/hotpage',
component: HotPage
},
{
path: '/stockpage',
component: StockPage
}
]
const router = new VueRouter({
routes
})
export default router
以上是关于单独图表组件的开发 --- 库存与销量模块(圆环饼图 )的主要内容,如果未能解决你的问题,请参考以下文章