zoukankan      html  css  js  c++  java
  • 环形图中间带字 echart

    代码如下:

    echar部分代码

    pieYear() {
    var _this = this;
    let myChart = _this.$echarts.init(document.getElementById('yearCumulative'));

    let option = {
    title: {
    text: '达成率',
    left: 16,
    bottom:'-1%',
    textStyle:{
    fontFamily: '微软雅黑',
    fontWeight: 400,
    fontStyle: 'normal',
    fontSize: 11,
    color: '#999999'
    }
    },
    tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    color:['#f5f5f5','#00cc00'],
    series: [
    {
    name: '会员销占',
    type: 'pie',
    radius: ['50%', '82%'],//控制环的大小(内环和外环)
    center: ['45%', '41%'],//控制环形图的位置(居中的话就都50%)
    // label: {
    // position: 'center'
    // },
    data: [
    {//这里是图中灰色的部分
    value: 100-11,
    name: '直接访问',
    label: {
    show: false,
    position: 'center'
    },
    labelLine: {
    show: false
    },
    },
    {//这里是图中绿色的部分
    value: 11,
    name: '搜索引擎',
    avoidLabelOverlap: false,
    label: {
    show: true,
    position: 'center',
    fontFamily: '微软雅黑',
    fontWeight: 700,
    fontStyle: 'normal',
    fontSize: 14,
    color: '#00cc00',
    align:'center',
    formatter:function(parames){
    return parames.value+'%'
    }
    },
    labelLine: {
    show: false
    },
    }
    ],
    emphasis: {
    itemStyle: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
    }
    }
    ]
    };
    window.onresize = function () {//控制图数据变化时重新加载echart图
    myChart.resize();
    };
    // 为echarts对象加载数据
    myChart.setOption(option);
    }

     

  • 相关阅读:
    Hbase flusher源码解析(flush全代码流程解析)
    HBase行锁原理及实现
    Hbase源码之 compact源码(二)
    hbase源码之 compact源码(一)
    手动下载jar包导入mvn repo的方法
    JAVA Api 调用Hbase报错锦集
    Hbase Filter之PrefixFilter
    Hbase Filter之FilterList
    windows环境中hbase源码编译遇到的问题
    Hbase put写入源码分析
  • 原文地址:https://www.cnblogs.com/whdaichengxu/p/12572553.html
Copyright © 2011-2022 走看看