基于Echarts实现饼图效果

本文实例为大家分享了Echarts实现饼图效果的具体代码，供大家参考，具体内容如下

1 显示数值效果 series 下的label 饼图的文字显示
2 半径 圆环 radius
3 南丁格尔图 roseType: 'radius' 数值越大半径越大
4 选中效果 selectedMode

注意点:

1 不需要设置 x轴和y轴

2 饼图的所需要的数据 是个数组 数组里面放对象 对象则必须包含name和value，

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>
 
<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var pieData = [
      {
        name: '伙食费',
        value: 11231
      },
      {
        name: '房贷',
        value: 22673
      },
      {
        name: '交通费',
        value: 6123
      },
      {
        name: '车辆保养费',
        value: 8989
      },
      {
        name: '网购',
        value: 6700
      }
    ]
    var option = {
      legend:{
        show: true,
        icon:'circle',
      },
      color: [
      '#5470c6',
      '#91cc75',
      '#fac858',
      '#ee6666',
      '#73c0de',
      '#3ba272',
      '#fc8452',
      '#9a60b4',
      '#ea7ccc',
    ],
      series: [
        {
          type: 'pie',
          data: pieData,
          label: { 
            show: true, 
            // formatter: 'test' 
            formatter: function(arg){
              console.log(arg)
              return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
            }
          },
          
          // radius: 20, // 饼图的半径
          // radius: '20%', 
          // radius: ['50%', '75%'], // 第0个元素代表的是內圆的半径 第1个元素外圆的半径
          radius: [60, 140],
          // roseType: 'radius', 
          // selectedMode: 'single', // 选中的效果,能够将选中的区域偏离圆点一小段距离(单个)
          selectedMode: 'multiple', // 多个可以选中
          // selectedOffset: 0
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>
 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue使用ECharts实现折线图和饼图

    vue使用ECharts实现折线图和饼图

    在开发后台管理项目时,需要统计后台用户数据,以折线图和饼图的形式显示,这边采用apache-echarts来实现需求. 1.安装echarts和引入 npm install echarts --save import * as echarts from 'echarts'; 2.使用echarts实现pie图 <template> <div id="chartPie" class="pie-wrap"></div> </te

  • Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解

    Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解

    python可以在处理各种数据时,如果可以将这些数据,利用图表将其可视化,这样在分析处理起来,将更加直观.清晰,以下是 利用 PyEcharts 常用图表的可视化Demo, 开发环境 python3 柱状图 基本柱状图 from pyecharts import Bar # 基本柱状图 bar = Bar("基本柱状图", "副标题") bar.use_theme('dark') # 暗黑色主题 bar.add('真实成本', # label ["1月&q

  • echarts饼图扇区添加点击事件的实例

    在echarts最后面添加上这段代码就可以了 function eConsole(param) { //alert(option.series[0].data.length); //alert(option.series[0].data[i]); //param.dataIndex 获取当前点击索引, //alert(param.dataIndex); clickFunc(param.dataIndex);//执行点击效果 } myChart.on("click", eConsole)

  • 微信小程序遍历Echarts图表实现多个饼图

    如何在微信小程序中使用Echarts可以看我的另一个教程:点击查看 首先看一个简单的例子 1.wxml文件 <view style='width:100%;height:200rpx'> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> 2.js文件 import *

  • JavaScript使用百度ECharts插件绘制饼图操作示例

    JavaScript使用百度ECharts插件绘制饼图操作示例

    本文实例讲述了JavaScript使用百度ECharts插件绘制饼图操作.分享给大家供大家参考,具体如下: 百度ECharts是一款由百度前端团队开发与维护的,基于HTML5的开源JavaScript图表库.E是Enterprise的简称,意思是商业级数据图表. 本文简述使用ECharts绘制饼图(Pie Chart)的过程,下图为使用ECharts绘制的饼图实例. 首先需要在页面中新建<script>标签,引入符合AMD规范的加载器,如esl.js 关于AMD规范的详细介绍,可以参考阮一峰的

  • 利用Python pyecharts绘制饼图

    利用Python pyecharts绘制饼图

    目录 一.pyecharts绘制饼图语法简介 二.绘制普通饼图 三.绘制圆环图 四.绘制饼图-玫瑰图 一.pyecharts绘制饼图语法简介 饼图主要用于表现不同类目的数据在总和中的占比.每个的弧度不是数据量的占比 pie.add()方法的用法 add(name, attr, value, radius=None, center=None, rosetype=None, **kwargs) name->str 图例名称 attr->list 属性名称 value->list 属性所对应的

  • echarts饼图各个板块之间的空隙如何实现

    echarts饼图各个板块之间的空隙如何实现

    本文主要介绍echarts饼图各个板块之间间的空隙怎么实现 关键代码 "itemStyle": { "normal": { "borderWidth": 1, // 间距的宽度 "borderColor": '#fff', //背景色 } }, 代码层级 效果图 到此这篇关于echarts饼图各个板块之间的空隙如何实现的文章就介绍到这了,更多相关echarts饼图板块的空隙内容请搜索我们以前的文章或继续浏览下面的相关文章希望大

  • ajax动态赋值echarts的实例(饼图和柱形图)

    本文以柱形图和饼形图ajax动态赋值为例 一.饼形图赋值步骤 (1)jsp页面 <!-- 引入echarts官方js --> <script src="js/echarts.js"></script> <body> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM 饼形图 --> <div id="first" style="width: 600px;height:400px

  • 解决echarts中饼图标签重叠的问题

    饼图中的series有个avoidLabelOverlap属性, avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠. 当avoidLabelOverlap设置为false时会出现以下情况 改为true之后就不会重叠 代码如下 var option = { tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%

  • django echarts饼图数据动态加载的实例

    如下所示: 后台关键代码: data = {} #keys与values分别为该数据的键数组,值的数组.这里循环为字典添加对应键值 for k, v in zip(keys, values): data.update({k: v, },) #最后将数据打包成json格式以字典的方式传送到前端 return render(request, 'index.html', {'data': json.dumps(data)}) 网页(js中)取值关键代码: 1.取值: var kv = new Arra

随机推荐