| | |
| | | created() {
|
| | | //初始化窗口点击事件
|
| | | window.toCarDetail = (record) => {
|
| | | console.log("111111111111222222", record);
|
| | | this.toCarDetail(record);
|
| | | };
|
| | | window.fullScreen = () => {
|
| | |
| | | infoWindow.setContent(e.target.content);
|
| | | infoWindow.open(this.map, e.target.getPosition());
|
| | | });
|
| | | // // 监听地图缩放事件
|
| | | // map.on("zoomchange", ()=> {
|
| | | // var zoom = map.getZoom();
|
| | | // var size = 30 + (zoom - 3) * 2; // 根据缩放级别计算 marker 大小
|
| | | // var size1 = 20 + (zoom - 3) * 2;
|
| | | // marker.setIcon({
|
| | | // // image: "https://example.com/marker.png",
|
| | | // size: new AMap.Size(size, size1),
|
| | | // });
|
| | | // });
|
| | | });
|
| | | }
|
| | | },
|
| | |
| | | }
|
| | | },
|
| | | chartTnit(x, y1, y2) {
|
| | | // 基于准备好的dom,初始化echarts实例 grid: {
|
| | | // width: "auto",
|
| | | // height: "auto",
|
| | | // left: "0",
|
| | | // right: "5%",
|
| | | // bottom: "0",
|
| | | // top: "15%",
|
| | | // containLabel: true,
|
| | | // },
|
| | | // 基于准备好的dom,初始化echarts实例
|
| | | const myChart = echarts.init(document.getElementById("countChart"));
|
| | | console.log("22222222222222222", myChart);
|
| | |
|
| | | // 绘制数量图表
|
| | | myChart.setOption({
|
| | | tooltip: {
|
| | |
| | | itemStyle: {
|
| | | borderRadius: [20, 20, 20, 20],
|
| | | color: (params) => {
|
| | | console.log("111111", params);
|
| | | return ["#5B8FF9", "#5AD8A6", "#F6BD16", "#6DC8EC", "#945FB9"][
|
| | | params.dataIndex
|
| | | ];
|
| | |
| | | },
|
| | | ],
|
| | | });
|
| | |
|
| | | // myChart.setOption({
|
| | | // tooltip: {
|
| | | // trigger: "axis",
|
| | | // axisPointer: {
|
| | | // // 坐标轴指示器,坐标轴触发有效
|
| | | // type: "cross", // 默认为直线,可选为:'line' | 'cross'
|
| | | // },
|
| | | // // formatter: '{b}月\n'
|
| | | // },
|
| | | // legend: {
|
| | | // x: "right",
|
| | | // itemWidth: 12,
|
| | | // itemHeight: 12,
|
| | | // itemGap: 56, // 设置间距
|
| | | // textStyle: {
|
| | | // color: "rgba(68, 68, 68, 0.65)",
|
| | | // fontSize: 16,
|
| | | // padding: [0, 0, 0, 8],
|
| | | // },
|
| | | // data: ["充电电费", "充电服务费"],
|
| | | // },
|
| | |
|
| | | // xAxis: {
|
| | | // type: "category",
|
| | | // axisLabel: {
|
| | | // color: "rgba(80, 105, 122, 1)",
|
| | | // fontSize: 15,
|
| | | // lineHeight: 23,
|
| | | // fontFamily: "PingFangSC, PingFang SC",
|
| | | // // formatter:'{value}月'
|
| | | // },
|
| | | // axisTick: {
|
| | | // show: true,
|
| | | // },
|
| | | // axisLine: {
|
| | | // lineStyle: {
|
| | | // color: "RGBA(234, 234, 234, 1)",
|
| | | // },
|
| | | // },
|
| | | // splitLine: {
|
| | | // // 去掉网格线
|
| | | // show: false,
|
| | | // },
|
| | | // data: x,
|
| | | // },
|
| | | // yAxis: {
|
| | | // type: "value",
|
| | | // axisLabel: {
|
| | | // color: "rgba(80, 105, 122, 1)",
|
| | | // fontSize: 15,
|
| | | // lineHeight: 23,
|
| | | // fontFamily: "PingFangSC, PingFang SC",
|
| | | // formatter: "{value} 元",
|
| | | // },
|
| | | // splitLine: {
|
| | | // // show: false // 去掉网格线
|
| | | // color: "rgb(242, 242, 242, 1)",
|
| | | // },
|
| | | // axisTick: {
|
| | | // alignWithLabel: true,
|
| | | // },
|
| | | // },
|
| | | // series: [
|
| | | // {
|
| | | // name: "充电服务费",
|
| | | // type: "bar",
|
| | | // barMaxWidth: 13,
|
| | | // // showBackground: true,
|
| | | // itemStyle: {
|
| | | // color: new echarts.graphic.LinearGradient(
|
| | | // 0,
|
| | | // 0,
|
| | | // 0,
|
| | | // 1, // x0, y0, x1, y1
|
| | | // [
|
| | | // { offset: 0, color: "rgba(157, 245, 144, 1)" }, // 0% 处的颜色
|
| | | // { offset: 1, color: "rgba(107, 228, 178, 1)" }, // 100% 处的颜色
|
| | | // ]
|
| | | // ),
|
| | | // },
|
| | | // // label: {
|
| | | // // show: true,
|
| | | // // fontSize: 12,
|
| | | // // lineHeight: 17,
|
| | | // // // align:'right',
|
| | | // // color: 'rgba(123, 123, 123, 1)',
|
| | | // // position: 'right', // 设置标签显示在柱状条右侧
|
| | | // // // formatter: function (params) {
|
| | | // // // return params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '户'
|
| | | // // // } // 使用模板字符串保留两位小数
|
| | |
|
| | | // // },
|
| | | // data: y1,
|
| | | // },
|
| | | // {
|
| | | // name: "充电电费",
|
| | | // type: "bar",
|
| | | // barMaxWidth: 13,
|
| | | // // showBackground: true,
|
| | | // itemStyle: {
|
| | | // color: new echarts.graphic.LinearGradient(
|
| | | // 0,
|
| | | // 0,
|
| | | // 0,
|
| | | // 1, // x0, y0, x1, y1
|
| | | // [
|
| | | // { offset: 0, color: "rgba(98, 251, 255, 1)" }, // 0% 处的颜色
|
| | | // { offset: 1, color: "rgba(61, 221, 255, 1)" }, // 100% 处的颜色
|
| | | // ]
|
| | | // ),
|
| | | // },
|
| | |
|
| | | // data: y2,
|
| | | // },
|
| | | // ],
|
| | | // });
|
| | | myChart.resize();
|
| | | },
|
| | | // 获取预警排行榜数据
|
| | |
| | | console.log("跳转车辆详情");
|
| | | },
|
| | | fullScreen() {
|
| | | console.log("全屏");
|
| | | const video = document.getElementById("monitoringCard");
|
| | | if (video.requestFullscreen) {
|
| | | video.requestFullscreen();
|
| | |
| | | }
|
| | | },
|
| | | shotScreen() {
|
| | | console.log("截图");
|
| | |
|
| | | // 获取video和canvas元素
|
| | | const video = document.getElementById("monitoringCard");
|
| | | const canvas = document.getElementById("myCanvas");
|