updata
1 parent be1bc53 commit 5c434e421cd1bba7ee6e74c8c82045f8124cee0d
@鲁yixuan 鲁yixuan authored on 21 Oct
Showing 2 changed files
View
112
src/views/oneMap/Echarts/publicEch.vue
<template>
<div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from "echarts";
import { guid } from "@/utils/ruoyi";
import { reactive, toRefs, onMounted, watch } from "vue";
import * as echarts from 'echarts';
import { guid } from '@/utils/ruoyi';
import { reactive, toRefs, onMounted, watch } from 'vue';
export default {
name: "line-chart",
name: 'line-chart',
props: {
data: Object,
refresh: Number,
},
const init = () => {
let chartDom = echarts.init(document.getElementById(allData.id));
 
var shadowYData = [100, 100];
var barTopColor = ["#fe7285FF", "#1f93ffFF", "#31e1adFF", "#e4cd61FF", "#12f9ffFF"];
var barTopColor = ['#fe7285FF', '#1f93ffFF', '#31e1adFF', '#e4cd61FF', '#12f9ffFF'];
var barBottomColor = [
"RGBA(154, 102, 125, 0.6)",
"RGBA(17, 109, 182, 0.6)",
"RGBA(27, 152, 136, 0.6)",
"RGBA(126, 138, 92, 0.6)",
"RGBA(10, 162, 178, 0.6)",
'RGBA(154, 102, 125, 0.6)',
'RGBA(17, 109, 182, 0.6)',
'RGBA(27, 152, 136, 0.6)',
'RGBA(126, 138, 92, 0.6)',
'RGBA(10, 162, 178, 0.6)',
];
var barWidth = 20;
var option;
option = {
color: ["#3FFFC2", "#FFF21C"],
color: ['#3FFFC2', '#FFF21C'],
tooltip: {
trigger: "axis",
 
formatter: (params) => {
trigger: 'axis',
 
formatter: params => {
// console.log(params);
var relVal = "" + params[0].name;
var relVal = '' + params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
if (params[i].seriesName) {
let unit = params[i].seriesName == "数量" ? "起" : "个";
relVal +=
"<br/>" +
params[i].marker +
params[i].seriesName +
" " +
params[i].value +
unit;
let unit = params[i].seriesName == '数量' ? '起' : '个';
relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit;
}
}
return relVal;
},
},
grid: {
top: 50,
bottom: 20,
bottom: 25,
},
xAxis: [
{
type: "category",
type: 'category',
axisLine: {
show: false,
lineStyle: {
width: 2,
color: "#58b2ed",
color: '#58b2ed',
},
},
splitLine: {
show: false,
axisTick: {
show: false,
},
axisLabel: {
color: "rgba(255,255,255,1)",
color: 'rgba(255,255,255,1)',
fontSize: 16,
fontFamily: "AlibabaPuHuiTi",
fontFamily: 'AlibabaPuHuiTi',
formatter: function (params) {
var str = ""; // 最终拼接成的字符串
var str = ''; // 最终拼接成的字符串
var paramsLen = params.length; // 获取每项文字的个数
var len = 3; // 每行能显示的字的个数(根据实际情况自己设置)
var rowNumber = Math.ceil(paramsLen / len); // 换行的话,需要显示几行,向上取整
if (paramsLen > len) {
//大于设定的len就换行,不大于就不变化
for (var i = 0; i < rowNumber; i++) {
var temp = ""; // 表示每一次截取的字符串
var temp = ''; // 表示每一次截取的字符串
var start = i * len; // 开始截取的位置
var end = start + len; // 结束截取的位置
if (i == rowNumber - 1) {
// 最后一次不换行
temp = params.substring(start, paramsLen);
} else {
// 每一次拼接字符串并换行
temp = params.substring(start, end) + "\n";
temp = params.substring(start, end) + '\n';
}
str += temp; // 最终拼成的字符串
}
} else {
},
],
yAxis: [
{
name: "数量(起)",
type: "value",
name: '数量(起)',
type: 'value',
axisLabel: {
color: "#3FFFC2",
color: '#3FFFC2',
show: true,
},
nameTextStyle: {
color: "#3FFFC2",
color: '#3FFFC2',
},
splitLine: {
lineStyle: {
type: "dashed",
color: "#3FFFC2",
type: 'dashed',
color: '#3FFFC2',
},
},
alignTicks: true,
},
height: 4,
bottom: 18,
start: 0,
end: 100,
handleSize: "100%",
fillerColor: "#94FA41",
borderColor: "transparent",
backgroundColor: "rgba(148, 250, 65, 0.2)",
handleSize: '100%',
fillerColor: '#94FA41',
borderColor: 'transparent',
backgroundColor: 'rgba(148, 250, 65, 0.2)',
handleStyle: {
color: "#94FA41",
color: '#94FA41',
},
moveHandleSize: 0,
textStyle: {
color: "#fff",
},
},
{
type: "inside",
color: '#fff',
},
},
{
type: 'inside',
show: true,
height: 15,
start: 1,
end: 35,
},
],
series: [
{
name: "数量",
type: "pictorialBar",
name: '数量',
type: 'pictorialBar',
symbolSize: [barWidth, 10],
symbolOffset: [0, -6],
symbolPosition: "end",
symbolPosition: 'end',
z: 12,
itemStyle: {
normal: {
color: function (params) {
// data: props.data.yAxis,
// stack: "check",
// },
{
name: "",
type: "bar",
name: '',
type: 'bar',
barWidth: barWidth,
barGap: "10%", // Make series be overlap
barCateGoryGap: "10%",
barGap: '10%', // Make series be overlap
barCateGoryGap: '10%',
itemStyle: {
normal: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
};
watch(
() => props.refresh,
() => {
console.log(props, "propspropsprops");
console.log(props, 'propspropsprops');
if (allData.chartDom) {
allData.chartDom.dispose();
allData.chartDom = null;
}
}
);
onMounted(() => {
init();
window.addEventListener("resize", resizeTheChart);
window.addEventListener('resize', resizeTheChart);
});
return {
...toRefs(allData),
resizeTheChart,
View
15
src/views/oneMap/OverallOverview/LeftBox.vue
import ranqi_icon from '@/assets/newImgs/rq.png'; //燃气
import qiaoliang from '@/assets/newImgs/ql.png'; //桥梁
import sd_icon from '@/assets/newImgs/sd.png'; //隧道
import ps_icon from '@/assets/newImgs/ps.png'; //排水
 
import bus from '@/bus';
const chartData2 = ref({ xAxis: [], yAxis: [], yAxis2: [] });
const refresh = ref('');
const categoryList = ref([
{ name: '燃气', value: 1 },
dw2: '口',
dw3: '套',
},
];
bus.emit('FxVisible', riskData);
bus.emit('clearAllLayer');
bus.emit('SetLayerShow', ['燃气视角']);
} else if (activedname.value == '排水') {
riskData.value = [
{
name1: '管网',
dw2: '处',
dw3: '套',
},
];
bus.emit('FxVisible', riskData);
bus.emit('clearAllLayer');
bus.emit('SetLayerShow', ['雨水管网', '综合视角']);
} else if (activedname.value == '桥梁') {
riskData.value = [
{
name1: '数量',
dw2: '米',
dw3: '套',
},
];
bus.emit('FxVisible', riskData);
bus.emit('clearAllLayer');
bus.emit('SetLayerShow', ['仿真地图', '桥梁视角']);
} else {
riskData.value = [
{
name1: '数量',
dw2: '米',
dw3: '套',
},
];
bus.emit('FxVisible', riskData);
bus.emit('clearAllLayer');
bus.emit('SetLayerShow', ['仿真地图', '隧道视角']);
}
}
 
function GetgetFacilities() {
chartData2.value.yAxis = obj.y;
refresh.value = Math.random();
}
onMounted(() => {
bus.emit('FxVisible', riskData.value);
GetgetFacilities();
});
</script>