diff --git a/web/src/assets/images/datacontentbj.png b/web/src/assets/images/datacontentbj.png new file mode 100644 index 00000000..acb8fc3a Binary files /dev/null and b/web/src/assets/images/datacontentbj.png differ diff --git a/web/src/assets/images/datatitle.png b/web/src/assets/images/datatitle.png new file mode 100644 index 00000000..d6494589 Binary files /dev/null and b/web/src/assets/images/datatitle.png differ diff --git a/web/src/assets/images/jg.png b/web/src/assets/images/jg.png new file mode 100644 index 00000000..1170323d Binary files /dev/null and b/web/src/assets/images/jg.png differ diff --git a/web/src/assets/images/riqi.png b/web/src/assets/images/riqi.png new file mode 100644 index 00000000..2cd93e6a Binary files /dev/null and b/web/src/assets/images/riqi.png differ diff --git a/web/src/echarts.js b/web/src/echarts.js new file mode 100644 index 00000000..b2b28766 --- /dev/null +++ b/web/src/echarts.js @@ -0,0 +1,41 @@ +import * as echarts from "echarts"; +export function echart({ + id, + grid, + fn, + changbs, + val, + chat +}) { + // let myChart = chat ? chat : null + let myChart = null + // if (val) { + + // } + let dom = document.getElementById(id) + dom.removeAttribute('_echarts_instance_'); + myChart = echarts.init(document.getElementById(id)); + // myChart.clear() + const option = grid + myChart.on('click', function (params) { + if (fn) fn(params, myChart) + }); + myChart.on('geoRoam', function (params) { + var option = myChart.getOption(); + if (option.geo) { + var geo = option.series[0]; // 获取当前地图的配置 + // 更新其他地图的 zoom 和 center 属性 + // option.series[1].label.rich.name.fontSize = 16 * geo.zoom + // option.series[1].label.rich.pt.fontSize = 14 * geo.zoom + // option.series[1].label.fontSize = 14 * geo.zoom + option.geo[0].zoom = geo.zoom; + option.geo[0].center = geo.center; + myChart.setOption(option, true, false); + } + }); + myChart.setOption(option, true); + window.addEventListener("resize", function () { + myChart.resize(); + }); + return myChart; +} diff --git a/web/src/views/large-screen/echartsOptions.js b/web/src/views/large-screen/echartsOptions.js new file mode 100644 index 00000000..18eba41d --- /dev/null +++ b/web/src/views/large-screen/echartsOptions.js @@ -0,0 +1,165 @@ +import * as echarts from "echarts"; +// import 'echarts-liquidfill/src/liquidFill.js'; //在这里引入 +export function echartsBing({ }) { + return { + color: ['#fff17d', '#23BDF9'], + // 图表标题 + title: { + text: '总数', + subtext: 15, + textStyle: { + color: '#fff', + fontSize: 14, + align: 'center' + }, + subtextStyle: { + fontSize: 14, + color: ['#fff'], + verticalAlign: 'center' // 副标题垂直居中 + }, + left: '25%', // 整体标题水平居中放置，这里用center替代x属性 + top: '48%' // 整体标题垂直居中放置，这里用top替代y属性 + }, + // 图例 + legend: [{ + center: 'position', + top: '43%', + right: '20%', + icon: 'circle', + itemWidth: 12, + itemHeight: 12, + textStyle: { + color: '#fff', + padding: [0, 0, 0, 5] + }, + data: ['施工机械数'] + }, + { + center: 'position', + top: '57%', + right: '20%', + icon: 'circle', + itemWidth: 12, + itemHeight: 12, + textStyle: { + color: '#fff', + padding: [0, 0, 0, 5] + }, + data: ['运输车辆数'] + }], + // 系列列表，每个系列通过 type 决定图表类型 + series: [{ + name: '车辆机械设备分布', + type: 'pie', + radius: ['40%', '60%'], // 环形图内外半径 + center: ['30%', '60%'], + avoidLabelOverlap: false, + label: { + show: false, + position: 'center' + }, + labelLine: { + show: false + }, + data: [ + { value: 75, name: '施工机械数' }, + { value: 25, name: '运输车辆数' } + ] + }] + } +} +export function echartsZhu({ + ydata, + xdata, +}) { + return { + tooltip: { + trigger: "axis", + }, + // 设置折线颜色 + // color:['linear-gradient( 90deg, rgba(10,254,239,0) 0%, #0AFEEF 100%'], + xAxis: { + + // 类目 + type: 'category', + data: xdata ? xdata : [], + // 文字 + axisLabel: { + color: '#CEE0E0', + fontSize: 10, + }, + // 线 + axisLine: { + show: true, + lineStyle: { + color: 'rgba(0,0,0,0.1)', + } + } + }, + yAxis: [{ + // 值 + name: '单位：人', + nameTextStyle: { // 添加这个属性设置名称样式 + color: '#CEE0E0', + fontSize: 12, // 可选：设置字体大小 + fontWeight: 'normal' // 可选：设置字体粗细 + }, + type: 'value', + axisLabel: { + color: '#CEE0E0', + }, + axisLine: { + show: true, + lineStyle: { + color: 'rgba(0,0,0,0.1)', + } + }, + splitLine: { //改变横向网格线的颜色 + show: true, + lineStyle: { + color: ['rgb(206,224,224,0.15)'], + width: 1, + type: 'solid' + }, + }, + }], + grid: { + top: '15%', + left: '7.5%', + bottom: '12%', + right: '3%', + }, + series: [{ + data: ydata ? ydata : [], + type: 'bar', + name: '人数', + // 柱子宽度 + barWidth: 15, + // 柱子间距 + barGap: 1, + itemStyle: { + normal: { + label: { + show: true, //开启显示 + position: 'top', //在上方显示 + textStyle: { //数值样式 + color: 'white', + fontSize: 12 + } + }, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, + color: '#0AA0FE', + }, { + offset: 0.5, + color: '#0964a1' + }, { + offset: 1, + color: '#092b48' + }]), + opacity: 1, + } + } + }] + } +} \ No newline at end of file diff --git a/web/src/views/large-screen/index.vue b/web/src/views/large-screen/index.vue index 8db2b34d..408a6a81 100644 --- a/web/src/views/large-screen/index.vue +++ b/web/src/views/large-screen/index.vue @@ -1,19 +1,409 @@ \ No newline at end of file