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为后端返回的具体数据
     
  • 相关阅读:
    搭建zabbix监控
    liunx 下ctrl+D问题解决方案
    linux配置双线策略
    Discuz! X2.5读写分离
    慢谈MYSQL常用SQL语句
    CentOS 6.5系统安装配置LAMP(Apache+PHP5+MySQL)服务器环境
    自动抓包shell脚本
    zabbix实施部署原理架构
    ftp搭建教程
    DNS搭建教程
  • 原文地址:https://www.cnblogs.com/minghan/p/13037341.html
Copyright © 2011-2022 走看看