echarts 折线图,可滑动
程序员文章站
2022-06-19 16:22:06
1、主要得展示-折线图，x轴可以滑动，如图详细代码如下：
本月客流图表
1、主要得展示-折线图，x轴可以滑动，如图
详细代码如下：
<template>
<div class="month-charts">
<div class="month-charts-content">
<div class="month-charts-title">本月客流图表</div>
<eCharts
class="flow-chart-box"
:options="flowOptions(echartsData)"
></eCharts>
</div>
</div>
</template>
<script>
import moment from "moment";
import eCharts from "vue-echarts";
import { monthFlowOptions } from "../monthConfig.js";
export default {
components: { eCharts },
data() {
return {
curMonth: null,
curDays: [],
echartsData: {},
};
},
created() {
this.getNowMonth();
},
methods: {
getNowMonth() {
this.curMonth = moment().month() + 1;
let days = moment().daysInMonth();
for (let i = 1; i <= days; i++) {
this.curDays.push(this.curMonth + "." + i);
}
},
flowOptions(data) {
return monthFlowOptions(data, this.curMonth, this.curDays);
},
},
};
</script>
<style lang="scss" scoped>
.month-charts {
position: relative;
top: -10px;
width: 100%;
height: 322px;
border: 1px solid red;
display: flex;
justify-content: center;
.month-charts-content {
width: 90%;
border: 1px solid black;
background-color: #fff;
border-radius: 4px;
padding: 4% 4%;
.month-charts-title {
font-size: 16px;
font-family: PingFangSC;
color: #000000;
}
}
.flow-chart-box {
width: 100%;
height: 280px;
}
}
</style>
图表组件数据
import moment from "moment";
export const monthFlowOptions = function (data, curMonth, curDays) {
let viewLength = 7;
let listLength = curDays.length;
let startValue = listLength - viewLength < 0 ? 0 : listLength - viewLength;
let endValue = listLength - 1;
let curYear = moment().year()
return {
title: {
subtext: "客流量（人）",
},
xAxis: {
// boundaryGap: true, //false没有边距，true有边距
data: curDays,
axisTick: {
show: false, //去除刻度线
},
axisLabel: {
color: '#4d4d4d',
fontSize: 11,
interval: 0, //x轴刻度配置，0:表示全部显示不间隔，auto:表示自动根据刻度个数和宽度自动设置间隔个数
},
axisLine: {
lineStyle: {
color: '#e6e6e6', //y轴轴线颜色
}
},
},
yAxis: {
type: "value",
data: [0, 100, 200, 300, 400, 500, 600],
axisTick: {
show: false, //去除刻度线
},
axisLabel: {
color: '#4d4d4d', //文本颜色
},
axisLine: {
lineStyle: {
color: "#e6e6e6", //y轴轴线颜色
}
},
splitLine: { //网格线
lineStyle: {
color: "#e6e6e6",
type: "dashed",
},
show: true
}
},
series: [
{
type: "line",
data: [233, 44, 33, 333, 434, 155, 600, 455, 343, 4, 343, 55, 33, 554, 600, 242, 222, 322, 144, 322, 55, 66, 33, 75, 88, 454, 64, 234, 134, 343, 11],
symbolSize: 6, //拐点大小
color: ["#DC4A46"],
smooth: false, //折线有无弧度
animationDuration: 500,
markLine: { //平均线设置
silent: true, //true去掉鼠标悬浮线上的动画
symbol: "none", //该线无样式
label: {
// show: false, //该线上得值去掉
formatter: "均客线",
padding: [-13, -20, -40, -45]
},
lineStyle: {
normal: {
type: "solid",
color: "#000000"
}
},
data: [{ type: 'average', name: "平均值" }]
}
}
],
grid: {//折线图位置
top: "15%",
left: "1%",
right: "1%",
bottom: "10%",
backgroundColor: "#fff",
containLabel: true
},
tooltip: { //提示框取值默认值，即鼠标移动到柱状图会显示内容
trigger: "axis", //触发类型；轴触发，axis则鼠标hover到折线图显示全部数据，item则鼠标hover到折线点显示相应数据
position: function (point, params, dom, rect, size) { //设置提示框位置随鼠标移动，并解决提示框显示不全的问题
var x = 0; //x坐标位置
var y = 0; //y坐标位置
var pointX = point[0]; //当前鼠标位置
var pointY = point[1];
var boxWidth = size.contentSize[0]; //提示框大小
var boxHeight = size.contentSize[1];
if (boxWidth > pointX) { //boxWdith > pointx 说明鼠标左边放不下提示框
x = 5;
} else { //左边放得下
x = pointX - boxWidth;
}
//boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5;
} else { //上边放得下
y = pointY - boxHeight;
}
return [x, y]
},
axisPointer: {
type: "line"
},
formatter: function (params) { //提示框文案
return curYear + '.' + params[0].name + '<br/>' + "客流：" + params[0].value
}
},
// 缩放平移组件
dataZoom: [
{
type: 'inside', //slider有滑块，inside内置
disabled: false, //是否停止组件功能
xAxisIndex: 0, //x轴,可以用数组表示多个轴
zoomLock: true, //是否锁定区域大小（true,只能平移不能缩放）
preventDefaultMouseMove: false,
filterMode: "empty",
startValue: startValue, //一行有几个（起始数组下标）
endValue: endValue, //一行有几个（结束数组下标）
start: null,
end: null,
},
]
}
}
特别要注意得是，在引用得一些echarts组件时要进行配置，若不配置，可能引发一些数据得不能试用
在echarts配置中，引入，例子，在相应得echarts.js中
import Vue from "vue";
//映入echarts
import ECharts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/chart/pie";
import "echarts/lib/chart/gauge";
import 'echarts/lib/chart/radar';
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/lib/component/dataZoom";
import "echarts/lib/component/toolbox";
import "echarts/lib/component/visualMap";
import 'echarts/lib/component/markLine';
Vue.component("v-charts", ECharts);
本文地址：https://blog.csdn.net/weixin_43843679/article/details/109240659
上一篇： WPS表格打印页号