yjxp-web/src/views/disasterRiskMonitor/chartOptions.ts

import { graphic } from "echarts";

export const chartOption1 = {
  legend: {},
  grid: {
    top: "40px",
    left: "30px",
    right: "20px",
    bottom: "30px"
    // containLabel: true
  },
  tooltip: {
    show: true,
    trigger: "axis"
  },
  xAxis: [
    {
      type: "category",
      axisLabel: {
        textStyle: {
          color: "#414F64",
          fontSize: 10
        }
      },
      axisLine: {
        show: true
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      data: []
    }
  ],

  yAxis: [
    {
      type: "value",
      splitLine: {
        show: true
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: "#414F64",
          fontSize: 10
        }
      },
      axisTick: {
        show: false
      }
    }
  ],
  series: [
    {
      name: "自然灾害",
      type: "line",
      smooth: true, //是否平滑
      showAllSymbol: true,
      symbol: "circle",
      symbolSize: 6,
      lineStyle: {
        color: "#00b3f4"
      },
      label: {
        show: true,
        position: "top",
        textStyle: {
          color: "#00b3f4",
          fontSize: 10
        }
      },
      itemStyle: {
        color: "#00b3f4",
        borderColor: "#fff",
        borderWidth: 1
      },
      areaStyle: {
        normal: {
          color: new graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(0,179,244,0.3)"
              },
              {
                offset: 1,
                color: "rgba(0,179,244,0)"
              }
            ],
            false
          ),
          shadowColor: "rgba(0,179,244, 0.9)",
          shadowBlur: 20
        }
      },
      data: []
    },
    {
      name: "事故灾害",
      type: "line",
      smooth: true, //是否平滑
      showAllSymbol: true,
      symbol: "circle",
      symbolSize: 6,
      lineStyle: {
        color: "#00ca95"
      },
      label: {
        show: true,
        position: "top",
        textStyle: {
          color: "#00ca95",
          fontSize: 10
        }
      },

      itemStyle: {
        color: "#00ca95",
        borderColor: "#fff",
        borderWidth: 1
      },
      areaStyle: {
        normal: {
          color: new graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(0,202,149,0.3)"
              },
              {
                offset: 1,
                color: "rgba(0,202,149,0)"
              }
            ],
            false
          ),
          shadowColor: "rgba(0,202,149, 0.9)",
          shadowBlur: 20
        }
      },
      data: []
    }
  ]
};

export const chartOption2 = {
  grid: {
    top: "25%",
    bottom: "10%" //也可设置left和right设置距离来控制图表的大小
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      label: {
        show: true
      }
    },
    formatter: params => {
      let result = "";
      // 遍历每个轴上的数据点
      params.forEach(function (item) {
        if (item.seriesName === "温度") {
          result +=
            "<div>" + item.marker + item.seriesName + item.value + "℃</div>";
        } else {
          result +=
            "<div>" + item.marker + item.seriesName + item.value + "mm</div>";
        }
      });
      return result;
    }
  },
  legend: {
    data: ["温度", "降水"],
    top: "15%",
    textStyle: {
      color: "#7F8B9F"
    }
  },
  xAxis: {
    data: [],
    axisLine: {
      show: true,
      lineStyle: {
        color: "#eaeef7"
      }
    },
    axisTick: {
      show: true
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "#7F8B9F"
      }
    }
  },
  yAxis: [
    {
      type: "value",
      name: "单位：℃",
      nameTextStyle: {
        color: "#7F8B9F"
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#eaeef7"
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#eaeef7"
        }
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#7F8B9F"
        }
      }
    },
    {
      type: "value",
      name: "单位：mm",
      nameTextStyle: {
        color: "#7F8B9F"
      },
      position: "right",
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#eaeef7"
        }
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#7F8B9F"
        }
      }
    }
  ],
  series: [
    {
      name: "温度",
      type: "line",
      smooth: true, //平滑曲线显示
      showSymbol: false,
      itemStyle: {
        color: new graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#9bbdf4"
          },
          {
            offset: 1,
            color: "#2a72e9"
          }
        ])
      },
      data: []
    },
    {
      name: "降水",
      type: "line",
      yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
      smooth: true, //平滑曲线显示
      // showSymbol: false,
      itemStyle: {
        //折线拐点标志的样式
        color: "#feaf00"
      },
      lineStyle: {
        color: new graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "#f9df83"
          },
          {
            offset: 1,
            color: "#f7983f"
          }
        ])
      },
      // areaStyle:{
      //     color: new graphic.LinearGradient(0, 0, 0, 1, [
      //         {
      //             offset: 0,
      //             color: "rgba(155, 189, 244, 0.8)"
      //         },
      //
      //         {
      //             offset: 1,
      //             color: "rgba(155, 189, 244, 0)"
      //         }
      //     ])
      // },
      data: []
    }
  ]
};

export const chartOption3 = {
  grid: {
    top: "30px",
    bottom: "50px" //也可设置left和right设置距离来控制图表的大小
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      label: {
        show: true
      }
    },
    formatter: params => {
      let result = "";
      // 遍历每个轴上的数据点
      params.forEach(function (item) {
        console.log(item);
        result +=
          '<div style="display: flex"><div style="color: #3177ec;font-size: 16px;font-weight: bold">' +
          item.value +
          "</div>个</div>";
      });
      return result;
    }
  },
  xAxis: {
    data: [],
    offset: 20,
    axisLine: {
      show: true,
      lineStyle: {
        color: "#eaeef7"
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "#7F8B9F"
      }
    }
  },
  yAxis: [
    {
      type: "value",
      name: "单位：个",
      nameTextStyle: {
        color: "#7F8B9F"
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#eaeef7"
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#eaeef7"
        }
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#7F8B9F"
        }
      }
    }
  ],
  series: [
    {
      name: "非某矿山行业重大事故隐患",
      type: "line",
      smooth: true, //平滑曲线显示
      showSymbol: false,
      itemStyle: {
        color: new graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#92E1E5"
          },
          {
            offset: 1,
            color: "#00BBC4"
          }
        ])
      },
      areaStyle: {
        color: new graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(0, 187, 196, 0.5)"
          },

          {
            offset: 1,
            color: "rgba(0, 187, 196, 0)"
          }
        ])
      },
      data: []
    }
  ]
};

