|
|
@@ -0,0 +1,272 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="chart-template">
|
|
|
+ <p>
|
|
|
+ <span> 安全指数排名(上月) </span>
|
|
|
+ </p>
|
|
|
+ <
|
|
|
+ <!-- <div id="safetyIndex_Chart"></div> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import "./../../board.scss";
|
|
|
+import * as echarts from "echarts";
|
|
|
+import {
|
|
|
+ findMaxIndex,
|
|
|
+ getChartDOMSize,
|
|
|
+ getNextPeriod,
|
|
|
+ getPeriodText,
|
|
|
+} from "../../utils.js";
|
|
|
+
|
|
|
+export default {
|
|
|
+ props: ["orgId"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ data: {
|
|
|
+ all: [],
|
|
|
+ completed: [],
|
|
|
+ name: [],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ components: {},
|
|
|
+
|
|
|
+ computed: {},
|
|
|
+
|
|
|
+ watch: {
|
|
|
+ orgId: {
|
|
|
+ deep: true,
|
|
|
+ handler(val) {
|
|
|
+ this.resetTimer();
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ deep: true,
|
|
|
+ handler() {
|
|
|
+ // this.initMap();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.maxDisplay = 16;
|
|
|
+ this.isMouseOver = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ async mounted() {
|
|
|
+ window.addEventListener("resize", this.windowResize);
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.timer && clearInterval(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+
|
|
|
+ window.removeEventListener("resize", this.windowResize);
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ handleClick() {
|
|
|
+ this.resetTimer();
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ handleMouseEnter() {
|
|
|
+ this.isMouseOver = true;
|
|
|
+ },
|
|
|
+ handleMouseLeave() {
|
|
|
+ this.isMouseOver = false;
|
|
|
+ },
|
|
|
+ async getData() {
|
|
|
+ this.data = {
|
|
|
+ value: [
|
|
|
+ 100, 99.4, 99, 98, 97.8, 97.6, 97.4, 97, 96.9, 96.7, 96.3, 96, 95.8,95.7,95.6,95
|
|
|
+ ],
|
|
|
+ name: [
|
|
|
+ "玉塘分理处",
|
|
|
+ "寿宁县农联社鳌阳社",
|
|
|
+ "永春县农联社仙溪社",
|
|
|
+ "永春县农联社曲斗社",
|
|
|
+ "连江县农联社东湖社",
|
|
|
+ "连江县农联社江南社",
|
|
|
+ "霞浦联社海滨社",
|
|
|
+ "霞浦联社南街社",
|
|
|
+ "闽侯县农联社甘蔗社",
|
|
|
+ "闽侯县农联社荆溪社",
|
|
|
+ "闽侯县农联社洋里社",
|
|
|
+ "闽侯县农联社青口社",
|
|
|
+ // "永泰县农联社红星社",
|
|
|
+ // "罗源县农联社洪洋社",
|
|
|
+ // "云霄县农联社下河社",
|
|
|
+ // "诏安县农联社南门社",
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ windowResize() {
|
|
|
+ this.myChart && this.myChart.resize();
|
|
|
+ },
|
|
|
+ // initMap() {
|
|
|
+ // this.myChart && this.myChart.dispose();
|
|
|
+
|
|
|
+ // // 基于准备好的dom,初始化echarts实例
|
|
|
+ // this.myChart = echarts.init(document.getElementById("safetyIndex_Chart"));
|
|
|
+
|
|
|
+ // let t = this;
|
|
|
+ // // 指定图表的配置项和数据
|
|
|
+ // var option = {
|
|
|
+ // // tooltip: {
|
|
|
+ // // trigger: "axis",
|
|
|
+ // // axisPointer: {
|
|
|
+ // // type: "shadow",
|
|
|
+ // // },
|
|
|
+ // // },
|
|
|
+ // color: ["#008CD6"],
|
|
|
+ // grid: {
|
|
|
+ // left: "3%",
|
|
|
+ // right: "80px",
|
|
|
+ // bottom: "2%",
|
|
|
+ // top: "30px",
|
|
|
+ // containLabel: true,
|
|
|
+ // },
|
|
|
+ // legend: {
|
|
|
+ // show: true,
|
|
|
+ // textStyle:{
|
|
|
+ // color:"rgb(245, 245, 245)"
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // xAxis: {
|
|
|
+ // max: "dataMax",
|
|
|
+ // show:false,
|
|
|
+ // },
|
|
|
+ // yAxis: {
|
|
|
+ // type: "category",
|
|
|
+ // data: this.data.name,
|
|
|
+ // inverse: true,
|
|
|
+
|
|
|
+ // axisLabel: {
|
|
|
+ // interval: 0,
|
|
|
+ // // rotate: -30,
|
|
|
+ // fontSize: 12,
|
|
|
+ // color: "rgb(245, 245, 245)",
|
|
|
+ // },
|
|
|
+ // // animationDuration: 300,
|
|
|
+ // // animationDurationUpdate: 300,
|
|
|
+ // // max: this.maxDisplay, // only the largest 3 bars will be displayed
|
|
|
+ // },
|
|
|
+ // series: [
|
|
|
+ // {
|
|
|
+ // realtimeSort: true,
|
|
|
+ // name: "安全评分",
|
|
|
+ // type: "bar",
|
|
|
+ // data: this.data.value,
|
|
|
+ // barWidth: 14,
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // position: "right",
|
|
|
+ // valueAnimation: true,
|
|
|
+ // formatter:"{c}分",
|
|
|
+ // textStyle: {
|
|
|
+ // fontWeight: "bolder",
|
|
|
+ // fontSize: "12",
|
|
|
+ // color: "rgb(245, 245, 245)",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // // xAxis: [
|
|
|
+ // // {
|
|
|
+ // // type: "category",
|
|
|
+ // // data: this.data.name,
|
|
|
+ // // // data: this.mapdata.totalDataVo.xlist,
|
|
|
+ // // axisTick: {
|
|
|
+ // // alignWithLabel: true,
|
|
|
+ // // },
|
|
|
+ // // axisLine: {
|
|
|
+ // // show: true,
|
|
|
+ // // lineStyle: {
|
|
|
+ // // type: "solid",
|
|
|
+ // // color: "#ccc", //左边线的颜⾊
|
|
|
+ // // },
|
|
|
+ // // },
|
|
|
+ // // axisLabel: {
|
|
|
+ // // interval: 0,
|
|
|
+ // // rotate: -30,
|
|
|
+ // // fontSize: 12,
|
|
|
+ // // color: "#fff",
|
|
|
+ // // },
|
|
|
+ // // },
|
|
|
+ // // ],
|
|
|
+ // // yAxis: [
|
|
|
+ // // {
|
|
|
+ // // type: "value",
|
|
|
+ // // minInterval: 1,
|
|
|
+ // // // max: function (value) {
|
|
|
+ // // // let m = value.max == Math.ceil(value.max) ? Math.ceil(value.max * 1.0001) : Math.ceil(value.max);
|
|
|
+ // // // return m
|
|
|
+ // // // },
|
|
|
+ // // },
|
|
|
+ // // ],
|
|
|
+ // // series: [
|
|
|
+ // // {
|
|
|
+ // // name: "总数",
|
|
|
+ // // type: "bar",
|
|
|
+ // // barWidth: "14",
|
|
|
+ // // // label: {
|
|
|
+ // // // show: true,
|
|
|
+ // // // position: 'top',
|
|
|
+ // // // },
|
|
|
+ // // data: this.data.all,
|
|
|
+ // // },
|
|
|
+ // // {
|
|
|
+ // // name: "已完成",
|
|
|
+ // // type: "bar",
|
|
|
+ // // barWidth: "14",
|
|
|
+ // // // label: {
|
|
|
+ // // // show: true,
|
|
|
+ // // // position: 'top',
|
|
|
+ // // // },
|
|
|
+ // // data: this.data.completed,
|
|
|
+ // // itemStyle: {
|
|
|
+ // // normal: {
|
|
|
+ // // label: {
|
|
|
+ // // formatter: function (param) {
|
|
|
+ // // if (t.data.all[param.dataIndex]) {
|
|
|
+ // // let rate = param.value / t.data.all[param.dataIndex];
|
|
|
+ // // return (Math.floor(rate * 1000) / 10).toFixed(1) + "%";
|
|
|
+ // // } else {
|
|
|
+ // // return "";
|
|
|
+ // // }
|
|
|
+ // // },
|
|
|
+ // // show: true,
|
|
|
+ // // position: "top",
|
|
|
+ // // textStyle: {
|
|
|
+ // // fontWeight: "bolder",
|
|
|
+ // // fontSize: "12",
|
|
|
+ // // color: "#fff",
|
|
|
+ // // },
|
|
|
+ // // },
|
|
|
+ // // },
|
|
|
+ // // },
|
|
|
+ // // },
|
|
|
+ // // ],
|
|
|
+ // };
|
|
|
+ // if (option && typeof option === "object") {
|
|
|
+ // this.myChart.setOption(option);
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+
|
|
|
+ resetTimer() {
|
|
|
+ // this.timer && clearInterval(this.timer);
|
|
|
+ // this.timer = setInterval(() => {
|
|
|
+ // if (this.isMouseOver) {
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ // this.activeName = getNextPeriod(this.types, this.activeName);
|
|
|
+ // this.getData();
|
|
|
+ // }, this.refreshTime);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped></style>
|