zoukankan      html  css  js  c++  java
  • vue echar使用

    <el-col :span="8">
    <el-card class="dashBordCard charCard">
    <div slot="header" class="clearfix"><span>周工作分析</span></div>
    <div>
    <ve-line height="300px" :data="chartData1" :extend="charExtend"></ve-line>
    </div>
    </el-card>
    </el-col>
    </el-row>
    <el-row>
    <el-col :span="12">
    <el-card class="dashBordCard">
    <div slot="header" class="clearfix"><span>解读完成占比</span></div>
    <div>
    <ve-gauge height="280px" :data="chartData2" theme-name="macarons" :settings="chartSettings"></ve-gauge>
    </div>
    </el-card>
    </el-col>
    <el-col :span="12">
    <el-card class="dashBordCard">
    <div slot="header" class="clearfix"><span>健康扶贫占比</span></div>
    <div>
    <ve-gauge height="280px" :data="chartData3" theme-name="macarons" :settings="chartSettings"></ve-gauge>
    </div>
    </el-card>

    return {
    rateVal: 4.3,
    chartData: {
    columns: ['类型', '数量'],
    rows: [{
    '类型': '新增',
    '数量': 10
    },
    {
    '类型': '解读中',
    '数量': 5
    },
    {
    '类型': '已完成',
    '数量': 35
    }
    ]
    },
    chartData1: {
    columns: ['日期', '解读报告总数', '健康扶贫次数', '有偿解读次数'],
    rows: [{
    '日期': '周一',
    '解读报告总数': 5,
    '健康扶贫次数': 3,
    '有偿解读次数': 2
    },
    {
    '日期': '周二',
    '解读报告总数': 5,
    '健康扶贫次数': 3,
    '有偿解读次数': 2
    },
    {
    '日期': '周三',
    '解读报告总数': 7,
    '健康扶贫次数': 2,
    '有偿解读次数': 5
    },
    {
    '日期': '周四',
    '解读报告总数': 7,
    '健康扶贫次数': 3,
    '有偿解读次数': 4
    },
    {
    '日期': '周五',
    '解读报告总数': 6,
    '健康扶贫次数': 2,
    '有偿解读次数': 4
    }
    ]
    },
    chartData2: {
    columns: ['type', 'value'],
    rows: [{
    type: 'percent',
    value: 60
    }]
    },
    chartData3: {
    columns: ['type', 'value'],
    rows: [{
    type: 'percent',
    value: 34
    }]
    },
    chartSettings: {
    labelMap: {
    'percent': '占比'
    },
    dataName: {
    'percent': '%'
    }
    },
    charExtend: {
    legend: {
    icon: 'rectangle',

    right: '4%',
    textStyle: {
    fontSize: 12,
    color: '#ffffff'
    }
    },

    series: {
    radius: '50%',
    center: ['50%', '50%'],
    itemStyle: {
    normal: {
    color: function(params) {
    const colorList = ['#fddd', '#D7504B', '#69e575', '#F4E001', '#F0805A', '#26C0C0']
    return colorList[params.dataIndex]
    }
    }
    }
    }
    }
    }
    }

  • 相关阅读:
    selenium—用NoSuchElementException异常判断页面元素是否存在
    CentOS7 Nginx安装及配置反向代理
    CentOS7 安装 jexus-5.8.2-x64
    Windows Server 2008 R2远程协助选项 灰色
    IIS8.5 Error Code 0x8007007e HTTP 错误 500.19的解决方法
    记一次 windows server 2012R2 上安装 MSSQL2005 及网站发布
    记一次《系统集成实施的相关知识》培训自己感悟
    MySql 远程连接的条件
    CentOS7 下安装mysql历程
    VirtualBox虚拟机网络设置(四种方式)
  • 原文地址:https://www.cnblogs.com/xzhce/p/13083008.html
Copyright © 2011-2022 走看看