export const chartOption4 = {
  grid: {
    top: "0",
    left: "10px",
    right: "40px",
    bottom: "20px",
    containLabel: true
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  xAxis: {
    type: "value",
    axisLabel: {
      show: true,
      textStyle: {
        color: "#7F8B9F"
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#eaeef7"
      }
    },
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: "category",
    axisLabel: {
      show: true,
      textStyle: {
        color: "#7F8B9F"
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#eaeef7"
      }
    },
    axisTick: {
      show: false
    },
    data: [
      "信宜市",
      "高州市",
      "化州市",
      "电白区",
      "茂南区",
      "滨海新区",
      "高新区"
    ]
  },
  series: [
    {
      name: "2011",
      type: "bar",
      label: {
        show: true,
        position: "right",
        fontSize: "12px",
        color: "#2C81FF"
      },
      data: [],
      itemStyle: {
        color: new graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "#266FE8"
          },
          {
            offset: 1,
            color: "#A1C0F5"
          }
        ])
      }
    }
  ]
};

export const chartOption5 = {
  color: ["#8984ff", "#56e09f", "#2c81ff", "#fab21b", "#ff7a0d"],
  tooltip: {
    show: false
  },
  toolbox: {
    show: false
  },
  series: [
    {
      name: "",
      type: "pie",
      clockWise: false,
      radius: [60, 65],
      width: 280,
      height: 252,
      hoverAnimation: false,
      center: ["17%", "55%"],
      left: "20%",
      top: "center",
      itemStyle: {
        normal: {
          label: {
            show: false
          }
        }
      },
      data: []
    }
  ]
};

export const chartOption6 = {
  legend: {},
  grid: {
    top: "40px",
    left: "30px",
    right: "20px",
    bottom: "30px"
    // containLabel: true
  },
  tooltip: {
    show: true,
    trigger: "axis"
  },
  xAxis: [
    {
      type: "category",
      axisLabel: {
        textStyle: {
          color: "#414F64",
          fontSize: 10
        }
      },
      axisLine: {
        show: true
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      data: []
    }
  ],

  yAxis: [
    {
      type: "value",
      splitLine: {
        show: true
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: "#414F64",
          fontSize: 10
        }
      },
      axisTick: {
        show: false
      }
    }
  ],
  series: [
    {
      name: "一般事故",
      type: "line",
      smooth: true, //是否平滑
      showAllSymbol: true,
      symbol: "circle",
      symbolSize: 6,
      lineStyle: {
        color: "#00b3f4"
      },
      label: {
        show: true,
        position: "top",
        textStyle: {
          color: "#00b3f4",
          fontSize: 10
        }
      },
      itemStyle: {
        color: "#00b3f4",
        borderColor: "#fff",
        borderWidth: 1
      },
      areaStyle: {
        normal: {
          color: new graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(0,179,244,0.3)"
              },
              {
                offset: 1,
                color: "rgba(0,179,244,0)"
              }
            ],
            false
          ),
          shadowColor: "rgba(0,179,244, 0.9)",
          shadowBlur: 20
        }
      },
      data: []
    },
    {
      name: "重大事故",
      type: "line",
      smooth: true, //是否平滑
      showAllSymbol: true,
      symbol: "circle",
      symbolSize: 6,
      lineStyle: {
        color: "#00ca95"
      },
      label: {
        show: true,
        position: "top",
        textStyle: {
          color: "#00ca95",
          fontSize: 10
        }
      },

      itemStyle: {
        color: "#00ca95",
        borderColor: "#fff",
        borderWidth: 1
      },
      areaStyle: {
        normal: {
          color: new graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(0,202,149,0.3)"
              },
              {
                offset: 1,
                color: "rgba(0,202,149,0)"
              }
            ],
            false
          ),
          shadowColor: "rgba(0,202,149, 0.9)",
          shadowBlur: 20
        }
      },
      data: []
    }
  ]
};

export const chartOption7 = {
  grid: {
    top: "0",
    left: "10px",
    right: "40px",
    bottom: "20px",
    containLabel: true
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  xAxis: {
    type: "value",
    axisLabel: {
      show: true,
      textStyle: {
        color: "#7F8B9F"
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#eaeef7"
      }
    },
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: "category",
    axisLabel: {
      show: true,
      textStyle: {
        color: "#7F8B9F"
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#eaeef7"
      }
    },
    axisTick: {
      show: false
    },
    data: [
      "超速",
      "酒驾",
      "疲劳驾驶",
      "闯红灯",
      "恶劣天气",
      "道路设计缺陷",
      "路面障碍物",
      "车辆问题"
    ]
  },
  series: [
    {
      name: "2011",
      type: "bar",
      label: {
        show: true,
        position: "right",
        fontSize: "12px",
        color: "#2C81FF"
      },
      data: [],
      itemStyle: {
        color: new graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "#266FE8"
          },
          {
            offset: 1,
            color: "#A1C0F5"
          }
        ])
      }
    }
  ]
};