<template>
<div class="cont">
<div class="area">
<div ref="chart1" :style="{width: '100%', height: '2.6rem'}"></div>
</div>
</div>
</template>
<script>
import { getlargeScreen } from '@/service/index'
export default {
components: {
},
props: {
tabActive: {
type: String,
default: () => ''
},
realTimeData: {
type: Array,
default: () => []
}
},
data() {
return {
dialogTableVisible: false,
list: [],
tabactive: 1,
cockpitData: [
{
"unit": "个",
"areaname": "2019",
"time": "2021-08-30 15:38:00",
"title": "各地市水源数",
"value": "32"
},
{
"unit": "个",
"areaname": "2020",
"time": "2021-08-30 15:38:00",
"title": "各地市水源数",
"value": "23"
},
{
"unit": "个",
"areaname": "2021",
"time": "2021-08-30 15:38:00",
"title": "各地市水源数",
"value": "8"
},
{
"unit": "个",
"areaname": "2022",
"time": "2021-08-30 15:38:00",
"title": "各地市水源数",
"value": "121"
},
],
}
},
watch: {
tabActive(val) {
console.log('值2', val);
this.areacodel = val
this.getlargeScreen()
},
deep: true
},
methods: {
// 图表初始化
// 图表初始化
initChart() {
this.chartInstance = this.$echarts.init(this.$refs.chart1)
// ,执行echarts自带的resize方法,即可做到让echarts图表自适应
window.addEventListener("resize", () => {
this.chartInstance.resize();
});
},
updateChart() {
// 循环遍历出x轴的name
const xAx = this.cockpitData.map((item) => {
return item.areaname
})
const yAy = this.cockpitData.map((item) => {
return item.value
})
console.log('柱状图数据', xAx, yAy);
const option = {
//提示框组件配置
tooltip: {
position: function (point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下
// 提示框位置
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];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 5;
} else { // 左边放的下
x = pointX - boxWidth;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [x, y];
},
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
textStyle: {
fontSize: 12,
color: "#000",
},
padding: 5,
},
// 图例组件
legend: {
align: 'right',
right: 10,
textStyle: {
color: '#fff',
fontSize: 10
},
itemWidth: 10,
itemHeight: 10,
// height: 150
orient: 'horizontal',
top: '10%',
},
//定义折线图距离左边多少右边多少的距离
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [ //定义x轴
{
type: 'category',
data: xAx,
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 10,
},
}
}
],
yAxis: [ // 定义y轴
{
nameTextStyle: {
color: "#666666",
fontSize: 14,
},
show: true,
type: "value",
axisLabel: { // 坐标轴刻度标签的相关设置
textStyle: {
color: "#fff",
},
},
axisLine: { // 坐标轴轴线相关设置
show: false,
},
splitLine: { // 坐标轴在网格区域中的分隔线
lineStyle: { //x轴网格样式设置
color: "#12403F",
},
},
},
],
series: [ //系列列表。每个系列通过 type 决定自己的图表类型
{
name: "近5年公开政务信息数量趋势",
type: "bar", // 设置为柱状图
barWidth: 24,
//柱状图设置数值
label: {
normal: {
show: false,
position: 'top'
}
},
data: yAy,
},
],
}
this.chartInstance.setOption(option)
},
async getlargeScreen() {
var sw = await getlargeScreen({
areacodel: this.areacodel
})
console.log(2222222, sw);
this.list = sw.result
},
},
created() {
this.$emit('changeCity', this.city)
// this.getData1()
this.getlargeScreen()
},
mounted() {
this.$nextTick(function () {
this.initChart()
this.updateChart()
})
},
beforeDestroy() {
// 页面组件销毁,移除echart自适应事件
window.removeEventListener("resize", () => {
this.chartInstance.resize()
})
}
}
</script>
<style lang="scss" scoped>
</style>