vue--跟echarts的结合

main文件写入：

// 引入echarts
import echarts from 'echarts'

window.echarts = require('echarts');

Vue.prototype.$echarts = echarts

html

 <div class="maina">
        <div id="main"></div>
        <div id="main02"></div>
      </div>

js

  //echarts数据
    load02() {
      let _this = this;

      this.$httpxu({
        method: "get",
        url: `/getScreenSumData.do`
      })
        .then(function(response) {
          console.log("老方法", response.data);

          _this.zzt(response.data.callData);
          _this.xxt(response.data.daycallData);
        })
        .catch(function(error) {});
    },

   // 柱状图
    zzt(data) {
      // if (this.myChart != null) {
      //   this.myChart.dispose();
      // }
      let _this = this;
      console.log(1);
      let echartdiv = document.getElementById("main");
      this.myChart = this.$echarts.init(echartdiv);
      console.log("柱状图", data);

      for (let i in data) {
        let a = data[i].dateval.slice(-2);
        let b = a + "号";
        let c = data[i].num;
        console.log("b", b);

        _this.dataday.push(b);
        _this.datadaynum.push(c);
      }

      let option = {
        title: {
          text: "一周呼叫数量统计"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            magicType: { show: false, type: ["bar"] }
          }
        },
        legend: {
          data: ["一周量"]
        },
        xAxis: [
          {
            type: "category",
            // data: ["15号", "16号", "17号", "18号", "19号", "20号", "21号"],
            data: _this.dataday,
            axisPointer: {
              type: "shadow"
            },
            axisLabel: {
              textStyle: {
                color: "#999"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "(次)",
            min: 0,
            max: 2500,
            interval: 500,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#999"
              }
            }
          }
        ],

        series: [
          {
            name: "呼叫量",
            type: "bar",
            // data: [2000, 1300, 2400, 1550, 1800, 1100, 1000],
            data: _this.datadaynum,
            barGap: "-100%",
            barCategoryGap: "80%",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#9ED06C" },
                { offset: 0.5, color: "#78C46F" },
                { offset: 1, color: "#4DB772" }
              ])
            }
          }
        ]
      };

      this.myChart.setOption(option);
    },
    // 线形图
    xxt(data) {
      let _this = this;
      let echartdiv = document.getElementById("main02");
      this.myChart = this.$echarts.init(echartdiv);

      for (let j in data) {
        let d = data[j].timeval;
        let e = d + "点";
        let f = data[j].num;
        _this.datahour.push(e);
        _this.datahournum.push(f);
      }

      let option = {
        title: {
          text: "1小时呼叫次数"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            magicType: { show: false, type: ["bar"] }
          }
        },
        legend: {
          data: ["一周量"]
        },
        xAxis: [
          {
            type: "category",
            // data: [
            //   "1点",
            //   "2点",
            //   "3点",
            //   "4点",
            //   "5点",
            //   "6点",
            //   "7点",
            //   "8点",
            //   "9点",
            //   "10点",
            //   "11点",
            //   "12点"
            // ],
            data: _this.datahour,
            axisPointer: {
              type: "shadow"
            },
            axisLabel: {
              textStyle: {
                color: "#999"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "(次)",
            min: 0,
            max: 1000,
            interval: 200,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#999"
              }
            }
          }
        ],

        series: [
          {
            // data: [200, 580, 300, 600, 650, 690, 650, 540, 490, 320, 800, 600],
            data: _this.datahournum,
            type: "line",
            smooth: true,
            lineStyle: {
              color: "#19EC76",
              width: 3
            }
          }
        ]
      };

      this.myChart.setOption(option);
    },