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]
    }
    }
    }
    }
    }
    }
    }

  • 相关阅读:
    Sql ----- sqlserver 中的if 判断 case... when
    Bootstrap ---------
    js:定时弹出图片(获取属性、setInterval函数)
    js:轮播图(获取属性、setInterval函数)
    js:表单校验(获取元素、事件)
    js:获取元素的值(id、标签、html5新增、特殊元素的获取)
    js:流程控制(分支结构、顺序结构、循环结构)
    拦截器原理(AOP、责任链模式、拦截器的创建、自定义拦截器)
    Action类
    Struts2配置文件(动态方法调用)
  • 原文地址:https://www.cnblogs.com/xzhce/p/13083008.html
Copyright © 2011-2022 走看看