Vue+Echarts的基本使用方法
- 设置
echarts的div容器，并设置宽高； - 获取
Echarts实例 - 请求服务端数据
- 初始化图表
- 更新图表
- 屏幕适配
- 定时切换数据
- 销毁定时器和监听屏幕resize
HTML
<div class="com-container">
<div class="com-chart" ref="seller_ref">div>
div>
JavaScript
1.data数据
data() {
return {
chartInstance: null, // echarts实例
allData: [], // 存放图表数据
currentPage: 1, //当前显示页数
totalPage: 0, //一共多少页
timerId: null, //定时器标识
};
},
2.mounted生命周期挂载数据
- 初始化
Echart对象 - 请求数据
- 当浏览器窗口大小发生改变时，自动调用屏幕自适应函数（
screenAdapter）。 - 在页面加载完成的时候, 主动进行屏幕的适配（调用
screenAdapter函数）
mounted() {
// 初始化加载数据
this.initChart();
//请求数据
this.getData();
//浏览器窗口大小发生改变时，自动调用屏幕自适应函数
window.addEventListener("resize", this.screenAdapter);
// 在页面加载完成的时候, 主动进行屏幕的适配
this.screenAdapter();
},
3. methods中相关方法
请求数据
请求数据后调用updateChart()和startInterval()
//获取服务器的数据
async getData() {
// const params = {
// // 这里放需要的参数
// };
// 调用api.js中的getData方法获取数据
const ret = await api.getData();
// 将获取到的数据赋值给allData
this.allData = ret;
// 打印allData数组
console.log(this.allData, "==============2");
// 根据value属性进行升序排序
this.allData.sort((a, b) => {
return a.value - b.value;
});
// 计算总页数，每页展示5条数据
this.totalPage = Math.ceil(this.allData.length / 5);
this.updateChart();
this.startInterval();
},
3.1 initChart初始化实例对象
// 初始化chartInstance对象
initChart() {
// 获取echarts实例
this.chartInstance = this.$echarts.init(this.$refs.seller_ref, "chalk");
//initOption为初始化配置，不包含数据和字体，width相关自适应分辨率相关属性
const initOption = {
title: {
text: "丨 商家销售统计",
left: 20, //控制标题位置
top: 10,
},
//grid控制图表坐标轴位置
grid: {
top: "20%",
left: "3%",
right: "6%",
bottom: "3%",
containLabel: true, //包含坐标轴文字
},
xAxis: {
type: "value",
},
//y轴为类目轴
yAxis: {
type: "category",
},
//背景悬浮框
tooltip: {
trigger: "axis",
axisPointer: {
type: "line",
z: 0,
lineStyle: {
color: "#2D3443",
},
},
},
series: [
{
type: "bar",
//控制柱状条里面的label标签属性
label: {
show: true, //是否显示label标签
position: "right", //label标签在柱状条中的位置
textStyle: {
color: "#fff", //控制标签颜色
},
},
itemStyle: {
// 指明颜色渐变的方向
// 指明不同百分比之下颜色的值
//x1.y1.x2.y2,从左往右（0，0，1，0）或者从右往左，只需要控制x1，x2，上下则控制y1,y2
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
// 百分之0状态之下的颜色值
{
offset: 0,
color: "#5052EE",
},
// 百分之100状态之下的颜色值
{
offset: 1,
color: "#AB6EE5",
},
]),
},
},
],
};
//设置图表配置项
this.chartInstance.setOption(initOption);
//对图标对象进行鼠标事件监听
this.chartInstance.on("mouseover", () => {
clearInterval(this.timerId);
});
this.chartInstance.on("mouseout", () => {
this.startInterval();
});
},
3.2 更新图表updateChart
配置数据项dataOption
// 更新图表
updateChart() {
// 计算分页起始和结束位置
const start = (this.currentPage - 1) * 5;
const end = this.currentPage * 5;
// 获取当前页要显示的数据
const showData = this.allData.slice(start, end); // slice方法包含start，不包含end
// 获取当前页要显示的商家名和销售额
const sellerNames = showData.map((item) => {
// 这里的showData不需要加this
return item.name;
});
const sellerValues = showData.map((item) => {
return item.value;
});
// 配置图表数据
const dataOption = {
// y轴为类目轴
yAxis: {
data: sellerNames,
},
series: [
{
data: sellerValues,
},
],
};
// 设置图表数据
this.chartInstance.setOption(dataOption);
},
3.3 屏幕适配函数screenAdapter
// 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
screenAdapter() {
// 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);
this.chartInstance.resize();
},
3.4 每3秒切换数据
//启动定时器tartInterval，每3秒切换
startInterval() {
if (this.timerId) {
clearInterval(this.timerId);
}
this.timerId = setInterval(() => {
this.currentPage++;
if (this.currentPage > this.totalPage) {
this.currentPage = 1;
}
this.updateChart();
}, 3000);
},
destoryed生命周期函数
clearInterval(this.timerId);
window.removeEventListener("resize", this.screenAdapter);
CSS
html, body, #app {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.com-page {
width: 100%;
height: 100%;
overflow: hidden;
}
.com-container {
width: 100%;
height: 100%;
overflow: hidden;
}
.com-chart {
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
border-radius: 20px;
}
//设置border圆角
附全部完整代码
<template>
<div class="com-container">
<div class="com-chart" ref="seller_ref"></div>
</div>
</template>
<script>
import api from "../api/registService.js";
export default {
name: "Seller",
data() {
return {
chartInstance: null,
allData: [],
currentPage: 1, //当前显示页数
totalPage: 0, //一共多少页
timerId: null, //定时器标识
};
},
mounted() {
// 初始化加载数据
this.initChart();
this.getData();
window.addEventListener("resize", this.screenAdapter);
// 在页面加载完成的时候, 主动进行屏幕的适配
this.screenAdapter();
},
destroyed() {
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
//获取服务器的数据
async getData() {
// const params = {
// // 这里放需要的参数
// };
// 调用api.js中的getData方法获取数据
const ret = await api.getData();
// 将获取到的数据赋值给allData
this.allData = ret;
// 打印allData数组
console.log(this.allData, "==============2");
// 根据value属性进行升序排序
this.allData.sort((a, b) => {
return a.value - b.value;
});
// 计算总页数，每页展示5条数据
this.totalPage = Math.ceil(this.allData.length / 5);
this.updateChart();
this.startInterval();
},
// 初始化chartInstance对象
initChart() {
this.chartInstance = this.$echarts.init(this.$refs.seller_ref, "chalk");
//initOption为初始化配置，不包含数据和字体，width相关自适应分辨率相关属性
const initOption = {
title: {
text: "丨 商家销售统计",
left: 20, //控制标题位置
top: 10,
// textStyle: {
// //控制标题样式
// fontSize: 66,
// },
},
//grid控制图表坐标轴位置
grid: {
top: "20%",
left: "3%",
right: "6%",
bottom: "3%",
containLabel: true, //包含坐标轴文字
},
xAxis: {
type: "value",
},
//y轴为类目轴
yAxis: {
type: "category",
},
//背景悬浮框
tooltip: {
trigger: "axis",
axisPointer: {
type: "line",
z: 0,
lineStyle: {
color: "#2D3443",
},
},
},
series: [
{
type: "bar",
//控制柱状条里面的label标签属性
label: {
show: true, //是否显示label标签
position: "right", //label标签在柱状条中的位置
textStyle: {
color: "#fff", //控制标签颜色
},
},
itemStyle: {
barBorderRadius: [0, 100, 100, 0], //控制柱状条圆角
// 指明颜色渐变的方向
// 指明不同百分比之下颜色的值
//x1.y1.x2.y2,从左往右（0，0，1，0）或者从右往左，只需要控制x1，x2，上下则控制y1,y2
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
// 百分之0状态之下的颜色值
{
offset: 0,
color: "#5052EE",
},
// 百分之100状态之下的颜色值
{
offset: 1,
color: "#AB6EE5",
},
]),
},
},
],
};
this.chartInstance.setOption(initOption);
//对图标对象进行鼠标事件监听
this.chartInstance.on("mouseover", () => {
clearInterval(this.timerId);
});
this.chartInstance.on("mouseout", () => {
this.startInterval();
});
},
// 更新图表
updateChart() {
// 计算分页起始和结束位置
const start = (this.currentPage - 1) * 5;
const end = this.currentPage * 5;
// 获取当前页要显示的数据
const showData = this.allData.slice(start, end); // slice方法包含start，不包含end
// 获取当前页要显示的商家名和销售额
const sellerNames = showData.map((item) => {
// 这里的showData不需要加this
return item.name;
});
const sellerValues = showData.map((item) => {
return item.value;
});
// 配置图表数据
const dataOption = {
// y轴为类目轴
yAxis: {
data: sellerNames,
},
series: [
{
data: sellerValues,
},
],
};
// 设置图表数据
this.chartInstance.setOption(dataOption);
},
//启动定时器tartInterval，每3秒切换
startInterval() {
if (this.timerId) {
clearInterval(this.timerId);
}
this.timerId = setInterval(() => {
this.currentPage++;
if (this.currentPage > this.totalPage) {
this.currentPage = 1;
}
this.updateChart();
}, 3000);
},
beforeDestroy() {
clearInterval(this.timerId);
},
// 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
screenAdapter() {
// 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);
this.chartInstance.resize();
},
},
};
</script>
<style lang="less" scoped></style>