|
|
@@ -2,7 +2,8 @@
|
|
|
<div class="app">
|
|
|
<div class="map">
|
|
|
<!-- <img src="@/assets/images/qkq_mapbg.png"/> -->
|
|
|
- <Map3D :geo-json="geoJson" :dbl-click-fn="dblClickFn" :projection-fn-param="projectionFnParam" style="position: absolute" />
|
|
|
+ <Map3D :geo-json="geoJson" :dbl-click-fn="dblClickFn" :projection-fn-param="projectionFnParam"
|
|
|
+ style="position: absolute"/>
|
|
|
</div>
|
|
|
<!--头部开始-->
|
|
|
<div class="header">
|
|
|
@@ -71,8 +72,8 @@
|
|
|
<div class="right_con">
|
|
|
<div class="top_txt">
|
|
|
<span>{{ currentTime }}</span>
|
|
|
-<!-- <span>星期六</span>-->
|
|
|
-<!-- <b>11:16:58</b>-->
|
|
|
+ <!-- <span>星期六</span>-->
|
|
|
+ <!-- <b>11:16:58</b>-->
|
|
|
</div>
|
|
|
<!--党建引领-->
|
|
|
<div class="qkq_djyl">
|
|
|
@@ -196,7 +197,7 @@ const qikaiJSON = require('@/assets/geoJson/seven.json')
|
|
|
|
|
|
export default {
|
|
|
name: 'weather',
|
|
|
- components:{
|
|
|
+ components: {
|
|
|
Map3D
|
|
|
},
|
|
|
data() {
|
|
|
@@ -240,12 +241,12 @@ export default {
|
|
|
},
|
|
|
dblClickFn(customProperties) {
|
|
|
this.mapAdCode = customProperties.adcode;
|
|
|
- console.log('mapAdCode',this.mapAdCode)
|
|
|
+ console.log('mapAdCode', this.mapAdCode)
|
|
|
this.queryMapData(this.mapAdCode)
|
|
|
this.projectionFnParam = {
|
|
|
center: customProperties.centroid,
|
|
|
// scale: this.mapScale[customProperties.level],
|
|
|
- scale:500
|
|
|
+ scale: 500
|
|
|
};
|
|
|
},
|
|
|
handleNavigation(page) {
|
|
|
@@ -271,13 +272,13 @@ export default {
|
|
|
color: "rgba(175, 190, 211, 1)",
|
|
|
fontSize: 10
|
|
|
},
|
|
|
- textStyle: {
|
|
|
- color: '#fff',
|
|
|
- textShadowColor: 'rgba(0, 255, 255, 1)',
|
|
|
- textShadowBlur: 5,
|
|
|
- textShadowOffsetX: 0,
|
|
|
- textShadowOffsetY: 0
|
|
|
- },
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ textShadowColor: 'rgba(0, 255, 255, 1)',
|
|
|
+ textShadowBlur: 5,
|
|
|
+ textShadowOffsetX: 0,
|
|
|
+ textShadowOffsetY: 0
|
|
|
+ },
|
|
|
formatter: function (name) {
|
|
|
return name;
|
|
|
}
|
|
|
@@ -383,36 +384,28 @@ export default {
|
|
|
grid() {
|
|
|
// 网格管理
|
|
|
var myChart = echarts.init(document.getElementById('wggl'));
|
|
|
- //柱状图 渐变色双y轴
|
|
|
-
|
|
|
- //可以鼠标滚动
|
|
|
-
|
|
|
- //点击背景和点击图形触发不同的事件
|
|
|
-
|
|
|
let dataList = [{
|
|
|
name: '前程街道',
|
|
|
- value: '0'
|
|
|
+ value: 600
|
|
|
}, {
|
|
|
name: '富民街道',
|
|
|
- value: '10'
|
|
|
+ value: 1080
|
|
|
}, {
|
|
|
name: '广兴街道',
|
|
|
- value: '12'
|
|
|
+ value: 369
|
|
|
}, {
|
|
|
name: '东风街道',
|
|
|
- value: '15'
|
|
|
+ value: 744
|
|
|
}, {
|
|
|
name: '锦绣街道',
|
|
|
- value: '0'
|
|
|
+ value: 152
|
|
|
}, {
|
|
|
name: '锦城街道',
|
|
|
- value: '30'
|
|
|
+ value: 92
|
|
|
}]
|
|
|
-
|
|
|
-
|
|
|
var option = {
|
|
|
grid: {
|
|
|
- left: "10%", //距离左边的距离
|
|
|
+ left: "15%", //距离左边的距离
|
|
|
right: "2%", //距离右边的距离
|
|
|
bottom: "10%", //距离下边的距离
|
|
|
top: "8%" //距离上边的距离
|
|
|
@@ -428,7 +421,6 @@ export default {
|
|
|
fontFamily: 'PingFang SC'
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
@@ -485,266 +477,18 @@ export default {
|
|
|
start: 0,
|
|
|
end: dataList.length > 15 ? 35 : 100
|
|
|
}],
|
|
|
- series: [{
|
|
|
- name: "",
|
|
|
- type: "bar",
|
|
|
- data: dataList,
|
|
|
- barGap: '-100%',
|
|
|
- barCategoryGap: '70%',
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(37, 215, 255, 1.0)'
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(1,23,60,1)'
|
|
|
- }])
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(43, 129, 234, 1.0)'
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(1,23,60,1)'
|
|
|
- }])
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- ]
|
|
|
- }
|
|
|
-
|
|
|
- function updateData() {
|
|
|
- dataList.forEach(data => {
|
|
|
- data.value = (data.value + 30) % 1001; // 数据每次增加 10，当达到 1000 后重新开始
|
|
|
- });
|
|
|
-
|
|
|
- option.series[0].data = dataList;
|
|
|
-
|
|
|
- myChart.setOption(option);
|
|
|
- }
|
|
|
-
|
|
|
- setInterval(() => {
|
|
|
- updateData();
|
|
|
- }, 1000); // 每100毫秒更新一次数据
|
|
|
-
|
|
|
-
|
|
|
- if (option) {
|
|
|
- myChart.setOption(option);
|
|
|
- }
|
|
|
- },
|
|
|
- economic() {
|
|
|
- // 经济运行
|
|
|
- var myChart = echarts.init(document.getElementById('jjyx'));
|
|
|
-
|
|
|
- var barWidth = 15;
|
|
|
-
|
|
|
- // 2023
|
|
|
- var zzx1 = [27, 38, 41, 21, 27];
|
|
|
- var zx = zzx1.map((item) => {
|
|
|
- return 100 - item;
|
|
|
- });
|
|
|
- // 2024
|
|
|
- var wgx1 = [37, 40, 63, 61, 64];
|
|
|
- var wg = wgx1.map((item) => {
|
|
|
- return 100 - item;
|
|
|
- });
|
|
|
-
|
|
|
- // 2023
|
|
|
- var zzx1 = [57, 18, 31, 61, 37];
|
|
|
- var zx = zzx1.map((item) => {
|
|
|
- return 100 - item;
|
|
|
- });
|
|
|
- // 2024
|
|
|
- var wgx1 = [27, 60, 23, 11, 34];
|
|
|
- var wg = wgx1.map((item) => {
|
|
|
- return 100 - item;
|
|
|
- });
|
|
|
-
|
|
|
- // 2023
|
|
|
- var zzx1 = [57, 18, 31, 61, 37];
|
|
|
- var zx = zzx1.map((item) => {
|
|
|
- return 100 - item;
|
|
|
- });
|
|
|
- // 2024
|
|
|
- var wgx1 = [27, 60, 23, 11, 34];
|
|
|
- var wg = wgx1.map((item) => {
|
|
|
- return 100 - item;
|
|
|
- });
|
|
|
-
|
|
|
- // 2023
|
|
|
- var zzx1 = [37, 18, 71, 61, 37];
|
|
|
- var zx = zzx1.map((item) => {
|
|
|
- return 100 - item;
|
|
|
- });
|
|
|
- // 2024
|
|
|
- var wgx1 = [27, 80, 43, 11, 54];
|
|
|
- var wg = wgx1.map((item) => {
|
|
|
- return 100 - item;
|
|
|
- });
|
|
|
-
|
|
|
- // 2023
|
|
|
- var zzx1 = [57, 18, 81, 61, 67];
|
|
|
- var zx = zzx1.map((item) => {
|
|
|
- return 100 - item;
|
|
|
- });
|
|
|
- // 2024
|
|
|
- var wgx1 = [14, 62, 23, 11, 34];
|
|
|
- var wg = wgx1.map((item) => {
|
|
|
- return 100 - item;
|
|
|
- });
|
|
|
-
|
|
|
- // 2023
|
|
|
- var zzx1 = [43, 18, 63, 27, 44];
|
|
|
- var zx = zzx1.map((item) => {
|
|
|
- return 100 - item;
|
|
|
- });
|
|
|
- // 2024
|
|
|
- var wgx1 = [34, 26, 75, 44, 26];
|
|
|
- var wg = wgx1.map((item) => {
|
|
|
- return 100 - item;
|
|
|
- });
|
|
|
-
|
|
|
- let dataList = [{
|
|
|
- name: '第一季度',
|
|
|
- value: '20'
|
|
|
- }, {
|
|
|
- name: '第二季度',
|
|
|
- value: '10'
|
|
|
- }, {
|
|
|
- name: '第三季度',
|
|
|
- value: '12'
|
|
|
- }, {
|
|
|
- name: '第四季度',
|
|
|
- value: '15'
|
|
|
- }]
|
|
|
-
|
|
|
- var option = {
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- axisPointer: {
|
|
|
- // 坐标轴指示器，坐标轴触发有效
|
|
|
- type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
|
- },
|
|
|
- // formatter: function (e) {
|
|
|
- // // console.log(e);
|
|
|
- // var str =
|
|
|
- // e[6].axisValue +
|
|
|
- // "<br>" +
|
|
|
- // "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:4px;height:4px;background-color:" +
|
|
|
- // e[6].color.colorStops[0].color +
|
|
|
- // ";'></span>" +
|
|
|
- // "" +
|
|
|
- // e[6].seriesName +
|
|
|
- // " : " +
|
|
|
- // e[6].value +
|
|
|
- // "<br>" +
|
|
|
- // "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:4px;height:4px;background-color:" +
|
|
|
- // e[8].color.colorStops[0].color +
|
|
|
- // ";'></span>" +
|
|
|
- // "" +
|
|
|
- // e[8].seriesName +
|
|
|
- // " : " +
|
|
|
- // e[8].value;
|
|
|
- // return str;
|
|
|
- // },
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: "2%",
|
|
|
- right: "4%",
|
|
|
- bottom: "5%",
|
|
|
- top: "10%",
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: ["2023年度", "2024年度"],
|
|
|
-
|
|
|
- top: 1,
|
|
|
- textStyle: {
|
|
|
- color: "#deebff",
|
|
|
- fontSize: 12,
|
|
|
- },
|
|
|
- itemWidth: 12,
|
|
|
- itemHeight: 10,
|
|
|
- itemGap: 35,
|
|
|
- color: "#242424",
|
|
|
- selectedMode: false,
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: "category",
|
|
|
- data: [
|
|
|
- "第一季度",
|
|
|
- "第二季度",
|
|
|
- "第三季度",
|
|
|
- "第四季度",
|
|
|
- ],
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: "#010710",
|
|
|
- },
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: true,
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- // interval: 0,
|
|
|
- // rotate: 40,
|
|
|
- textStyle: {
|
|
|
- fontFamily: "Microsoft YaHei",
|
|
|
- color: "#fff", // x轴颜色
|
|
|
- fontWeight: "normal",
|
|
|
- fontSize: "12",
|
|
|
- lineHeight: 10,
|
|
|
- },
|
|
|
- interval: 0, //标签设置为全部显示
|
|
|
- margin: 15,
|
|
|
- lineHeight: 15,
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- yAxis: {
|
|
|
- min: 0,
|
|
|
- max: 100,
|
|
|
- type: "value",
|
|
|
-
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: "#010710",
|
|
|
- },
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- color: "rgba(135,140,147,1)", //左侧显示线
|
|
|
- },
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- formatter: "{value}",
|
|
|
- textStyle: {
|
|
|
- color: "#deebff",
|
|
|
- fontSize: 12,
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
series: [
|
|
|
{
|
|
|
name: "",
|
|
|
type: "bar",
|
|
|
data: dataList,
|
|
|
- barGap: '-70%',
|
|
|
+ barGap: '-100%',
|
|
|
barCategoryGap: '70%',
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
offset: 0,
|
|
|
- color: 'rgba(39,116,212,1)'
|
|
|
+ color: 'rgba(37, 215, 255, 1.0)'
|
|
|
}, {
|
|
|
offset: 1,
|
|
|
color: 'rgba(1,23,60,1)'
|
|
|
@@ -753,7 +497,7 @@ export default {
|
|
|
emphasis: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
offset: 0,
|
|
|
- color: 'rgba(39,116,212,1)'
|
|
|
+ color: 'rgba(43, 129, 234, 1.0)'
|
|
|
}, {
|
|
|
offset: 1,
|
|
|
color: 'rgba(1,23,60,1)'
|
|
|
@@ -761,188 +505,56 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
- // 计划产值中间正方形
|
|
|
- {
|
|
|
- type: "pictorialBar",
|
|
|
- symbol: "diamond",
|
|
|
-
|
|
|
- symbolSize: [barWidth, 4],
|
|
|
- symbolOffset: [-10, -2],
|
|
|
- symbolPosition: "end",
|
|
|
- z: 12,
|
|
|
- color: "rgba(0,222,255,1)",
|
|
|
- data: zzx1,
|
|
|
- },
|
|
|
- // 实际产值中间正方形
|
|
|
- {
|
|
|
- type: "pictorialBar",
|
|
|
- symbol: "diamond",
|
|
|
- symbolSize: [barWidth, 4],
|
|
|
- symbolOffset: [10, -2],
|
|
|
- symbolPosition: "end",
|
|
|
- z: 12,
|
|
|
- color: "rgba(59,237,222,1)",
|
|
|
- data: wgx1,
|
|
|
- },
|
|
|
- // 计划产值底部正方形
|
|
|
- {
|
|
|
- type: "pictorialBar",
|
|
|
- symbol: "diamond",
|
|
|
- symbolSize: [barWidth, 3],
|
|
|
- symbolOffset: [-10, 4],
|
|
|
- z: 12,
|
|
|
- color: "rgba(8,13,18,0)",
|
|
|
- data: zzx1,
|
|
|
- },
|
|
|
- // 实际产值底部正方形
|
|
|
- {
|
|
|
- name: "",
|
|
|
- type: "pictorialBar",
|
|
|
- symbol: "diamond",
|
|
|
- symbolSize: [barWidth, 3],
|
|
|
- symbolOffset: [10, 4],
|
|
|
- color: "rgba(8,13,18,0)",
|
|
|
- z: 12,
|
|
|
- data: wgx1,
|
|
|
- },
|
|
|
- // 计划产值上部正方形
|
|
|
- {
|
|
|
- data: [100, 100, 100, 100, 100],
|
|
|
- type: "pictorialBar",
|
|
|
-
|
|
|
- symbol: "diamond",
|
|
|
- symbolSize: [barWidth, 4],
|
|
|
- symbolOffset: [-10, -2],
|
|
|
- color: "rgba(8,13,18,0)",
|
|
|
-
|
|
|
- symbolPosition: "end",
|
|
|
- },
|
|
|
- // 实际产值上部正方形
|
|
|
- {
|
|
|
- data: [100, 100, 100, 100, 100],
|
|
|
- type: "pictorialBar",
|
|
|
-
|
|
|
- symbol: "diamond",
|
|
|
- symbolSize: [barWidth, 4],
|
|
|
- symbolOffset: [10, -2],
|
|
|
- color: "rgba(8,13,18,0)",
|
|
|
-
|
|
|
- symbolPosition: "end",
|
|
|
- },
|
|
|
- // 计划产值进度柱子
|
|
|
{
|
|
|
- name: "2023年度",
|
|
|
- type: "bar",
|
|
|
- barWidth: barWidth,
|
|
|
- // zlevel: 2,
|
|
|
- stack: "1",
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- opacity: 0.7,
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: "rgba(0,222,255,1)",
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: "rgba(0,222,255,0)",
|
|
|
- },]),
|
|
|
- barBorderRadius: 0,
|
|
|
- },
|
|
|
- },
|
|
|
- label: {
|
|
|
+ type: 'lines',
|
|
|
+ coordinateSystem: 'cartesian2d',
|
|
|
+ data: dataList.map((item, index) => {
|
|
|
+ return {
|
|
|
+ coords: [
|
|
|
+ [index, 0],
|
|
|
+ [index, item.value - 4]
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ effect: {
|
|
|
show: true,
|
|
|
- position: ["-18", "-18"],
|
|
|
- color: "#00f8ff",
|
|
|
- fontSize: 12,
|
|
|
+ period: 3.5,// 周期 速度 2.5
|
|
|
+ trailLength: 0.5, //控制拖尾长度
|
|
|
+ symbolSize: 25, // ⭐⭐星星大小
|
|
|
+ symbol: 'path://M307.46000719101244,524.9919417770187 L320.064963732395,524.9919417770187 L323.95999229701675,510.4772043087195 L327.8550230764027,524.9919417770187 L340.45997740302056,524.9919417770187 L330.26237201075065,533.9624401818169 L334.15760211881354,548.4771776501146 L323.95999229701675,539.506434950185 L313.76238468998207,548.4771776501146 L317.6576159054294,533.9624401818169 L307.46000719101244,524.9919417770187 z',
|
|
|
+ loop: true,
|
|
|
+ color: '#fff' //流光颜色
|
|
|
},
|
|
|
- data: zzx1,
|
|
|
- },
|
|
|
- // 计划产值底部柱子
|
|
|
- // {
|
|
|
- // data: zx,
|
|
|
- // type: "bar",
|
|
|
- //
|
|
|
- // barWidth: barWidth,
|
|
|
- // stack: "1",
|
|
|
- //
|
|
|
- // zlevel: -1,
|
|
|
- // itemStyle: {
|
|
|
- // normal: {
|
|
|
- // opacity: 0.7,
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: "rgba(8,13,18,0)",
|
|
|
- // }, {
|
|
|
- // offset: 1,
|
|
|
- // color: "rgba(8,13,18,0)",
|
|
|
- // },]),
|
|
|
- // barBorderRadius: 0,
|
|
|
- // },
|
|
|
- // },
|
|
|
- // },
|
|
|
- // 实际产值进度柱子
|
|
|
- // {
|
|
|
- // name: "2024年度",
|
|
|
- // type: "bar",
|
|
|
- // stack: "2",
|
|
|
- // barWidth: barWidth,
|
|
|
- // itemStyle: {
|
|
|
- // normal: {
|
|
|
- // opacity: 0.7,
|
|
|
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- // offset: 0,
|
|
|
- // color: "rgba(59,237,222,1)",
|
|
|
- // }, {
|
|
|
- // offset: 1,
|
|
|
- // color: "rgba(59,237,222,0)",
|
|
|
- // },]),
|
|
|
- // barBorderRadius: 0,
|
|
|
- // },
|
|
|
- // },
|
|
|
- // label: {
|
|
|
- // show: true,
|
|
|
- // position: ["18", "-18"],
|
|
|
- // color: "#00f8ff",
|
|
|
- // fontSize: 12,
|
|
|
- // },
|
|
|
- // data: wgx1,
|
|
|
- // },
|
|
|
- // 实际产值底部柱子
|
|
|
- {
|
|
|
- data: wg,
|
|
|
- type: "bar",
|
|
|
- barWidth: barWidth,
|
|
|
- stack: "2",
|
|
|
-
|
|
|
- zlevel: -1,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- opacity: 0.7,
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: "rgba(8,13,18,0.4)",
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: "rgba(8,13,18,0)",
|
|
|
- },]),
|
|
|
- barBorderRadius: 0,
|
|
|
- },
|
|
|
+ lineStyle: {
|
|
|
+ width: 0,
|
|
|
+ opacity: 0.6,
|
|
|
+ curveness: 0
|
|
|
},
|
|
|
+ "zlevel": 2
|
|
|
},
|
|
|
- ],
|
|
|
- };
|
|
|
-
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ if (option) {
|
|
|
+ myChart.setOption(option);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ economic() {
|
|
|
+ // 经济运行
|
|
|
+ var myChart = echarts.init(document.getElementById('jjyx'));
|
|
|
var option = {
|
|
|
- grid: {
|
|
|
- left: "2%",
|
|
|
- right: "4%",
|
|
|
- bottom: "5%",
|
|
|
- top: "10%",
|
|
|
- containLabel: true,
|
|
|
+ title: {
|
|
|
+ text: '',
|
|
|
+ left: 26,
|
|
|
+ top: 26,
|
|
|
+ textStyle: {
|
|
|
+ color: '#FFFFFF',
|
|
|
+ fontSize: 12,
|
|
|
+ fontWeight: 50000,
|
|
|
+ fontFamily: 'PingFang SC'
|
|
|
+ }
|
|
|
},
|
|
|
legend: {
|
|
|
data: ["2023年度", "2024年度"],
|
|
|
-
|
|
|
top: 1,
|
|
|
textStyle: {
|
|
|
color: "#deebff",
|
|
|
@@ -954,18 +566,6 @@ export default {
|
|
|
color: "#242424",
|
|
|
selectedMode: false,
|
|
|
},
|
|
|
- title: {
|
|
|
- text: '',
|
|
|
- left: 26,
|
|
|
- top: 26,
|
|
|
- textStyle: {
|
|
|
- color: '#FFFFFF',
|
|
|
- fontSize: 12,
|
|
|
- fontWeight: 50000,
|
|
|
- fontFamily: 'PingFang SC'
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
@@ -975,6 +575,13 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
+ grid: {
|
|
|
+ left: "2%",
|
|
|
+ right: "4%",
|
|
|
+ bottom: "5%",
|
|
|
+ top: "10%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
xAxis: [{
|
|
|
type: "category",
|
|
|
data: [
|
|
|
@@ -1020,92 +627,116 @@ export default {
|
|
|
show: false
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
],
|
|
|
- dataZoom: [{
|
|
|
- type: 'inside',
|
|
|
- start: 0,
|
|
|
- end: dataList.length > 15 ? 35 : 100
|
|
|
- }],
|
|
|
- series: [{
|
|
|
- name: "2023",
|
|
|
- type: "bar",
|
|
|
- data: dataList,
|
|
|
- barGap: '30%',
|
|
|
- barCategoryGap: '70%',
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: "rgba(0,222,255,1)",
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: "rgba(1,23,60,1)",
|
|
|
- },])
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '2023',
|
|
|
+ type: 'bar',
|
|
|
+ data: [20, 16, 42, 32],
|
|
|
+ barWidth: 10,
|
|
|
+ barGap: 0,//柱间距离
|
|
|
+ label: {//图形上的文本标签
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ textStyle: {
|
|
|
+ color: '#a8aab0',
|
|
|
+ fontStyle: 'normal',
|
|
|
+ fontFamily: '微软雅黑',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(0,222,255,1)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(1,23,60,1)'
|
|
|
+ }])
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(39,116,212,1)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(1,23,60,1)'
|
|
|
+ }])
|
|
|
+ }
|
|
|
},
|
|
|
- emphasis: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(39,116,212,1)'
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(1,23,60,1)'
|
|
|
- }])
|
|
|
- }
|
|
|
},
|
|
|
- }, {
|
|
|
- name: "2024",
|
|
|
- type: "bar",
|
|
|
- data: dataList,
|
|
|
- barGap: '100%',
|
|
|
- barCategoryGap: '70%',
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(0,222,255,1)'
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(1,23,60,1)'
|
|
|
- }])
|
|
|
+ {
|
|
|
+ type: 'lines',
|
|
|
+ coordinateSystem: 'cartesian2d',
|
|
|
+ data: [52, 42, 12, 24].map((item, index) => {
|
|
|
+ return {
|
|
|
+ coords: [
|
|
|
+ [index, 0],
|
|
|
+ [index, item - 4]
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ effect: {
|
|
|
+ show: true,
|
|
|
+ period: 2.5,// 周期 速度 2.5
|
|
|
+ trailLength: 0.5, //控制拖尾长度
|
|
|
+ symbolSize: [19, 2], // ⭐⭐星星大小
|
|
|
+ symbol: this.$store.state.common.echarts_baseStreamer,
|
|
|
+ loop: true,
|
|
|
+ color: '#fff' //流光颜色
|
|
|
},
|
|
|
- emphasis: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(39,116,212,1)'
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(1,23,60,1)'
|
|
|
- }])
|
|
|
- }
|
|
|
+ lineStyle: {
|
|
|
+ width: 0,
|
|
|
+ opacity: 0.6,
|
|
|
+ curveness: 0
|
|
|
+ },
|
|
|
+ "zlevel": 2
|
|
|
},
|
|
|
- },
|
|
|
-
|
|
|
- ]
|
|
|
- }
|
|
|
-
|
|
|
- // 初始数据
|
|
|
-
|
|
|
- function updateData() {
|
|
|
- var data = [0, 0, 0, 0, 0, 0];
|
|
|
- // 更新数据数组
|
|
|
- for (var i = 0; i < data.length; i++) {
|
|
|
- data[i] += Math.floor(Math.random() * 10); // 可以根据需要调整增长速度
|
|
|
- if (data[i] >= 100) {
|
|
|
- data[i] = 0;
|
|
|
+ {
|
|
|
+ name: '2024',
|
|
|
+ type: 'bar',
|
|
|
+ data: [52, 42, 12, 24],
|
|
|
+ barWidth: 10,
|
|
|
+ barGap: 0.2,//柱间距离
|
|
|
+ label: {//图形上的文本标签
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ textStyle: {
|
|
|
+ color: '#a8aab0',
|
|
|
+ fontStyle: 'normal',
|
|
|
+ fontFamily: '微软雅黑',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(0,222,255,1)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(1,23,60,1)'
|
|
|
+ }])
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(39,116,212,1)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(1,23,60,1)'
|
|
|
+ }])
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
- }
|
|
|
- return data
|
|
|
- }
|
|
|
-
|
|
|
- setInterval(function () {
|
|
|
- option.series[0].data = updateData();
|
|
|
- option.series[1].data = updateData();
|
|
|
- myChart.setOption(option);
|
|
|
- }, 1000);
|
|
|
-
|
|
|
+ ]
|
|
|
+ };
|
|
|
myChart.setOption(option);
|
|
|
-
|
|
|
// })
|
|
|
},
|
|
|
|
bihuisong