需求: 数据请求以后实现前端分页,实现图表间隔2秒更新一次,实现组件切换时,清除定时器,当鼠标移入到图表中的时候图表不会产生间隔性刷新数据,移开后继续实现间隔性更新图表
一.柱状图功能实现的 完整版-具体代码如下:
<!-- 商家销量统计的横向柱状图 -->
<template>
<div class="com-container">
<div class="com-chart" ref="seller_ref"></div>
</div>
</template>
<script>
export default {
data () {
return {
chartInstance: null,
allData: null, // 服务器返回的数据
currentPage: 1, // 当前显示的页数
totalPage: 0, // 一共有多少页
timerId: null // 定时器的标识
}
},
mounted () {
this.initChart()
this.getData()
window.addEventListener('resize', this.screenAdapter)
// 在页面加载完成的时候, 主动进行屏幕的适配
this.screenAdapter()
},
// 6. 组件销毁的时候清楚定时器 和 浏览器适配
destroyed () {
clearInterval(this.timerId)
// 在组件销毁的时候, 需要将监听器取消掉
window.removeEventListener('resize', this.screenAdapter)
},
methods: {
// 1. 初始化echartInstance对象
initChart () {
this.chartInstance = this.$echarts.init(this.$refs.seller_ref, 'chalk')
// 1.2 对图表初始化的数据抽离
const initOption = {
title: {
text: '▎商家销售统计',
left: 20,
top: 20
},
grid: {
top: '20%',
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true // 距离是包含坐标轴上的文字
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
z: 0,
lineStyle: {
color: '#2D3443'
}
}
},
series: [
{
type: 'bar',
label: {
show: true,
position: 'right',
textStyle: {
color: 'white'
}
},
itemStyle: {
// 指明颜色渐变的方向
// 指明不同百分比之下颜色的值
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
// 百分之0状态之下的颜色值
{
offset: 0,
color: '#5052EE'
},
// 百分之100状态之下的颜色值
{
offset: 1,
color: '#AB6EE5'
}
])
}
}
]
}
this.chartInstance.setOption(initOption)
// 7.当鼠标悬停在图表的时候 清除间隔刷新数据
this.chartInstance.on('mouseover', () => {
clearInterval(this.timerId)
})
// 8. 当鼠标离开的时候 设置间隔刷新数据
this.chartInstance.on('mouseout', () => {
this.startInterval()
})
},
// 2.获取服务器的数据
async getData () {
const { data: ret } = await this.$http.get('seller')
this.allData = ret
// 对数据排序
this.allData.sort((a, b) => {
return a.value - b.value // 从小到大的排序
})
// 每5个元素显示一页
this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1
this.updateChart()
// 启动定时器
this.startInterval()
},
// 3.更新图表
updateChart () {
const start = (this.currentPage - 1) * 5
const end = this.currentPage * 5
const showData = this.allData.slice(start, end)
const sellerNames = showData.map((item) => {
return item.name
})
const sellerValues = showData.map((item) => {
return item.value
})
const dataOption = {
yAxis: {
data: sellerNames
},
series: [
{
data: sellerValues
}
]
}
this.chartInstance.setOption(dataOption)
},
// 4. 设置定时器,让图表每隔3秒刷新
startInterval () {
if (this.timerId) {
clearInterval(this.timerId)
}
this.timerId = setInterval(() => {
this.currentPage++
if (this.currentPage > this.totalPage) {
this.currentPage = 1
}
this.updateChart()
}, 3000)
},
// 5. 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
screenAdapter () {
// console.log(this.$refs.seller_ref.offsetWidth)
const titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6
// 和分辨率大小相关的配置项
const adapterOption = {
title: {
textStyle: {
fontSize: titleFontSize
}
},
tooltip: {
axisPointer: {
lineStyle: {
width: titleFontSize
}
}
},
series: [
{
barWidth: titleFontSize,
itemStyle: {
barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0]
}
}
]
}
this.chartInstance.setOption(adapterOption)
// 手动的调用图表对象的resize 才能产生效果
this.chartInstance.resize()
}
}
}
</script>
<style lang="less" scoped>
</style>
实际截图:
image.png
二.折线图实现的功能完整版代码--具体如下:
<template>
<div class="com-container">
<!-- 下拉切换的主题 -->
<div class="title" :style="comStyle">
<span>{{ '▎ ' + showTitle }}</span>
<span class="iconfont title-icon" @click="showChice = !showChice" :style="comStyle">

