首页 > 其他分享 >echarts饼图

echarts饼图

时间:2022-11-16 13:55:46浏览次数:56  
标签:10 true text 30 let data echarts

一、需求(图中的点去掉了)

 

 

外层的壳

createEchart1() {
      let chartDom = document.getElementById('echart1');
      myChart1 = echarts.init(chartDom);
      let option;

      //let sum1={name: '总数', number: dataNum};
      let color = [ "#fec101", "#b5b8cd ", "#ff6226","#f60000","#2cc78f","#2ca7f9"]
      option = {
        tooltip: {
          trigger: 'item',
        },
        animation: true,
        graphic: {
          type: "text",
          left: "center",
          top: "center",
          style: {
            fill: "#666666",
            width: 30,
            height: 30,
            fontSize: 20
          }
        },
        series: [
          {
            color:color,
            name: '服务数量',
            center: ['50%', '50%'],
            type: 'pie',
            minAngle: 10,//最小角度
            startAngle:265, //起始角度
            radius: ['45%', '60%'],
            avoidLabelOverlap: true,
            label:{
              normal:{
                fontSize: 18,
                //padding: [-30, -56, -10, -64],
                //padding: [-30, -76, -10, -80],  //19
                padding: [-30, -100, -10, -102],
                formatter: function (param) {
                  let text = param.data.name;
                  let value = param.data.value;

                  if (text.length <= 6) {
                    return text + ':' + value
                  } else {
                    return text.substring(0, 6) + '... :' +  (value > 999 ? (value+"").substring(0, 3) + '...' : value);
                  }
                },
                rich: {}
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 20, // 第一段线 长度
                length2: 92, // 第二段线 长度
                align: 'right',

              },
              emphasis: {
                show: true
              }
            },
            //data:serviceNumber,
          }
        ]
      }
      myChart1.setOption(option);
      window.addEventListener("resize", () => {
        myChart1.resize();
      });
    },

后端拿到数据后

myChart.setOption({
    graphic: {
      style: {
        text:     //dataNum是中间总数值
            String(dataNum).replace(
                /(\d)(?=(?:\d{6})+$)/g,
                "$1."
            ) +  //圆饼中心显示数据,这里是显示得总数
            "\n\n" + "总数",
        textAlign: "center",
      }
    },
    series: [{
      data: service,  //service是后台拿来的列表数据
    }]
  })

 

标签:10,true,text,30,let,data,echarts
From: https://www.cnblogs.com/YiGuZhiPeng/p/16895645.html

相关文章

  • vue+echarts绘制地图
    代码实现importchinaJsonfrom'echarts/map/json/china.json'exportdefault{mounted(){letmyChart=this.$echarts.init(document.getElementById("......
  • React+echarts (echarts-for-react) 画中国地图及省份切换
    有足够的地图数据,可以点击到街道,示例我只出到市级以umi为框架,版本是:"react":"^18.2.0","umi":"^4.0.29","echarts":"^5.4.0","echarts-for-rea......
  • ECharts基础概念
    简要介绍下ECharts中的基础概念:1、echarts实例:一个网页中可以创建多个echarts实例。每个echarts实例中可以创建多个图表和坐标系等。dom节点作为echarts的渲染容器,......
  • Python量化中用pyecharts画K线示例
    首先需要安装Python软件,以及pyecharts库相关教程链接:龙哥量化:文档目录(股票,期货,通达信、同花顺、文华等软件使用,Python量化交易,策略编写,学习文档,策略案例等等) 1"""......
  • 24. echarts 可以画哪些图表
    1.折线图2.柱状图3.饼图 4.地图5.雷达图 延申问题:画折线图和柱状图哪些配置可以改变样式 1.  color 设置每个数据的颜色2. grid网格设......
  • 在线echarts编辑器实现
    一、简介本文主要介绍如何开发一个同echarts官网里面在线echarts编辑工具,通过页面中的代码编辑器修改echarts的option属性来实时渲染echarts的展示效果。其中主要使用到了......
  • vue项目echarts图表自适应
     1、首先新建一个js文件,用来自定义一个全局指令:  2、然后在main.js中引入:  3、然后在自己使用的echarts上加入此指令! ......
  • Echarts Y轴网格线宽度调整
    yAxis:{show:false,type:"value",axisTick:{show:false,},show:true,axisLabel:{show:true,......
  • echarts横坐标显示不全
    echarts横坐标显示不全,效果不够好,让标签倾斜在xAxis下加入这段代码rotate就是倾斜量axisLabel:{rotate:50},......
  • echarts数据过小,log类型无法出现刻度线,并将y轴转为科学计数法
    方法仅供参考可以更改logBase的值,数值越小刻度线越多,但也会出现,刻度值重复的问题,看各自需要,其次是对数据进行处理,全部变成大于1的数,最后在echarts的图表显示设置中更改回......