界面效果
下载以及引入
npm install echarts -S
在main.js中引入echarts import echarts from ‘echarts’ Vue.prototype.$echarts = echarts 创建板块
<div class="echartsLeft1 echart">
<div
class="HelloWorld echart-box"
id="myChart1"
></div>
</div>
定义方法
data() {
return {
// 定义图表，各种参数
msg: "柱状图",
//左边第一个前五名柱状表格需要的数据
datass: [
{
value:1,//打卡次数
name:"黄",//姓名
},
{
value:2,
name:"童"
},
{
value:3,
name:"李"
},
{
value:4,
name:"吴"
},
{
value:5,
name:"张"
}
],
//myChart1是前五名的打卡次数，柱状图需要将数据拆开之后分别放到两个数组中
myChart1:[],
//前五名的名字
name:[],
index:0,
}，
mounted: function () {
//模拟拿到了左边第一个柱状图数据datass，并且进行分离
this.datass.forEach(item =>{
console.log(item.name,item.value);
this.myChart1[this.index]=item.value,
this.name[this.index]=item.name
this.index++
});
console.log(this.myChart1,this.name);
this.drawLine(); //按照默认值绘制图表
}，
watch: {
//左边第一个柱状图的要求
myChart1: {
//对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据
handler: function () {
this.drawLine();
},
deep: true,
}
}，
methods: {
//打卡次数前五名
drawLine() {
// 1、基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart1"));
//2、构造图表数据
let options = {
title: {
text: "打卡次数前五名",
left: "center",
tooltip: {},
},
xAxis: {
data:this.name
},
yAxis: {},
series: [
{
name: "姓名",
data: this.myChart1,
type: "bar",
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 10
}
}
}
}
},
],
};
// 3、绘制图表
myChart.setOption(options);
}
}
以上是第一个柱状图的定义与参数，总结就是先绘制div表格在template里面，之后定义数据，然后在watch里面进行深度监视，监视数据变化，在mounted拆分数组分到两个数组中，之后调用this.drawLine();绘制图形，再到methods里面定义方法
之后三个也是类似的，主要注意点就是有时候数据更新了表格却检测不到
数据更新表格却不会重绘制？？
已经检测到数据更新，但是watch里面也有深度监视，但表格就是不会重新绘制 此时可以使用重新调用表格的方法this.drawLine()重新绘制图形,就是在数据更新后调用这个函数，便可以解决表格无法重绘的问题 例如
//拿到更新后的左边第一个柱状图数据datass，并且进行分离
this.datass.forEach(item =>{
console.log(item.name,item.value);
this.myChart1[this.index]=item.value,
this.name[this.index]=item.name
this.index++
});
//再次调用函数
this.drawLine()
console.log(this.myChart1,this.name);
完整代码
<template>
<div>
<!-- 统计打卡次数最多的五个人 -->
<div class="echartsLeft1 echart">
<div
class="HelloWorld echart-box"
id="myChart1"
></div>
</div>
<!-- 软件组与硬件组的数据对比 -->
<div class="echartsRighht1 echart">
<div
class="HelloWorld echart-box"
id="myChart2"
></div>
</div>
<!-- 统计打卡次数最少的五个人 -->
<div class="echartsLeft2 echart">
<div
class="HelloWorld echart-box"
id="myChart12"
></div>
</div>
<!-- 统计各方向的打卡次数 -->
<div class="echartsRighht2 echart">
<div
class="HelloWorld echart-box"
id="myChart22"
></div>
</div>
</div>
</template>
<script>
var that = this;
import axios from 'axios'
export default {
data() {
return {
// 定义图表，各种参数
msg: "柱状图",
//左边第一个前五名柱状表格需要的数据
datass: [
{
value:1,//打卡次数
name:"黄",//姓名
},
{
value:2,
name:"童"
},
{
value:3,
name:"李"
},
{
value:4,
name:"吴"
},
{
value:5,
name:"张"
}
],
//myChart1是前五名的打卡次数
myChart1:[],
//前五名的名字
name:[],
index:0,
//左边第二个后五名柱状图的数据
myChart12datas: [
{
value:10,//打卡次数
name:"bb",//姓名
},
{
value:29,
name:"cc"
},
{
value:32,
name:"fdf"
},
{
value:3,
name:"rr"
},
{
value:53,
name:"ss"
}
],
//后5名的打卡次数
myChart12data:[],
//后5名的名字
myChart12name:[],
//右边边第一个扇形表格需要的数据
myChart2:[],
//group
group:[],
//右边扇形统计图打卡次数
// 定义图表，各种参数
msg: "扇形图",
myChart2: [
{ value: 64, name: "软件组" },
{ value: 32, name: "硬件组" },
],
//右边第二个扇形图，各方向数据
myChart22:[
{ value: 12, name: "前端开发" },
{ value:22, name: "后端开发" },
{ value:5, name: "小程序" },
{ value:12, name: "UI设计" },
{ value:22, name: "深度学习" },
{ value:10, name: "安卓开发" },
{ value:11, name: "水下机器人" },
{ value:13, name: "养殖机器人" },
{ value:22, name: "SLAM导航" },
{ value: 21, name: "机械臂" },
],
//右边第二个扇形图的各方向内容
direction:[],
};
},
mounted: function () {
//模拟拿到了左边第一个柱状图数据datass，并且进行分离
this.datass.forEach(item =>{
console.log(item.name,item.value);
this.myChart1[this.index]=item.value,
this.name[this.index]=item.name
this.index++
});
console.log(this.myChart1,this.name);
//模拟拿到了左边第二个柱状图数据datass，并且进行分离
let lastnum=0
this.myChart12datas.forEach(item =>{
console.log(item.name,item.value);
this.myChart12data[lastnum]=item.value,
this.myChart12name[lastnum]=item.name
lastnum++
});
console.log(this.myChart12data,this.myChart12name);
//模拟拿到了右边第一个软硬件打卡myChart2扇形图的数据，并且进行分离
let num=0
this.myChart2.forEach(item =>{
console.log(item.name,item.value);
this.group[num]=item.name
num++
});
console.log(this.group);
//模拟拿到了右边第二个各方向打卡myChart22扇形图的数据，并且进行分离
let directionnum=0
this.myChart22.forEach(item =>{
console.log(item.name,item.value);
this.direction[directionnum]=item.name
directionnum++
});
console.log(this.direction);
this.drawLine(); //按照默认值绘制图表
this.drawLine2(); //按照默认值绘制图表
this.drawLine3(); //按照默认值绘制图表
this.drawLine4(); //按照默认值绘制图表
},
// created() {
// axios.get("findPatientAge").then((response) => {
// console.log(response);
// if (response.data.statusCode == 200) {
// this.myChart1.length = 0; //清空数组
// for (let i = 0; i < response.data.data.length; i++) {
// this.myChart1.push(response.data.data[i]);
// }
// console.log(this.myChart1);
// }
// });
// },
watch: {
//左边第一个柱状图的要求
myChart1: {
//对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据
handler: function () {
this.drawLine();
},
deep: true,
},
//右边第一个扇形图的要求
myChart2: {
//对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据
handler: function () {
this.drawLine2();
},
deep: true,
},
//左边第二个柱状图的要求
myChart12: {
//对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据
handler: function () {
this.drawLine3();
},
deep: true,
},
//左边第二个扇形图的要求
myChart22: {
//对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据
handler: function () {
this.drawLine4();
},
deep: true,
},
},
methods: {
//各方向打卡次数
drawLine4() {
// 1、基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart22"));
//2、构造图表数据
let options = {
title: {
text: "各方向打卡次数",
left: "center",
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
legend: {
orient: "vertical",
left: "left",
data: this.direction,
},
series: [
{
name: "访问来源",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: this.myChart22,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
// 3、绘制图表
myChart.setOption(options);
},
//打卡次数后五名
drawLine3() {
// 1、基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart12"));
//2、构造图表数据
let options = {
title: {
text: "打卡次数后五名",
left: "center",
tooltip: {},
},
xAxis: {
data:this.myChart12name
},
yAxis: {},
series: [
{
name: "姓名",
data: this.myChart12data,
type: "bar",
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 10
}
}
}
}
},
],
};
// 3、绘制图表
myChart.setOption(options);
},
//软/硬件组打卡次数
drawLine2() {
// 1、基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart2"));
//2、构造图表数据
let options = {
title: {
text: "软/硬件组打卡次数",
left: "center",
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
legend: {
orient: "vertical",
left: "left",
data: this.group,
},
series: [
{
name: "访问来源",
type: "pie",
radius: "55%",
center: ["50%", "50%"],
data: this.myChart2,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
// 3、绘制图表
myChart.setOption(options);
},
//打卡次数前五名
drawLine() {
// 1、基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart1"));
//2、构造图表数据
let options = {
title: {
text: "打卡次数前五名",
left: "center",
tooltip: {},
},
xAxis: {
data:this.name
},
yAxis: {},
series: [
{
name: "姓名",
data: this.myChart1,
type: "bar",
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 10
}
}
}
}
},
],
};
// 3、绘制图表
myChart.setOption(options);
},
},
}
</script>
<style>
.echart-box{
width: 35vw;
height: 38vh;
}
.echart{
margin-top: 10px;
float: left;
width: 35vw;
height:38vh;
}
#myChart12,#myChart22{
/* background-color: black; */
margin-top: 20px;
}
#myChart2,#myChart22{
/* background-color: black; */
margin-left: 100px;
}
/* 匹配手机端 */
@media only screen and (max-width:600px){
.echart{
width:90vw;
height: 45vh;
margin: 0;
margin-bottom:100px;
}
.echart-box{
width: 90vw;
height: 45vh;
/* background-color: black; */
}
#myChart12,#myChart22{
/* background-color: black; */
margin-top: 0px;
}
#myChart2,#myChart22{
/* background-color: black; */
margin-left: 0px;
}
}
</style>
