From 1390d0f1996577a1ffd03c0b4fffbae043f37dc0 Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期三, 05 三月 2025 16:19:04 +0800
Subject: [PATCH] echarts图表
---
src/view/home/index.vue | 273 ++++++++++++++++++++++++++++++++---------------------
1 files changed, 164 insertions(+), 109 deletions(-)
diff --git a/src/view/home/index.vue b/src/view/home/index.vue
index c654b81..b17d298 100644
--- a/src/view/home/index.vue
+++ b/src/view/home/index.vue
@@ -213,7 +213,7 @@
return {
activeIndex: "1",
activeIndex2: "1",
- countList: [], //预警情况统计数据
+ countList: [1, 2, 3], //预警情况统计数据
rankList: [
{ name: "射洪客运公司", value: 90 },
{ name: "滴滴网约车客运公司", value: 80 },
@@ -260,10 +260,7 @@
window.shotScreen = () => {
this.shotScreen();
};
- },
- onload() {
- // if (this.carList.length > 0) {
- // }
+
},
mounted() {
let arr = [
@@ -350,6 +347,8 @@
this.initMap();
setTimeout(() => {
this.addMarker(this.carList, [105.444444, 31.523333]);
+ this.getCountList();
+
}, 1000);
},
methods: {
@@ -537,133 +536,189 @@
}
},
chartTnit(x, y1, y2) {
- // 基于准备好的dom，初始化echarts实例
+ // 基于准备好的dom，初始化echarts实例 grid: {
+ // width: "auto",
+ // height: "auto",
+ // left: "0",
+ // right: "5%",
+ // bottom: "0",
+ // top: "15%",
+ // containLabel: true,
+ // },
const myChart = echarts.init(document.getElementById("countChart"));
+ console.log('22222222222222222',myChart)
+
// 绘制数量图表
myChart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
- // 坐标轴指示器，坐标轴触发有效
- type: "cross", // 默认为直线，可选为：'line' | 'cross'
+ type: "shadow",
},
- // 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: ["充电电费", "充电服务费"],
},
grid: {
width: "auto",
height: "auto",
- left: "0",
- right: "5%",
- bottom: "0",
- top: "15%",
+ top: "5%",
+ left: "3%",
+ right: "4%",
+ bottom: "0%",
containLabel: true,
},
- 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)",
+ xAxis: [
+ {
+ type: "category",
+ data: ["未系安全带", "疲劳驾驶", "抽烟", "打电话", "激烈驾驶"],
+ axisTick: {
+ alignWithLabel: true,
+ lineStyle: {
+ color: "#777777",
+ },
+ },
+ axisLabel: {
+ color: "rgba(0, 0, 0, 0.45)",
},
},
- splitLine: {
- // 去掉网格线
- show: false,
+ ],
+ yAxis: [
+ {
+ type: "value",
},
- 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,
+ barWidth: "20px",
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% 处的颜色
- ]
- ),
+ borderRadius: [20, 20, 20, 20],
+ color: (params) => {
+ console.log("111111", params);
+ return ["#5B8FF9", "#5AD8A6", "#F6BD16", "#6DC8EC", "#945FB9"][
+ params.dataIndex
+ ];
+ },
},
- // 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,
+ data: [10, 52, 20, 33, 39, 30, 20],
},
],
});
+
+ // 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();
},
// 获取预警排行榜数据
@@ -1106,7 +1161,7 @@
.warnCount {
position: relative;
- .countChart {
+ #countChart {
width: 453px;
height: 150px;
}
--
Gitblit v1.7.1