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);
    }

     

  • 相关阅读:
    正则表达式学习《一》
    vs2008添加模板方法
    MongoDB学习笔记《二》
    oracle存储过程错误分析
    最近一个星期的学习,比较杂乱
    C#中的委托和事件
    c++随机数字
    Delphi中的接口
    C# 泛型
    LoadString、LoadIcon和LoadCursor函数
  • 原文地址:https://www.cnblogs.com/whdaichengxu/p/12572553.html
Copyright © 2011-2022 走看看