This is an echarts data display used in the vue project. The introduced echarts is version 5.4.2 .
First: Install echarts
npm install ECharts
npm install echarts --save
Second: introduce projects
Versions after 5.0 are imported in this way
import * as echarts from "echarts";
1.HTML in vue project
<template>
<div class="main">
<div id="box" ref="box"></div>
<div class="data-selete">
<span :class="['line-dot',currentIndex == '7' ? 'active' : '']" @click="toggleTime('7')">近七天</span>
<span :class="['line-dot',currentIndex == '30' ? 'active' : '']" @click="toggleTime('30')">近30天</span>
<span :class="['line-dot',currentIndex == '12' ? 'active' : '']" @click="toggleTime('12')">近12月</span>
</div>
</div>
</template>
2.js in vue project
For the histogram inside, I slowly adjusted it one by one. Anyone who has a good method can give me some advice.
<script>
import * as echarts from "echarts";
import {
getSevenDays,getMonthDays, getOneYears } from '@/utils/formatDate.js'
export default {
data(){
return {
dataList:{
data:['2','8','6','10','12','8','6'],
textData:[],
sevenDays:[],
monthList: [],
yearList: []
},
myEcharts:null,
option: {
},
currentIndex: '7'
}
},
mounted() {
this.dataList.textData = getSevenDays()
let that = this;
that.myEcharts = that.myEcharts||echarts.init(document.querySelector('#box'));
// 初始化数据
that.initChart();
window.addEventListener('resize', () => {
that.myEcharts && that.myEcharts.resize();
})
},
methods:{
// 初始化数据
initChart(){
this.option = {
// 直角坐标系 grid 中的 x 轴
xAxis: {
type: 'category', // 坐标轴类型。'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
data: this.dataList.textData, // 类目数据，在类目轴（type: 'category'）中有效。
// x坐标轴为虚线
axisLine: {
lineStyle: {
color: 'rgba(11, 73, 125, 0.33)',
opacity: 0.8
}
},
// 不展示下面｜刻度
axisTick: {
show: false // 是否显示坐标轴刻度。
},
// 坐标轴刻度标签的相关设置。
axisLabel: {
show: true, // 是否显示刻度标签。
color: '#333',
fontSize: 12 // 字体大小
}
},
// 直角坐标系 grid 中的 y 轴
yAxis: {
name:'单位：件', // 坐标轴名称。
// 坐标轴名称的文字样式。
nameTextStyle:{
color:'#aaa',
padding:[0,0,0,-6]
},
type: 'value', // 坐标轴类型。 'value' 数值轴，适用于连续数据。
// 不展示刻度线
splitLine: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(11, 73, 125, 0.33)',
opacity: 0.8
}
},
axisLabel: {
show: true,
color: '#333',
fontSize: 12 // 字体大小
}
},
// 栅格
grid: {
left: '1%',
right: '5%',
bottom: '2%',
top: '15%',
containLabel: true
},
series: [
// 数据低下的圆片
{
name: '',
type: 'pictorialBar', // 象形柱图 象形柱图是可以设置各种具象图形元素
symbol: 'diamond', // 图形类型。 'diamond' 有钻石，菱形，方块的意思
symbolSize: [24, 12], // 宽，高 图形的大小。
symbolOffset: [0, 7], // 左 上 图形相对于原本位置的偏移。
symbolPosition: 'start', // 图形的定位位置 'start'：图形边缘与柱子开始的地方内切。
z: 1, // 象形柱图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
data: this.dataList.data,
itemStyle: {
color: (params) => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, color: '#3860c3' },
{
offset: 1, color: '#3860c3'}
]);
}
}
},
// 数据的柱状图
{
name: '',
type: 'bar',
barWidth: 12, // 柱条的宽度，不设时自适应。
data:this.dataList.data,
itemStyle: {
color: (params) => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, color: '#2eb440' },
{
offset: 1, color: '#3358b3'}
]);
},
}
},
{
name: '',
type: 'bar',
barWidth: 12, // 柱条的宽度，不设时自适应。
barGap: 0, // 不同系列的柱间距离
data: this.dataList.data,
itemStyle: {
color: (params) => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, color: '#2eb440' },
{
offset: 1, color: '#3358b3'}
]);
},
borderWidth: 0.1,
borderColor: 'transparent'
}
},
// 数据顶部的样式
{
name: '',
type: 'pictorialBar',
symbol: 'diamond',
symbolSize: [24, 12], // 宽，高
symbolOffset: [0, -7], // 左 上
symbolPosition: 'end',
z: 3,
itemStyle: {
color: (params) => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, color: '#3fc74e' },
{
offset: 1, color: '#31b540'}
]);
},
},
label: {
show: true, // 开启显示
position: 'top', // 在上方显示
fontSize: '12',
color: '#333'
},
data: this.dataList.data
}
],
tooltip: {
//提示框组件
trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: (parma)=>{
return `<div>${
parma.name}的数据：${
parma.data}</div>`
}
},
title: {
text: '已办任务',
left:'2',
top: '0',
color:'#3e3e3e',
textStyle: {
fontSize: '14px'
}
},
};
this.myEcharts.setOption(this.option);
},
// 切换时间
toggleTime(val) {
this.currentIndex = val
if(val == '7') {
this.dataList.textData = getSevenDays()
this.dataList.data = ['2','8','6','10','12','8','6']
this.initChart();
} else if(val =='30') {
// this.myEcharts && this.myEcharts.dispose();
this.dataList.textData = getMonthDays()
this.dataList.data = ['2','8','6','10','12','8','6','2','8','6','10','12','8','6','2','8','6','10','12','8','6','2','8','6','10','12','8','6','2','8']
this.initChart();
// this.myEcharts.setOption(this.option)
} else {
this.dataList.textData = getOneYears();
this.dataList.data = ['22','82','61','14','12','8','6','22','44','6','10','12']
this.initChart();
}
}
},
beforeDestroy () {
this.myEcharts && this.myEcharts.dispose();
this.myEcharts = null;
},
}
</script>
3.css in vue project
<style scoped>
#box {
width: 100%;
height: 300px;
}
.main{
padding: 10px;
border-radius: 5px;
height: 400px;
/* margin-top: 10px; */
position: relative;
}
.data-selete{
position: absolute;
right: 55px;
top: 14px;
}
.data-selete span{
padding-left: 20px;
color: #bebebe;
font-size: 16px;
}
.data-selete span:hover{
color: #2255f5;
cursor: pointer;
}
.data-selete .line-dot{
position: relative;
}
.data-selete .line-dot::after{
position: absolute;
content: '';
right: -11px;
width: 2px;
height: 16px;
background: #bebebe;
top: 1px;
}
.data-selete .active{
color: #2255f5;
}
</style>
Third: renderings
The data switched here is temporarily hard-coded data.
7 days,
30 days and 
12 months
. Fifth: How to get time found online
. I looked at my project and did not introduce moment.js or day.js, so I can only look online.
// 获取最近7天的时间
export function getSevenDays() {
var myDate = new Date();
myDate.setDate(myDate.getDate() - 7);
var dateArray = [];
var dateTemp;
var flag = 1;
for (var i = 0; i < 7; i++) {
dateTemp = myDate.getFullYear()+"/"+ (myDate.getMonth()+1)+"/"+myDate.getDate();
dateArray.push(dateTemp);
myDate.setDate(myDate.getDate() + flag);
}
return dateArray;
}
// 获取最近30天的数据
export function getMonthDays() {
// JS获取最近三十天的日期
const dateTime = new Array(30).fill(0).map((_,idx)=> new Date(new Date().getTime()-idx*(24*60*60*1000)).toLocaleDateString().replaceAll("-","/")).reverse()
return dateTime
}
// 获取最近一年的年月日
export function getOneYears() {
var dataArr = [];
var data = new Date();
var year = data.getFullYear();
data.setMonth(data.getMonth()+1, 1)
for (var i = 0; i < 12; i++) {
data.setMonth(data.getMonth() - 1);
var m = data.getMonth() + 1;
m = m < 10 ? "0" + m : m;
dataArr.push(data.getFullYear() + "/" + (m))
}
return dataArr.reverse()
}