zoukankan      html  css  js  c++  java
  • mpvue中echart渲染

    //html 
    <div v-for="(item,index) in data" :key="item">
          <div class="pay" >
            <div class="pay">
              <p></p>
              <p>{{item.name}}</p>
            </div>
          </div>
          <div class="names" >
            <mpvue-echarts :echarts="echarts" :onInit="ecPayInit" :canvasId="'pay'+index" />
          </div>
        </div>
    //js
    let echarts = require("../../../static/echarts.min");
    import mpvueEcharts from "mpvue-echarts";
    let paychart
     mounted() {
        //调用页面接口数据加载
      },
    methods: {
        PayInit: function(canvas, width, height) {
          var that = this;
          var index = canvas.canvasId.substring(3);
          paychart = echarts.init(canvas, null, {
             width,
            height: height
          });
          canvas.setChart(paychart);
          paychart.setOption({
            title: {},
            tooltip: {
              trigger: "axis"
            },
            legend: {
              data: ["1", "2", "3"],
              bottom: 10
            },
            grid: {
              top: "8%",
              left: "3%",
              right: "6%",
              bottom: "14%",
              height: "70%",
              containLabel: true
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                data: that.data[index].time 
              }
            ],
            yAxis: [
              {
                type: "value"
              }
            ],
            series: [
              {
                name: "1",
                type: "line",
                data: that.data[index].age,
                color: "#1296db" //蓝色
              },
              {
                name: "2",
                type: "line",
                data: that.data[index].sex, 
                color: "red" //红色
              },
              {
                name: "3",
                type: "line",
                data: that.data[index].name, 
                color: "green" //绿色
              }
            ]
          });
          return paychart;
        }
    }
     //that.data为后端返回的具体数据
     
  • 相关阅读:
    java面试总结之框架问题
    数据库设计三大范式
    js 一些技巧
    el 和 fmt 常用
    iframe自适应高度
    MySQL基础
    任意精度整数算法 (BigInteger) 和任意精度小数算法 (BigDecimal)
    hibernate
    Struts2
    Servlet、Cookie、Session
  • 原文地址:https://www.cnblogs.com/minghan/p/13037341.html
Copyright © 2011-2022 走看看