目录
组件:
<template>
<div>
<div
@click="onclick"
ref="echartsbar"
:style="{ width: width, height: height }"
></div>
</div>
</template>
<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
export default {
name: "comBarxy",
props: {
bardatanum: {
type: Object,
default: () => {
return {};
},
},
height: {
type: String,
default: "100%",
},
width: {
type: String,
default: "100%",
},
},
watch: {
bardatanum: {
//深度监听,可监听到对象、数组的变化
handler(newV, oldV) {
// do something, 可使用this
// console.log(newV, oldV)
// console.log(newV, 'newV')
var that = this;
if (newV.datax || newV.datay) {
setTimeout(function () {
that.barCharts();
}, 500);
}
},
deep: true,
immediate: true, // 该回调将会在侦听开始之后被立即调用
},
},
data() {
return {
xData: {},
xDataName: {},
chickechartsId: 0,
echartsId: 0,
echartsHierarchy: "",
echartsName: "",
ai: 0,
timer: null,
option: {
// legend: {},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
dataZoom: [
{
type: "inside", //inside slider
realtime: true,
// handleSize: "100%", //滑动条两侧的大小
start: 0,
end: 100,
},
],
grid: {},
xAxis: [
{
type: "category",
data: [],
axisPointer: {
type: "shadow",
},
axisLine: {
lineStyle: {
color: "#d8dadd",
},
},
axisTick: {
show: false, //隐藏X轴刻度
lineStyle: {
color: "#d8dadd",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#737373", //X轴文字颜色
},
},
},
],
yAxis: [
{
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#ededed", //网格线的颜色
},
},
axisTick: {
show: true,
},
axisLine: {
show: true,
lineStyle: {
color: "#FFFFFF",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#545151",
},
},
},
{
type: "value",
name: " ",
position: "right",
splitLine: {
show: false,
},
},
],
series: [
{
name: "数量",
type: "bar",
barWidth: 0,
itemStyle: {
color: "#5087ec",
},
data: [],
},
],
},
};
},
methods: {
barCharts() {
let that = this;
// 基于准备好的dom,初始化echarts实例
// if (this.myChart != null && this.myChart != '' && this.myChart != undefined) {
// this.myChart.dispose() //销毁
// this.myChart.clear()
// }
let myChart = echarts.init(this.$refs.echartsbar);
// myChart.setOption(this.option)
// this.myChart = myChart
// let option = this.option
if (this.bardatanum.formatterAddName) {
this.bardatanum.formatterAddName =
this.bardatanum.formatterAddName;
} else {
this.bardatanum.formatterAddName = " ";
}
let paramAdd = this.bardatanum.formatterAddName;
if (this.bardatanum.type == 0) {
this.option.series[0].data = [];
this.option.grid = this.bardatanum.grid;
this.option.dataZoom = this.bardatanum.dataZoom;
this.option.xAxis[0].data = this.bardatanum.datax;
// this.option.xAxis[0].type='category'
this.option.series[0].data = this.bardatanum.datay;
this.option.series[0].barWidth = this.bardatanum.barWidth;
this.option.series[0].itemStyle.color =
this.bardatanum.barColor;
// this.option.tooltip = {
// formatter: function (params) {
// return (
// params.name +
// paramAdd +
// "<br/>" +
// params.marker +
// params.value
// );
// },
// };
// console.log("柱状图:", this.option);
myChart.setOption(this.option);
} else if (this.bardatanum.type == 1) {
this.option.series = [];
myChart.setOption({
grid: this.bardatanum.grid,
xAxis: {
type: "value",
},
yAxis: {
type: "category",
data: this.bardatanum.datax,
},
series: {
data: this.bardatanum.datay,
// barWidth:this.bardatanum.barWidth,
// color:this.bardatanum.barColor,
},
// tooltip: {
// formatter: function (params) {
// return (
// params[0].name +
// "<br/>" +
// params[0].marker +
// params[0].value +
// "人"
// );
// },
// },
});
} else if (this.bardatanum.type == 2) {
this.option.series = [];
myChart.setOption({
grid: this.bardatanum.grid,
xAxis: {
data: this.bardatanum.datax,
type: "category",
},
yAxis: {
type: "value",
},
series: this.bardatanum.datay,
toolbox: {
show: true,
},
// legend: {
// data: this.bardatanum.legenddata,
// },
tooltip: {
trigger: "axis",
formatter: function (params) {
//数据单位格式化
var relVal =
params[0].name +
this.bardatanum.formatterAddName; //x轴名称
relVal += "<div style='width:140px'>";
for (var i = 0, l = params.length; i < l; i++) {
if (params[i].value) {
// relVal +=
// "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
// params[i].color +
// ";'>" +
// '<span style="display:block;padding-left:15px;margin-top:-4px">' +
// params[i].seriesName +
// " : " +
// params[i].value +
// "个" +
// "</span>" +
// "</span>" +
// "<br>";
relVal +=
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
params[i].color +
";'>" +
'<span style="display:block;padding-left:15px;margin-top:-4px">' +
params[i].seriesName +
" : " +
'<span style="font-weight:700;">' +
params[i].value +
"</span>" +
" 个" +
"</span>" +
"</span>" +
"<br>";
}
}
relVal += "</div>";
return relVal;
},
},
});
} else {
let dataYseries = [];
console.log(this.bardatanum);
for (let i = 0; i < this.bardatanum.datay.length; i++) {
dataYseries.push({
name: this.bardatanum.datay[i].name,
type: this.bardatanum.typeval,
data: this.bardatanum.datay[i].data,
barWidth: this.bardatanum.barWidth,
itemStyle: {
color: this.bardatanum.barColor[i],
},
});
}
if (this.bardatanum.barlinetype) {
for (let i = 0; i < this.bardatanum.datayline.length; i++) {
dataYseries.push({
name: this.bardatanum.datayline[i].name,
type: this.bardatanum.typeline,
yAxisIndex: 1,
data: this.bardatanum.datayline[i].data,
barWidth: this.bardatanum.barWidth,
itemStyle: {
color: this.bardatanum.barColorLine[i],
},
});
}
}
let opyAxisarry = [
{
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#ededed", //网格线的颜色
},
},
axisTick: {
show: true,
},
axisLine: {
show: true,
lineStyle: {
color: "#FFFFFF",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#545151",
},
},
},
{
type: "value",
name: " ",
position: "right",
splitLine: {
show: false,
},
},
];
this.option.legend = { data: this.bardatanum.legenddata };
this.option.grid = this.bardatanum.grid;
this.option.dataZoom = this.bardatanum.dataZoom;
this.option.xAxis[0].data = this.bardatanum.datax;
// this.option.xAxis[0].type='category'
this.option.series = dataYseries;
this.option.yAxis = opyAxisarry;
console.log("多个柱状图:", this.option);
myChart.setOption(this.option);
}
// myChart.clear()
// myChart.setOption(this.option,true)
// 阴影部分点击事件(有阴影点击可以去掉柱子点击)
myChart.getZr().off("click");
myChart.getZr().on("click", function (params) {
var pointInPixel = [params.offsetX, params.offsetY];
// 使用containPixel API判断点击位置是否在显示图形区域,下面的例子过滤了绘制图形的网格外的点击事件,好比X、Y轴lable、空白位置等的点击事件。
if (myChart.containPixel("grid", pointInPixel)) {
var xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [
params.offsetX,
params.offsetY,
])[0];
let op = myChart.getOption();
// 获取当前点击位置要的数据
this.xData = op.series[0].data[xIndex];
this.xDataName = op.xAxis[0].data[xIndex];
}
this.echartsId = this.xData.id;
this.echartsName = this.xDataName;
this.echartsHierarchy = this.xData.level;
this.chickechartsId = {
echartsId: this.echartsId,
echartsName: this.echartsName,
echartsHierarchy: this.echartsHierarchy,
};
that.$emit("onclick", this.chickechartsId);
});
/* //柱状图点击事件 此点击事件有问题 会多次触发点击
myChart.on("click", function (params) {
this.echartsId = params.data.id;
this.echartsName = params.name;
this.echartsHierarchy = params.data.level;
this.chickechartsId = {
echartsId: this.echartsId,
echartsName: this.echartsName,
echartsHierarchy: this.echartsHierarchy,
}
that.$emit("onclick", this.chickechartsId);
});
*/
/* // 建议使用这种方式
myChart.off("click").on("click", function (params) {
this.echartsId = params.data.id;
this.echartsName = params.name;
this.echartsHierarchy = params.data.level;
this.chickechartsId = {
echartsId: this.echartsId,
echartsName: this.echartsName,
echartsHierarchy: this.echartsHierarchy,
};
_this.$emit("onclick", this.chickechartsId);
}); */
// this.chickechartsId = myChart;
if (this.bardatanum.datax.length > 0) {
this.autoFnpie(this.bardatanum.datax.length, myChart);
}
// this.autoFnpie(this.bardatanum.datax.length, myChart)
},
onclick() {
// console.log("2子组件id:",this.params)
// console.log("获取点击id:",this.chickechartsId)
// this.$emit("onclick", this.chickechartsId);
// this.echartsId = undefined
// this.echartsName = undefined
// this.echartsHierarchy = undefined
},
// 图形自定义展示
autoFnpie(leng, myChart) {
var that = this;
//轮播效果
var currentIndex = -1;
var dataLen = leng;
that.timer = setInterval(() => {
// 计时器增加
that.ai++;
if (that.ai == dataLen) {
that.ai = 1;
}
// 取消之前高亮的图形
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: currentIndex,
});
currentIndex = (currentIndex + 1) % dataLen;
// 高亮当前图形
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: currentIndex,
});
// 显示 tooltip
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: currentIndex,
});
}, 5000);
},
},
};
</script>
<style>
</style>
页面引用:
<template>
<div class="all-box">
<div>
<!-- 上面的echarts -->
<div></div>
<!-- 中间的echarts -->
<div>
<div class="topfirst-echarts-box">
<div
class="jzgzryxbtj"
:style="{ width: '32%', height: zztechatsheight }"
>
<comBarxy
@onclick="onclickResidenceStaffAge"
:bardatanum="ResidenceStaffAge"
:style="{ width: '100%', height: '89%' }"
></comBarxy>
</div>
<div
class="gxqjzrytj"
:style="{ width: '68%', height: zztechatsheight }"
>
<comBarxy
:bardatanum="JurisdictionsHost"
:style="{ width: '100%', height: '89%' }"
></comBarxy>
</div>
</div>
</div>
<!-- 底下的echarts -->
<div>
<div class="topfirst-echarts-box">
<div
class="jzgzrynldtj"
:style="{ width: '100%', height: zztechatsheight }"
>
<comBarxy
@onclick="onclickresidentCommute"
:bardatanum="residentCommute"
:style="{ width: '100%', height: '89%' }"
></comBarxy>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import comBarxy from "../../components/commEcharts/comBarxy.vue";
export default {
name: "gyyqfy",
components: { comBarxy },
data() {
return {
// 定义1为本页面,2为更多数据跳转,3为居民通勤地统计跳转. 4为防疫工作台
MoreDataworkbench: 1,
nowDate: "", // 当前日期
streetList: [], //街道数据
villageList: [], //村、居委
villageVal: undefined,
paramsSelect: {
XJZDSQJCWH: "",
XJZDXZJD: "",
},
url: {
postStreetVillageUrl: "/dsc/metadata/data/streetVillage",
},
NumdataTop: [
{
text: "现有XXXXXXXXXX人员",
num: "20",
color: "linear-gradient(106deg, #F92E2E, #FF5D3D)",
},
{
text: "现有XXXXXXXXXX人员",
num: "10000",
color: "linear-gradient(106deg, #FF6D29, #FECC44)",
},
{
text: "现有XXXXXXXXXX人员总数",
num: "160",
color: "linear-gradient(106deg, #148BFB, #1DC7FF)",
},
{
text: "现有次XXXXXXXXXX人员总数",
num: "220",
color: "linear-gradient(106deg, #1ABADC, #3ADFF2)",
},
],
zztechatsheight: "400px",
// 居住/工作人员年龄
ResidenceStaffAge: {
formatterAddName: " 岁",
datax: [],
datay: [],
type: 0,
barWidth: 26,
barColor: "#35C493",
grid: {
right: "50px",
// left: '15%',
top: "10%",
bottom: "15%",
},
},
// 各辖区居住人员统计
JurisdictionsHost: {
formatterAddName: "",
datax: [],
datay: [],
type: 0,
barWidth: 26,
barColor: "#6395F9",
grid: {
right: "3%",
// left: '15%',
top: "10%",
bottom: "15%",
},
},
// 各辖区人员数据统计
residentCommute: {
formatterAddName: "",
legenddata: [
"检测XXXXXXXXXX",
"检测XXXXXXXXXX关联",
"检测XXXXXXXXXX次关联",
],
datax: [],
datay: [],
datayline: [],
type: 3,
barlinetype: true,
typeline: "line",
typeval: "bar",
barWidth: 15,
barColor: [
"#F86565",
"#FCB04E",
"#74CBED",
"#6D9DF6",
"#40BDE6",
"#F09615",
"#0079E6",
],
barColorLine: ["#25B0E6"],
grid: {
left: "5%",
right: "5%",
top: "10%",
bottom: "25%",
},
dataZoom: [
{
type: "slider", //inside slider
realtime: true,
// handleSize: "100%", //滑动条两侧的大小
start: 0,
end: 50,
bottom: 30, //居下的距离
},
],
},
chickEcharts: {
id: 0,
name: "",
},
};
},
mounted() {
this.ResidencesAge();
this.getJurisdictionsHost();
this.getResidentCommute();
},
created() {},
methods: {
//居住/工作人员年龄
ResidencesAge() {
// 绘制图表
let xgydata = [
"0-10",
"11-20",
"21-30",
"31-40",
"41-50",
"51-60",
"61-70",
"71-80",
"80以上",
];
let datadata = [
{ value: 58026, id: 1 },
{ value: 48124, id: 2 },
{ value: 57987, id: 3 },
{ value: 120296, id: 4 },
{ value: 86562, id: 5 },
{ value: 85795, id: 6 },
{ value: 52397, id: 7 },
{ value: 23385, id: 8 },
{ value: 4842, id: 9 },
];
this.ResidenceStaffAge.datax = xgydata;
this.ResidenceStaffAge.datay = datadata;
},
onclickResidenceStaffAge(val) {
console.log("工作人员年龄id:", val.echartsId);
},
//各辖区居住人员统计
getJurisdictionsHost() {
// 绘制图表
let xgydata = [
"银河北路街道",
"爱民东道街道",
"解放道街道",
"新开路街道",
"新源道街道",
"南尖塔镇",
"万庄镇",
"九州镇",
"白家务",
"北旺镇",
"新世纪步行街管委会",
"经开区",
];
let datadata = [
27563, 66826, 51050, 75535, 97750, 73141, 25680, 1726, 41625,
2004, 50059, 41625,
];
this.JurisdictionsHost.datax = xgydata;
this.JurisdictionsHost.datay = datadata;
},
// 各辖区人员数据统计
getResidentCommute() {
// 绘制图表
let xgydata = [
"廊坊市安次区",
"廊坊市经开区",
"北京市大兴区",
"天津市武清区",
"廊坊市永清县",
"北京市朝阳区",
"北京市通州区",
"北京市海淀区",
"北京市丰台区",
"廊坊市固安区",
"新世纪步行街管委会",
"经开区",
];
// let datadata = [27563, 66826, 51050, 75535, 97750, 73141, 25680, 1726, 41625, 2004, 50059, 41625]
let datadata = [
{
name: "检测XXXXXXXXXX",
data: [
563, 826, 50, 535, 750, 141, 680, 726, 625, 204, 559,
625,
],
},
{
name: "检测XXXXXXXXXX关联",
data: [
763, 626, 510, 755, 807, 731, 280, 126, 425, 204, 505,
465,
],
},
// {
// name:"XXXXXXXXXX",
// data:[563, 636, 850, 835, 977, 931, 380, 106, 525, 284, 605, 365]
// },
// {
// name: '检测XXXXXXXXXX次关联',
// data: [783, 666, 610, 855, 577, 331, 580, 236, 425, 504, 235, 235],
// },
];
let datadataline = [
{
name: "检测XXXXXXXXXX次关联",
data: [
1783, 6626, 6110, 1855, 577, 331, 580, 236, 425, 504,
235, 235,
],
},
];
this.residentCommute.datax = xgydata;
this.residentCommute.datay = datadata;
this.residentCommute.datayline = datadataline;
},
onclickresidentCommute(val) {
this.MoreDataworkbench = 3;
this.chickEcharts.id = val.echartsId;
this.chickEcharts.name = val.echartsName;
console.log("各辖区人员数据统计:id", val.echartsName);
},
},
};
</script>
<style lang="scss" scoped>
.all-box {
background-color: #f0f2f5;
}
.top-fff-box {
background-color: #fff;
height: 56px;
line-height: 56px;
margin-bottom: 16px;
display: flex;
justify-content: space-between;
.top-select {
margin-left: 13px;
}
}
.topdivx {
margin-bottom: 16px;
display: flex;
justify-content: space-between;
// background-color: #fff;
// padding: 20px 26px 26px;
.divn {
// width: 409px;
// width: 32.7%;
width: 24.4%;
// height: 117px;
height: 125px;
// background-color: rgb(0, 176, 255);
// border-radius: 5px;
font-size: 16px;
line-height: 47px;
display: flex;
border-radius: 5px;
// flex-wrap: wrap;
// flex-direction: column;
// margin-left: 13px;
.topspanx {
font-weight: 400;
font-size: 18px;
color: rgba(247, 247, 247, 1);
line-height: 30px;
margin-left: 20px;
margin-top: 20px;
// margin-bottom: 21px;
margin-bottom: 10px;
}
.text-num {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 85%;
.topspancent {
font-family: DIN;
font-weight: 500;
font-size: 29px;
color: rgba(247, 247, 247, 1);
line-height: 30px;
margin-left: 20px;
// text-align: center;
}
}
.top-img {
margin-top: 27px;
margin-right: 24px;
}
}
}
.topfirst-echarts-box {
width: 100%;
display: flex;
margin-bottom: 10px;
.slrytj {
background-color: #fff;
// border-radius: 5px;
margin-right: 10px;
}
.two-right-echarts {
display: flex;
// margin-right: 20px;
}
.two-right-echarts {
display: flex;
// margin-right: 20px;
}
.jzgzrynldtj {
background-color: #fff;
// margin: 0 10px;
}
.jmgzryhsjctj {
background-color: #fff;
margin-left: 10px;
}
.jzgzryxbtj {
background-color: #fff;
margin-right: 10px;
}
.gxqjzrytj {
// margin-left: 10px;
background-color: #fff;
}
}
</style>