vue+echarts简单对接渲染

html

<el-card
          class="box-card"
          style="height:700px;margin:10px 0 10px 10px"
          v-loading="loadingIndex == 1"
        >
          <div slot="header">
            <span>产出统计</span>
            <span style="float:right;margin-top:-8px">
              <el-select v-model="listQuery.lineId" clearable @change="getList" placeholder="请选择产线">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select v-model="listQuery.shiftType" @change="getList" placeholder="请选择班次">
                <el-option
                  v-for="item in banciOptions"
                  :key="item.key"
                  :label="item.display_banciOption"
                  :value="item.display_banciOption"
                ></el-option>
              </el-select>
              <el-date-picker v-model="listQuery.dateNum" value-format="yyyyMMdd" type="date" @change="getList" placeholder="选择日期"></el-date-picker>
            </span>
          </div>
          <div id="chart1" style="height:620px"></div>
        </el-card>

getXYData(type) {
      if (type == "xData") {
        let xData = [];
        this.modelList.map(item => {
          for (let v in item) {
            // console.log(v, "v");
            if (v == "pName") {
              xData.push(item[v]);
            }
          }
        });
        return xData;
        console.log(xData, "x轴");
      } else if (type == "yData") {
        let yData = [];
        console.log(this.modelList, "--this.modelList");
        this.modelList.map(item => {
          for (let v in item) {
            // console.log(v, "w");
            if (v == "pValue") {
              yData.push(item[v]);
            }
          }
        });
        return yData;
      }
    },

getCharts() {
      var myChart1 = echarts.init(document.getElementById("chart1"));
      myChart1.setOption({
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          // formatter: "{a} <br/>{b}: {c} 个"
        },
        legend: {
          date: this.getXYData("xData"),
          show: true
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: this.getXYData("xData"),
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: "60%",
            data: this.getXYData("yData"),
            animationDelay: function(idx) {
              return idx * 10;
            }
          }
        ],
        animationEasing: "elasticOut",
        animationDelayUpdate: function(idx) {
          return idx * 5;
        }
      });
    }

效果图：

最后

以上就是阔达含羞草最近收集整理的关于vue+echarts简单对接渲染的全部内容，更多相关vue+echarts简单对接渲染内容请搜索靠谱客的其他文章。