</span>
<div class="select-con" v-show="showChice" :style="marginStyle">
<div
class="select-item"
style="cursor: pointer"
v-for="item in selectTypes"
:key="item.key"
@click="handleSelect(item)"
>
{{ item.text }}
</div>
</div>
</div>
<div class="com-chart" ref="trend_ref"></div>
</div>
</template>
<script>
export default {
data() {
return {
chartInstane: null,
allData: null, // // 从服务器中获取的所有数据
showChice: false, // 是否显示可选项
choiceType: "map", // 显示数据的类型
titleFontSize: 0 // 指明标题的字体大小
};
},
// 使用计算属性来获取到下拉选择框的值
computed: {
selectTypes() {
// 下拉框中的数据类型
return this.allData
? this.allData.type.filter((item) => item.key !== this.choiceType)
: [];
},
showTitle() {
return this.allData ? this.allData[this.choiceType].title : [];
},
// 设置给标题的样式
comStyle() {
return {
fontSize: this.titleFontSize + "px",
};
},
marginStyle() {
return {
marginLeft: this.titleFontSize + "px",
};
},
},
mounted() {
// 4. 调用 初始化方法 和 数据的请求
this.initChart();
this.getData();
// 5. 分辨率的适配问题
window.addEventListener("resize", this.screenAdapter);
this.screenAdapter(); // 主动调用一下实现适配效果
},
// 6.1 当组件销毁的时候 取消适配的监听
destroyed() {
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
// 7. 点击按钮实现下拉数据的切换
handleSelect(currentValue) {
this.choiceType = currentValue.key;
this.showChice = false;
this.updateChart();
},
// 5.1 适配问题
screenAdapter() {
// 5.2 定义一个适配的实例化对象
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,
},
},
};
// 5.3 挂载好 需要数据的配置渲染页面
this.chartInstane.setOption(adapterOption);
// 5.4 手动调用当前图表的resize 方法 实现手动适配效果
this.chartInstane.resize();
},
// 1. 初始化图表
initChart() {
// 1.1 拿到图表实例
this.chartInstane = this.$echarts.init(this.$refs.trend_ref, "chalk");
// 1.2 定义一个原始的option对象,定义一个原不需要数据的配置项,先进行页面配置
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",
},
};
// 1.3 挂载到 echarts中
this.chartInstane.setOption(initOption);
},
// 2. 获取服务器数据
async getData() {
const { data: res } = await this.$http.get("trend");
console.log(res);
this.allData = res;
// 2.2 获取到数据以后进行图表更新
this.updateChart();
},
// 3. 更新图表
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)",
];
// 3.1处理数据
const timeArr = this.allData.common.month; // 类目轴的数据 得到月份
// this.choiceType 是用来控制当前到底展示哪一类数据
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) => item.name);
const dataOption = {
xAxis: {
data: timeArr,
},
legend: {
data: legendArr,
},
series: seriesArr,
};
// 3.2 挂载好 需要数据的配置渲染页面
this.chartInstane.setOption(dataOption);
},
},
};
</script>
<style lang="less" scoped>
.title {
position: absolute;
left: 20px;
top: 20px;
z-index: 10;
color: white;
.title-icon {
margin-left: 10px;
cursor: pointer;
}
.select-con {
background-color: #222733;
}
}
</style>
实际截图:
image.png
地图具体代码:
utils/ map_utils.js
const name2pinyin = {
安徽: 'anhui',
陕西: 'shanxi1',
澳门: 'aomen',
北京: 'beijing',
重庆: 'chongqing',
福建: 'fujian',
甘肃: 'gansu',
广东: 'guangdong',
广西: 'guangxi',
贵州: 'guizhou',
海南: 'hainan',
河北: 'hebei',
黑龙江: 'heilongjiang',
河南: 'henan',
湖北: 'hubei',
湖南: 'hunan',
江苏: 'jiangsu',
江西: 'jiangxi',
吉林: 'jilin',
辽宁: 'liaoning',
内蒙古: 'neimenggu',
宁夏: 'ningxia',
青海: 'qinghai',
山东: 'shandong',
上海: 'shanghai',
山西: 'shanxi',
四川: 'sichuan',
台湾: 'taiwan',
天津: 'tianjin',
香港: 'xianggang',
新疆: 'xinjiang',
西藏: 'xizang',
云南: 'yunnan',
浙江: 'zhejiang'
}
export function getProvinceMapInfo (arg) {
const path = `/static/map/province/${name2pinyin[arg]}.json`
return {
key: name2pinyin[arg],
path: path
}
}
map地图具体代码
<!-- 商家分布图表 -->
<template>
<div class='com-container' @dblclick="revertMap">
<div class='com-chart' ref='map_ref'></div>
</div>
</template>
<script>
// 获取的是本地的Public里面的数据
import axios from 'axios'
import { getProvinceMapInfo } from '@/utils/map_utils'
export default {
data () {
return {
chartInstance: null,
allData: null,
mapData: {} // 所获取的省份的地图矢量数据
}
},
mounted () {
this.initChart()
this.getData()
window.addEventListener('resize', this.screenAdapter)
this.screenAdapter()
},
destroyed () {
window.removeEventListener('resize', this.screenAdapter)
},
methods: {
async initChart () {
this.chartInstance = this.$echarts.init(this.$refs.map_ref, 'chalk') // 主题设置
// 获取中国地图的矢量数据 (获取的是本地的Public里面的数据)
// http://localhost:8999/static/map/china.json
// 由于我们现在获取的地图矢量数据并不是位于KOA2的后台, 所以咱们不能使用this.$http
const ret = await axios.get('http://localhost:8999/static/map/china.json')
this.$echarts.registerMap('china', ret.data)
const initOption = {
title: { // 标题的位置和信息展示
text: '▎ 商家分布',
left: 20,
top: 20
},
geo: { // 地图位置的设置
type: 'map',
map: 'china',
top: '5%',
bottom: '5%',
itemStyle: {
areaColor: '#2E72BF',
borderColor: '#333'
}
},
// 图例位置的控制
legend: {
left: '5%',
bottom: '5%',
orient: 'vertical' // vertical(垂直方向): 从上往下的摆放
}
}
this.chartInstance.setOption(initOption)
this.chartInstance.on('click', async arg => {
console.log(arg);
// arg.name 得到所点击的省份, 这个省份他是中文
const provinceInfo = getProvinceMapInfo(arg.name)
console.log(provinceInfo)
// 需要获取这个省份的地图矢量数据
// 判断当前所点击的这个省份的地图矢量数据在mapData中是否存在
if (!this.mapData[provinceInfo.key]) {
const ret = await axios.get('http://localhost:8999' + provinceInfo.path)
console.log(ret);
this.mapData[provinceInfo.key] = ret.data
this.$echarts.registerMap(provinceInfo.key, ret.data)
}
const changeOption = {
geo: {
map: provinceInfo.key
}
}
this.chartInstance.setOption(changeOption)
})
},
async getData () {
// 获取服务器的数据, 对this.allData进行赋值之后, 调用updateChart方法更新图表
const { data: ret } = await this.$http.get('map')
this.allData = ret
console.log(this.allData)
this.updateChart()
},
updateChart () {
// 处理图表需要的数据
// 图例的数据
const legendArr = this.allData.map(item => {
return item.name
})
const seriesArr = this.allData.map(item => {
// return的这个对象就代表的是一个类别下的所有散点数据
// 如果想在地图中显示散点的数据, 我们需要给散点的图表增加一个配置, coordinateSystem:geo
return {
type: 'effectScatter',
rippleEffect: { // 控制涟漪的效果
scale: 5,
brushType: 'stroke' // 空心涟漪动画效果
},
name: item.name,
data: item.children,
coordinateSystem: 'geo'
}
})
const dataOption = {
legend: {
data: legendArr
},
series: seriesArr
}
this.chartInstance.setOption(dataOption)
},
// 窗口大小发生变化的适配
screenAdapter () {
const titleFontSize = this.$refs.map_ref.offsetWidth / 100 * 3.6
const adapterOption = {
title: { // 窗口大小发生变化时: 标题文字的大小
textStyle: {
fontSize: titleFontSize
}
},
legend: { // 窗口大小发生变化时: 图例的大小
itemWidth: titleFontSize / 2,
itemHeight: titleFontSize / 2,
itemGap: titleFontSize / 2, // 间隔
textStyle: {
fontSize: titleFontSize / 2
}
}
}
this.chartInstance.setOption(adapterOption)
this.chartInstance.resize()
},
// 回到中国地图
revertMap () {
const revertOption = {
geo: {
map: 'china'
}
}
this.chartInstance.setOption(revertOption)
}
}
}
</script>
<style lang='less' scoped>
</style>
实际截图
image.png
四.柱状图实际代码
<template>
<div class="com-container">
<div class="com-chart" ref="rank_ref"></div>
</div>
</template>
<script>
export default {
data() {
return {
chartInstance: null,
allData: null,
startValue: 0, // 区域缩放的起点
endValue: 9, // 区域缩放的终点
timerId: null,
};
},
mounted() {
this.initChart();
this.getDate();
window.addEventListener("resize", this.screenAdapter);
this.screenAdapter();
},
destroyed() {
window.removeEventListener("resize", this.screenAdapter);
clearInterval(this.timerId);
},
methods: {
// 1. 初始化数据
initChart() {
this.chartInstance = this.$echarts.init(this.$refs.rank_ref, "chalk");
const initOption = {
title: {
text: "▎地区销售排行",
left: 20,
top: 20,
},
grid: {
// 坐标网格的配置
top: "40%",
left: "5%",
right: "5%",
bottom: "5%",
containLabel: true,
},
tooltip: {
show: true,
},
xAxis: {
type: "category",
},
yAxis: {
type: "value",
},
series: [
{
type: "bar",
},
],
};
this.chartInstance.setOption(initOption);
this.chartInstance.on("mouseover", () => {
clearInterval(this.timerId);
});
this.chartInstance.on("mouseout", () => {
this.startInterval();
});
},
// 2. 获取图表的数据
async getDate() {
const res = await this.$http.get("rank");
console.log(res.data);
this.allData = res.data;
this.allData.sort((a, b) => {
// 对元素进行排序
return b.value - a.value;
});
this.updateChart();
// 启用数据向左平移的定时器
this.startInterval();
},
// 3. 图表需要处理的数据
updateChart() {
const colorArr = [
["#0BA82C", "#4FF778"],
["#2E72BF", "#23E5E5"],
["#5052EE", "#AB6EE5"],
];
// 所有省份的数组
const provinceArr = this.allData.map((item) => {
return item.name;
});
// console.log(provinceArr);
// 所有省份对应的销售金额
const valueArr = this.allData.map((item) => {
return item.value;
});
const dataOption = {
xAxis: {
data: provinceArr,
},
dataZoom: {
// 实现动态数据向左平移
show: true, // 隐藏那个进度的柱子
startValue: this.startValue,
endValue: this.endValue,
},
series: [
{
data: valueArr,
itemStyle: {
color: (arg) => {
let targetColorArr = null;
if (arg.value > 300) {
targetColorArr = colorArr[0];
} else if (arg.value > 200) {
targetColorArr = colorArr[1];
} else {
targetColorArr = colorArr[2];
}
return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: targetColorArr[0],
},
{
offset: 1,
color: targetColorArr[1],
},
]);
},
},
},
],
};
this.chartInstance.setOption(dataOption);
},
// 4. 当浏览器大小发生改变时需要的方法
screenAdapter() {
const titleFontSize = (this.$refs.rank_ref.offsetWidth / 100) * 3.6;
const adapterOption = {
title: {
textStyle: {
fontSize: titleFontSize,
},
},
series: [
{
barWidth: titleFontSize,
itemStyle: {
barBorderRadius: [titleFontSize / 2, titleFontSize / 2, 0, 0],
},
},
],
};
this.chartInstance.setOption(adapterOption);
this.chartInstance.resize();
},
// 定时器实现柱状图定时数据向左平移
startInterval() {
if (this.timerId) {
clearInterval(this.timerId);
}
this.timerId = setInterval(() => {
this.startValue++;
this.endValue++;
if (this.endValue > this.allData.length - 1) {
this.startValue = 0;
this.endValue = 9;
}
this.updateChart();
}, 2000);
},
},
};
</script>
<style lang="less" scoped>
</style>
实际截图
image.png
五.饼图具体代码
<!-- 热销商品图表 -->
<template>
<div class="com-container">
<div class="com-chart" ref="hot_ref"></div>
<span class="iconfont arr-left" @click="toLeft" :style="comStyle"
></span
>
<span class="iconfont arr-right" @click="toRight" :style="comStyle"
></span
>
<span class="cat-name" :style="comStyle">{{ catName }}</span>
</div>
</template>
<script>
export default {
data() {
return {
chartInstance: null,
allData: null,
currentIndex: 0, // 当前所展示出的一级分类数据
titleFontSize: 0,
};
},
computed: {
catName() {
if (!this.allData) {
return "";
} else {
return this.allData[this.currentIndex].name;
}
},
comStyle() {
return {
fontSize: this.titleFontSize + "px",
};
},
},
mounted() {
this.initChart();
this.getData();
window.addEventListener("resize", this.screenAdapter);
this.screenAdapter();
},
destroyed() {
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
initChart() {
this.chartInstance = this.$echarts.init(this.$refs.hot_ref, "chalk");
const initOption = {
title: {
text: "▎ 热销商品的占比",
left: 20,
top: 20,
},
legend: {
top: "15%",
icon: "circle",
},
tooltip: {
show: true,
formatter: (arg) => {
// console.log(arg)
const thirdCategory = arg.data.children;
// 计算出所有三级分类的数值总和
let total = 0;
thirdCategory.forEach((item) => {
total += item.value;
});
let retStr = "";
thirdCategory.forEach((item) => {
retStr += `
${item.name}:${parseInt((item.value / total) * 100) + "%"}
<br/>
`;
});
return retStr;
},
},
series: [
{
type: "pie",
label: {
show: false,
},
emphasis: {
label: {
show: true,
},
labelLine: {
show: false,
},
},
},
],
};
this.chartInstance.setOption(initOption);
},
async getData() {
// 获取服务器的数据, 对this.allData进行赋值之后, 调用updateChart方法更新图表
const { data: ret } = await this.$http.get("hotproduct");
this.allData = ret;
console.log(this.allData);
this.updateChart();
},
updateChart() {
// 处理图表需要的数据
const legendData = this.allData[this.currentIndex].children.map(
(item) => {
return item.name;
}
);
const seriesData = this.allData[this.currentIndex].children.map(
(item) => {
return {
name: item.name,
value: item.value,
children: item.children, // 新增加children的原因是为了在tooltip中的formatter的回调函数中,来拿到这个二级分类下的三级分类数据
};
}
);
const dataOption = {
legend: {
data: legendData,
},
series: [
{
data: seriesData,
},
],
};
this.chartInstance.setOption(dataOption);
},
screenAdapter() {
this.titleFontSize = (this.$refs.hot_ref.offsetWidth / 100) * 3.6;
const adapterOption = {
title: {
textStyle: {
fontSize: this.titleFontSize,
},
},
legend: {
itemWidth: this.titleFontSize / 2,
itemHeight: this.titleFontSize / 2,
itemGap: this.titleFontSize / 2,
textStyle: {
fontSize: this.titleFontSize / 2,
},
},
series: [
{
radius: this.titleFontSize * 4.5,
center: ["50%", "60%"],
},
],
};
this.chartInstance.setOption(adapterOption);
this.chartInstance.resize();
},
toLeft() {
this.currentIndex--;
if (this.currentIndex < 0) {
this.currentIndex = this.allData.length - 1;
}
this.updateChart();
},
toRight() {
this.currentIndex++;
if (this.currentIndex > this.allData.length - 1) {
this.currentIndex = 0;
}
this.updateChart();
},
},
};
</script>
<style lang='less' scoped>
.arr-left {
position: absolute;
left: 10%;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: white;
}
.arr-right {
position: absolute;
right: 10%;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: white;
}
.cat-name {
position: absolute;
left: 80%;
bottom: 20px;
color: white;
}
</style>
实际截图
image.png
七.环形图
<!-- 库存销量分析 -->
<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;
console.log(this.allData);
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(); // 在更改完currentIndex之后 , 需要更新界面
}, 5000);
},
},
};
</script>
<style lang='less' scoped>
</style>
实际截图
image.png
网友评论