vue使用echarts画图,可以拿到数据,但是总是报错!

professor丶 发布于 09/18 11:41
阅读 131
收藏 0
<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
//引入折线图
require("echarts/lib/chart/line");
//引入其它组件
require("echarts/lib/component/title");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");
require("echarts/lib/component/toolbox");
require("echarts/lib/component/axisPointer");
require("echarts/lib/component/dataZoom");
require("echarts/lib/component/grid");
import { match } from "@/assets/js/Methods";
import axios from "axios";

export default {
  name: "curve_page",
  data() {
    return {
      newVal: [],
      result: [],
    };
  },
  mounted() {
    window.addEventListener("setItem", () => {
      this.newVal = sessionStorage.getItem("searchHistory");
      var val = this.newVal.split("-")[0] + this.newVal.split("-")[1];
      var equipment = this.$route.path.split("/")[1];
      var Name = match(equipment);
      this.axios
        .post("/api/curve", {
          select_date: this.newVal,
          time: val,
          Equipment_Name: Name,
        })
        .then((response) => {
          this.result = [];
          this.result = response.data;
          return this.result;
        })
        .then((res) => {
          this.drawchart(res);
        })
        .catch((error) => {
          console.log(error);
        });
    });
  },
  methods: {
    drawchart(arr) {
      // 基于准备好的dom,初始化echarts实例
      let myChart = echarts.init(document.getElementById("container"));
      myChart.clear();
      myChart.setOption({
        color: arr[2],
        //提示框组件
        tooltip: {
          trigger: "axis",
          position: [20, 0],
        },
        //图例组件
        legend: {
          data: arr[1],
          orient: "vertical",
          left: "2%",
        },
        //工具栏。内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
        },
        //坐标轴指示器的全局公用设置
        axisPointer: {
          link: { xAxisIndex: "all" },
        },
        //dataZoom 组件 用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。
        dataZoom: [
          {
            type: "slider",
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0],
          },
          {
            type: "slider",
            show: true,
            yAxisIndex: arr[5],
            start: 1,
            end: 50,
          },
        ],
        grid: {
          right: "20%",
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: arr[0],
          },
        ],
        yAxis: arr[3],
        series: arr[4],
      });
    },
  },
};
</script>
[
  [
    '00:00:24', '00:01:25', '00:02:25', '00:03:24', '00:04:24',
    '00:05:24', '00:06:24', '00:07:25', '00:08:25', '00:09:24',
    '00:10:24', '00:11:24', '00:12:24', '00:13:25', '00:14:24',
    '00:15:24', '00:16:24', '00:17:24', '00:18:24', '00:19:25',
    '00:20:24', '00:21:24', '00:22:24', '00:23:24', '00:24:24',
    '00:25:25', '00:26:24', '00:27:24', '00:28:24', '00:29:24',
    '00:30:25', '00:31:25', '00:32:24', '00:33:24', '00:34:24',
    '00:35:24', '00:36:25', '00:37:25', '00:38:24', '00:39:24',
    '00:40:24', '00:41:24', '00:42:25', '00:43:25', '00:44:24',
    '00:45:24', '00:46:24', '00:47:24', '00:48:25', '00:49:24',
    '00:50:24', '00:51:24', '00:52:24', '00:53:24', '00:54:25',
    '00:55:24', '00:56:24', '00:57:24', '00:58:24', '00:59:24',
    '01:00:25', '01:01:24', '01:02:24', '01:03:24', '01:04:24',
    '01:05:25', '01:06:25', '01:07:24', '01:08:24', '01:09:24',
    '01:10:24', '01:11:25', '01:12:25', '01:13:24', '01:14:24',
    '01:15:24', '01:16:24', '01:17:25', '01:18:25', '01:19:24',
    '01:20:24', '01:21:24', '01:22:24', '01:23:25', '01:24:24',
    '01:25:24', '01:26:24', '01:27:24', '01:28:24', '01:29:25',
    '01:30:24', '01:31:24', '01:32:24', '01:33:24', '01:34:24',
    '01:35:25', '01:36:24', '01:37:24', '01:38:24', '01:39:24',
    ... 1340 more items
  ],
  [
    '加热炉温度PV(℃)',    '加热炉温度SV(℃)',
    '加热炉过热温度PV(℃)',  '加热炉过热温度SV(℃)',
    '加热炉碳势PV(CP)',   '加热炉碳势SV(CP)',
    '甲醇流量PV(ml/h)',  '甲醇流量SV(ml/h)',
    '氨气流量PV(l/min)', '氨气流量SV(l/min)',
    '氮气流量PV(l/min)', '氮气流量SV(l/min)',
    '氧探头毫伏值PV(mv)',  '氧探头毫伏值SV(mv)'
  ],
  [
    '#40E0D0', '#8E2DE2',
    '#FF8C00', '#1f4037',
    '#FF0080', '#99f2c8',
    '#2193b0', '#b91d73',
    '#6dd5ed', '#f953c6',
    '#f7797d', '#86A8E7',
    '#c471ed', '#7F7FD5'
  ],
  [
    {
      type: 'value',
      min: '0',
      max: '2',
      position: 'left',
      offset: 0,
      axisLine: [Object],
      axisLabel: [Object]
    },
    {
      type: 'value',
      min: '0',
      max: '200',
      position: 'right',
      offset: 0,
      axisLine: [Object],
      axisLabel: [Object]
    },
    {
      type: 'value',
      min: '0',
      max: '1000',
      position: 'right',
      offset: 60,
      axisLine: [Object],
      axisLabel: [Object]
    }
  ],
  [
    { name: '加热炉温度PV(℃)', type: 'line', yAxisIndex: 2, data: [Array] },
    { name: '加热炉温度SV(℃)', type: 'line', yAxisIndex: 2, data: [Array] },
    {
      name: '加热炉过热温度PV(℃)',
      type: 'line',
      yAxisIndex: 2,
      data: [Array]
    },
    {
      name: '加热炉过热温度SV(℃)',
      type: 'line',
      yAxisIndex: 2,
      data: [Array]
    },
    { name: '加热炉碳势PV(CP)', type: 'line', yAxisIndex: 2, data: [Array] },
    { name: '加热炉碳势SV(CP)', type: 'line', yAxisIndex: 2, data: [Array] },
    {
      name: '甲醇流量PV(ml/h)',
      type: 'line',
      yAxisIndex: 2,
      data: [Array]
    },
    {
      name: '甲醇流量SV(ml/h)',
      type: 'line',
      yAxisIndex: 2,
      data: [Array]
    },
    {
      name: '氨气流量PV(l/min)',
      type: 'line',
      yAxisIndex: 0,
      data: [Array]
    },
    {
      name: '氨气流量SV(l/min)',
      type: 'line',
      yAxisIndex: 0,
      data: [Array]
    },
    {
      name: '氮气流量PV(l/min)',
      type: 'line',
      yAxisIndex: 0,
      data: [Array]
    },
    {
      name: '氮气流量SV(l/min)',
      type: 'line',
      yAxisIndex: 0,
      data: [Array]
    },
    {
      name: '氧探头毫伏值PV(mv)',
      type: 'line',
      yAxisIndex: 1,
      data: [Array]
    },
    {
      name: '氧探头毫伏值SV(mv)',
      type: 'line',
      yAxisIndex: 1,
      data: [Array]
    }
  ],
  [ 0, 1, 2 ]
]
TypeError: valueWindow[0].toFixed is not a function
    at setAxisModel (AxisProxy.js?cc39:494)
    at AxisProxy.reset (AxisProxy.js?cc39:306)
    at eval (dataZoomProcessor.js?2c17:72)
    at ExtendedClass.eval (DataZoomModel.js?3a56:455)
    at Array.forEach (<anonymous>)
    at each (util.js?6d8b:300)
    at ExtendedClass.eval (DataZoomModel.js?3a56:454)
    at eval (helper.js?50e5:80)
    at Array.forEach (<anonymous>)
    at Object.each (util.js?6d8b:300)

第一个代码块是我前段的代码,第二个代码块是我后端处理数据,输出显示的数据格式,第三个是前端一会报错的问题,弄半天也搞不懂到底是哪里错误了,麻烦大神帮我看一下,小弟是新手,好多问题找不出来,麻烦了,谢谢!!!

加载中
返回顶部
顶部