123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200 |
- <template>
- <div class="chart" :id="id"></div>
- </template>
- <script>
- import util from "@/helper/util.js";
- import partten from "@/helper/partten.js";
- import * as echarts from "echarts";
- export default {
- name: "weather-line-chart",
- componentName: "weather-line-char",
- props: {
- width: {
- type: String,
- default: "100%",
- },
- height: {
- type: String,
- default: "270px",
- },
- list: {
- type: Array,
- default: [],
- },
- },
- data() {
- return {
- id: "",
- chart: null,
- };
- },
- methods: {
- initChart() {
- let that = this;
- const chart = echarts.init(this.$el);
- const xData = [];
- const fsData = [];
- this.list.forEach((element) => {
- xData.push(new Date(element.time).formatDate("hh时"));
- fsData.push(element.fs + 5);
- });
- let option = {
- grid: {
- top: 50,
- bottom: 50,
- left: 20,
- },
- tooltip: {
- trigger: "axis",
- formatter: function (params) {
- const data = params[0]["data"];
- new Date(data.time).formatDate("yyyy-MM-dd hh时");
- return [
- new Date(data.time).formatDate("yyyy-MM-dd hh时"),
- "天气:" + data.tqmc + "",
- "风速:" + data.fs + " m/s",
- "风向:" + data.fx + " 度",
- "气温:" + data.wd + " ℃",
- "大气压强:" + data.dqyl + " pa",
- "湿度:" + data.sd + " %",
- ].join("<br>");
- },
- },
- xAxis: {
- type: "category",
- data: xData,
- },
- yAxis: [
- {
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: { show: false },
- splitLine: { show: false },
- },
- {
- type: "value",
- // max: 25,
- axisLine: { show: false },
- axisTick: { show: false },
- axisLabel: { show: false },
- splitLine: { show: false },
- },
- ],
- series: [
- {
- type: "custom",
- renderItem: function (param, api) {
- const spiltSize = 2;
- if (param.dataIndex % spiltSize == 0 && that.list) {
- const xx = param.coordSys.width / ((that.list.length / spiltSize) | 1);
- const x = param.coordSys.x + xx * (param.dataIndex / spiltSize) * 1.05;
- const y = param.coordSys.y - 30;
- const image = require("@assets/icon/svg/weather/" + that.list[param.dataIndex]["tqtp"] + ".png");
- return {
- type: "group",
- children: [
- {
- type: "image",
- style: {
- image: image,
- x: -5,
- y: 0,
- width: 30,
- height: 30,
- },
- position: [x, y],
- },
- ],
- };
- }
- },
- data: this.list,
- yAxisIndex: 0,
- z: 11,
- },
- {
- type: "custom",
- renderItem: function (param, api) {
- const spiltSize = 2;
- if (param.dataIndex % spiltSize == 0 && that.list) {
- const xx = param.coordSys.width / ((that.list.length / spiltSize) | 1);
- const x = param.coordSys.x + 8 + xx * (param.dataIndex / spiltSize) * 1.05;
- const y = param.coordSys.y;
- return {
- type: "path",
- shape: {
- pathData: "M31 16l-15-15v9h-26v12h26v9z",
- x: -15 / 2,
- y: -15 / 2,
- width: 15,
- height: 15,
- },
- rotation: (Math.PI / 180) * (that.list[param.dataIndex]["fx"] + 90),
- // rotation: (Math.PI / 180) * 45,
- position: [x, 200],
- style: api.style({
- stroke: "#555",
- lineWidth: 1,
- }),
- };
- }
- },
- data: that.list,
- z: 10,
- },
- {
- type: "line",
- lineStyle: { normal: { color: "#303f6e" } },
- data: fsData,
- z: 1,
- },
- ],
- };
- chart.clear();
- chart.setOption(option);
- this.resize = function () {
- chart.resize();
- };
- window.addEventListener("resize", this.resize);
- },
- },
- created() {
- this.id = "pie-chart-" + util.newGUID();
- },
- mounted() {
- this.$nextTick(() => {
- setTimeout(() => {
- this.$el.style.width = this.width;
- this.$el.style.height = this.height;
- this.initChart();
- }, 500);
- });
- },
- updated() {
- this.$nextTick(() => {
- setTimeout(() => {
- this.$el.style.width = this.width;
- this.$el.style.height = this.height;
- this.initChart();
- }, 1000);
- });
- },
- unmounted() {
- window.removeEventListener("resize", this.resize);
- },
- };
- </script>
- <style lang="less">
- .chart {
- width: 100%;
- height: 100%;
- display: inline-block;
- }
- </style>
|