精华内容
下载资源
问答
  • 3d效果的,动态的,鼠标指到上边就可以分离出来的,flash的,饼形图。很不错的
  • 像蚂蚁一样工作,像蝴蝶一样生活。喜欢这样的态度。全力以赴的努力工作,全力以赴的享受生活。饼形图拼图动画ppt模板。
  • echart2.0的开发可以参考开发文档https://echarts.baidu.com/echarts2/doc/example.html ... 本文使用的是echart4.X,因此下文介绍方法主要适合echart4.X的写法。 参考文档可知: option = { tit...

    echart2.0的开发可以参考开发文档https://echarts.baidu.com/echarts2/doc/example.html

    echart4.X的开发可以参考开发文档https://echarts.baidu.com/examples/

    本文使用的是echart4.X,因此下文介绍方法主要适合echart4.X的写法。

    参考文档可知:

    option = {
        title : {
            text: '同名数量统计',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: data.legendData,

            selected: data.selected
        },
        series : [
            {
                name: '姓名',
                type: 'pie',
                radius : '55%',
                center: ['40%', '50%'],
                data: data.seriesData,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    echart4.X非常方便,只需要在legend中添加selected:data.selected(想要显示的数据即可)。

    示例中有一句话selected[name] = i < 6。主要理解好这句话就可以,根据优先级,先做逻辑判断,如果i<6,那么selected[name] = true,否则selected[name] = false。

    还有一个需要注意的是,var selected = {};注意区分var selected = [];这样的写法。

    示例代码如下

    function genData(count) {
        var nameList = [
            '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
        ];
        var legendData = [];
        var seriesData = [];
        var selected = {};
        for (var i = 0; i < 50; i++) {
            name = Math.random() > 0.65
                ? makeWord(4, 1) + '·' + makeWord(3, 0)
                : makeWord(2, 1);
            legendData.push(name);
            seriesData.push({
                name: name,
                value: Math.round(Math.random() * 100000)
            });
            selected[name] = i < 6;
        }

        return {
            legendData: legendData,
            seriesData: seriesData,
            selected: selected
        };

        function makeWord(max, min) {
            var nameLen = Math.ceil(Math.random() * max + min);
            var name = [];
            for (var i = 0; i < nameLen; i++) {
                name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
            }
            return name.join('');
        }
    }

    展开全文
  • 利用QT绘制饼形图,并增加了鼠标定位功能
  • 本文以柱形图和饼形图ajax动态赋值为例 一、饼形图赋值步骤 (1)jsp页面 <!-- 引入echarts官方js --> [removed][removed] <body> <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM 饼形图 --> ...
  • 从数据库中读取每个月份的产品销售情况,进而支撑条形图于饼形图,更方便的观看产品销售情况
  • js import F2 from "../../../../components/f2-canvas/lib/f2" let pie = null; function setOption(pie,a,b,c,d,e) { // F2实现回调的方法,方法名用来最后赋值绑定 var map = { '待检查': (b/a)*100+'%', ...

    js

    import F2 from "../../../../components/f2-canvas/lib/f2"
    let pie = null;
    function setOption(pie,a,b,c,d,e) { // F2实现回调的方法,方法名用来最后赋值绑定
      var map = {
        '待检查': ((b/a)*100).toFixed(2)+'%',
        '处理中':((c/a)*100).toFixed(2)+'%',
        '流转中':((d/a)*100).toFixed(2)+'%',
        '已结束': ((e/a)*100).toFixed(2)+'%',
      };
      let data = [{
          name: '待检查',
          percent: b/a,
          a: '1'
        },
        {
          name: '处理中',
          percent: c/a,
          a: '1'
        },
        {
          name: '流转中',
          percent: d/a,
          a: '1'
        },
        {
          name: '已结束',
          percent: e/a,
          a: '1'
        }
      ];
      pie.source(data, {
        percent: {
          formatter: function formatter(val) {
            return val * 100 + '%';
          }
        }
      }); // data就是传入的数据。给到F2
      // 图例位置
      pie.legend({
        position: 'right',
        itemFormatter: function itemFormatter(val) {
          return val + '  ' + map[val];
        }
      });
      pie.tooltip(false);
      pie.coord('polar', {
        transposed: true,
        radius: 0.85
      });
      pie.axis(false);
      pie.interval().position('a*percent').color('name', ['#2d8cf0', '#19be6b','#ff9900','#bbbec4']).adjust('stack').style({
        lineWidth: 1,
        stroke: '#fff',
        lineJoin: 'round',
        lineCap: 'round'
      }).animate({
        appear: {
          duration: 1200,
          easing: 'bounceOut'
        }
      });
      pie.render(); // 执行
    };
    const app = getApp();
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        optspie: {lazyLoad: true},
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.getPlanList();
      },
      // 获取数据
      getPlanList() {
        wx.showLoading({
          title: '数据加载中',
        });
        var options = {
          url: '#',
          data:'#'
        };
        app.call.request(options, this, this.sucesssPlanHandelList, this.failFun);
      },
      sucesssPlanHandelList(res){
        wx.hideLoading();
        console.log('planHandel',res);
        if(res){
          this.setData({
            allTaskNum:res.allTaskNum,//任务总数
            completedRate:res.completedRate,//完成率
            oneTimePassRate:res.oneTimePassRate,//合格率
            uncheckTaskNum:res.uncheckTaskNum,//待检查
            processingTaskNum:res.processingTaskNum,//处理中
            circulatingTaskNum:res.circulatingTaskNum,//流转中
            endedTaskNum:res.endedTaskNum,//已结束
            planHandelContent:res,//计划处理情况
          });
          this.firstComponent = this.selectComponent('#pie');
          this.getOptions(res.allTaskNum,res.uncheckTaskNum,res.processingTaskNum,res.circulatingTaskNum,res.endedTaskNum);
        }
      },
      failFun(err){
        wx.hideLoading();
        app.toast('数据获取失败');
        console.log('fail', err);
      },
      // 初始化图表,给图表添上数据
      getOptions(a,b,c,d,e){
        this.firstComponent.init((canvas, width, height) => {      
          const chart = new F2.Chart({
            el: canvas,
            width,
            height,
            animate: false
          });
          setOption(chart,a,b,c,d,e);
        })
      },
    })
    

    把图表转化为图片:f2-canvas.js

    // f2-canvas.js
    import Renderer from './lib/renderer';
    import F2 from './lib/f2';
    
    // 适配小程序的事件机制
    F2.Util.addEventListener = function (source, type, listener) {
      source.addListener(type, listener);
    };
    
    F2.Util.removeEventListener = function (source, type, listener) {
      source.removeListener(type, listener);
    };
    
    F2.Util.createEvent = function (event, chart) {
      const type = event.type;
      let x = 0;
      let y = 0;
      const touches = event.touches;
      if (touches && touches.length > 0) {
        x = touches[0].x;
        y = touches[0].y;
      }
    
      return {
        type,
        chart,
        x,
        y
      };
    };
    
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        pieSelect: {
          type: String,
          value: 'f2-canvas'
        },
        canvasId: {
          type: String,
          value: 'canvas-id'
        },
        opts: {
          type: Object
        }
      },
    
      /**
       * 组件的初始数据
       */
      data: {
    
      },
    
      ready: function () {
        if (!this.data.opts) {
          console.warn('组件需绑定 opts 变量,例:<ff-canvas id="mychart-dom-bar" ' +
            'canvas-id="mychart-bar" opts="{{ opts }}"></ff-canvas>');
          return;
        }
    
        if (!this.data.opts.lazyLoad) {
          this.init();
        }
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        init: function (callback) {
          const version = wx.version.version.split('.').map(n => parseInt(n, 10));
          const isValid = version[0] > 1 || (version[0] === 1 && version[1] > 9) ||
            (version[0] === 1 && version[1] === 9 && version[2] >= 91);
          if (!isValid) {
            console.error('微信基础库版本过低,需大于等于 1.9.91。');
            return;
          }
    
          const ctx = wx.createCanvasContext(this.data.canvasId, this); // 获取小程序上下文
          const canvas = new Renderer(ctx);
          this.canvas = canvas;
          const query = wx.createSelectorQuery().in(this);
          query.select('.f2-canvas').boundingClientRect(res => {
            if (typeof callback === 'function') {
              this.chart = callback(canvas, res.width, res.height);
            } else if (this.data.opts && this.data.opts.onInit) {
              this.chart = this.data.opts.onInit(canvas, res.width, res.height);
            }
          }).exec();
          var that = this;
          setTimeout(function () {
            wx.canvasToTempFilePath({
              canvasId: that.data.canvasId,
              success(res) {
                console.log('res', res.tempFilePath);
                that.setData({
                  imgUrl: res.tempFilePath,
                })
              },
              fail(err) {
                console.log('err', err);
              }
            }, that)
          }, 1500);
        },
        touchStart(e) {
          if (this.canvas) {
            this.canvas.emitEvent('touchstart', [e]);
          }
        },
        touchMove(e) {
          if (this.canvas) {
            this.canvas.emitEvent('touchmove', [e]);
          }
        },
        touchEnd(e) {
          if (this.canvas) {
            this.canvas.emitEvent('touchend', [e]);
          }
        },
        press(e) {
          if (this.canvas) {
            this.canvas.emitEvent('press', [e]);
          }
        },
      }
    })
    

    f2-canvas.wxml

    <image wx:if="{{imgUrl}}" src = "{{imgUrl}}" style = "width: 100%;height: 100%;"></image>
    <canvas
    wx:else
    class="f2-canvas"
    canvas-id="{{ canvasId }}"
    bindinit="init"
    bindtouchstart="touchStart"
    bindtouchmove="touchMove"
    bindtouchend="touchEnd"
    bindlongtap="press"
    >
    </canvas>
    
    

    最后放一张图片

    imgimg

    展开全文
  • true, url: 'http://www.hcharts.cn' }, ['Safari', 8.5], ['Opera', 6.2], ['其他', 0.7] ] }] }, function(c) { // 图表初始化完毕后的会掉函数 // 环形圆心 var centerY = c.series[0].center[1], titleHeight...

    var chart = Highcharts.chart('container', {

    chart: {

    spacing : [40, 0 , 40, 0]

    },

    title: {

    floating:true,

    text: '圆心显示的标题'

    },

    tooltip: {

    pointFormat: '{series.name}: {point.percentage:.1f}%'

    },

    plotOptions: {

    pie: {

    allowPointSelect: true,

    cursor: 'pointer',

    dataLabels: {

    enabled: true,

    format: '{point.name}: {point.percentage:.1f} %',

    style: {

    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'

    }

    },

    point: {

    events: {

    mouseOver: function(e) { // 鼠标滑过时动态更新标题

    // 标题更新函数,API 地址:https://api.hcharts.cn/highcharts#Chart.setTitle

    chart.setTitle({

    text: e.target.name+ '\t'+ e.target.y + ' %'

    });

    }

    //,

    // click: function(e) { // 同样的可以在点击事件里处理

    // chart.setTitle({

    // text: e.point.name+ '\t'+ e.point.y + ' %'

    // });

    // }

    }

    },

    }

    },

    series: [{

    type: 'pie',

    innerSize: '80%',

    name: '市场份额',

    data: [

    {name:'Firefox', y: 45.0, url : 'http://bbs.hcharts.cn'},

    ['IE', 26.8],

    {

    name: 'Chrome',

    y: 12.8,

    sliced: true,

    selected: true,

    url: 'http://www.hcharts.cn'

    },

    ['Safari', 8.5],

    ['Opera', 6.2],

    ['其他', 0.7]

    ]

    }]

    }, function(c) { // 图表初始化完毕后的会掉函数

    // 环形图圆心

    var centerY = c.series[0].center[1],

    titleHeight = parseInt(c.title.styles.fontSize);

    // 动态设置标题位置

    c.setTitle({

    y:centerY + titleHeight/2

    });

    });

    展开全文
  • //参数依次为开始角度,结束角度,环颜色,圆大径,圆内径,圆圆心坐标 function drawDonuts(startAngle,endAngle,color,Mr,Sr,x,y){ ctx.beginPath(); ctx.moveTo(x,y); ctx.strokeStyle="#fff"; ...

    代码清单:

    1、index.js文件:

    var c=document.getElementById("canvas6");
    	var ctx=c.getContext("2d");
        //获取画布中心为圆心
    	var x=c.width/2;
    	var y=c.height/2;
    	//初始速度为2°
    	var speed=2/360*2*Math.PI;
    	var setArr=[
    		{
    			scale:0.2*2*Math.PI,
    			color:"yellow"
    		},
    		{
    			scale:0.35*2*Math.PI,
    			color:"blue"
    		},
    		{
    			scale:0.25*2*Math.PI,
    			color:"red"
    		},
    		{
    			scale:0.15*2*Math.PI,
    			color:"orange"
    		},
    		{
    			scale:0.05*2*Math.PI,
    			color:"purple"
    		}
    	];
    	//参数依次为开始角度,结束角度,饼环颜色,饼圆大径,饼圆内径,饼圆圆心坐标
    	function drawDonuts(startAngle,endAngle,color,Mr,Sr,x,y){
    		ctx.beginPath();
    		ctx.moveTo(x,y);
    		ctx.strokeStyle="#fff";
    		ctx.fillStyle=color;
    		ctx.lineTo(x+Mr*Math.cos(startAngle),y+Mr*Math.sin(startAngle));
    		ctx.arc(x,y,Mr,startAngle,endAngle);
    		ctx.lineTo(x,y);
    		ctx.fill();
    		
    		ctx.beginPath();
    		ctx.moveTo(x,y);
    		ctx.strokeStyle="#fff";
    		ctx.fillStyle="#fff";
    		ctx.lineTo(x+Sr*Math.cos(startAngle),y+Sr*Math.sin(startAngle));
    		ctx.arc(x,y,Sr,startAngle,endAngle);
    		ctx.lineTo(x,y);
    		ctx.stroke();
    		ctx.fill();
    	}
    	//静态饼图
    	// var startAngle=0;
    	// var endAngle=0;
    	// for(var i=0;i<setArr.length;i++){
    	// 	endAngle+=setArr[i].scale;
    	// 	drawDonuts(startAngle,endAngle,setArr[i].color,200,100,x,y);
    	// 	startAngle=endAngle;
    	// }
    
    	//动态饼图
    	var startAngle=0;
    	var endAngle=0;
    	var dataArr=[0];
    	var sum=0;
    	for(var i=0;i<setArr.length;i++){
    		sum+=setArr[i].scale;
    		dataArr.push(sum);
    	}
    	timer1=setInterval(function(){
    		endAngle+=speed;
    		if(endAngle>=2*Math.PI){
    			clearInterval(timer1);
    		}
    		for(var i=1;i<dataArr.length;i++){
    			if(endAngle>=dataArr[i-1] && endAngle<=dataArr[i]){
    				drawDonuts(startAngle,endAngle,setArr[i-1].color,200,100,x,y);
    			}
    		}
    		startAngle=endAngle-0.01;//消除小数影响
    	},16);

    2、index.html 文件:

    <div class="box">
    	<canvas id="canvas6" width="1600" height="600"></canvas>
    </div>

    3、index.css文件:

    #canvas6{
    	border:1px solid blue;
    	width: 100%;
    }

    4、代码中牵涉数学运算数据理解图:

    5、最终显示结果为:

     

    展开全文
  • 以下是普通api方法,返回是list public HttpResponseMessage GetBatchRecordList(string ... { Common.PageResult<BatchRecordInfoModel> pageResult = new PageResult<BatchRecordInfoModel>(); try {
  • word文档内容动态编辑这篇文章做进一步扩展 新增图表依赖: <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.10<...
  • HighChart 3D饼状 动态加载数据

    千次阅读 2015-04-07 18:11:42
    '服务器故障频率分布' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, credits: { enabled: false // 清除logo }, plotOptions: { pie: { allowPointSelect: ...
  • highcharts实现饼形图和柱状图 1、后端 具体代码就不展示了,就一个查询所有的方法,注意实体类字段名最好取name、y,前端获取数据能直接对应上 2、前端 一,highchars的导入与搭建 npm install highcharts 二,...
  • MFC如何画饼图

    2017-06-20 20:59:15
    MFC饼图类,不支持VC6,如需要修改,请找作者。
  • echarts饼状随机颜色

    2021-06-15 15:39:30
    第一种:随机颜色 color: function() { return 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ].join(',') + ')';...
  • iOS图形绘制 UIBezierPath 绘制折线图、柱状图以及饼形图 三种图表都是属于动态绘制
  • android分区域点击的圆饼(区域个数比例根据数据源动态改变) android分区域点击的圆饼(区域个数比例根据数据源动态改变) android分区域点击的圆饼(区域个数比例根据数据源动态改变)
  • as3.0 饼形图 调用xml

    2010-06-27 20:51:12
    as3.0 flash 做的饼形图动态调用xml,形成动态饼状图。
  • 本文主要讲述了 Flutter 如何实现自定义 Widget 以及自定义饼形图实战,如有不当之处敬请指正。 阅读本文大约需要6分钟。 一、背景 Flutter 官方目前已经提供很多的小部件,可以直接使用,有 Material 风格的小...
  • /***百度数据统计图表echart的PHP实现类**原作者:*@author:chenliujin*@since2013-12-12**修改者:*@author:iamlintao*@since:2014-06-25*@version:*@revision:**修改后支持柱形图(bar)、线形图(line)、饼形图(pie)...
  • echarts中颜色的随机展示方法

    万次阅读 2018-03-09 17:26:49
    echarts中不管是柱状、折线还是饼图等要实现不同的数据显示不同的颜色有两种方法,其实这两种方法还是我在echarts的实例代码中找到的,现在贴出来以防以后备用。第一种:给定几种颜色让数据根据颜色组里不同的...
  • text: '各专业招聘信息分析', subtext: '就业信息管理中心库', x: 'center' }, tooltip: { trigger: 'item', formatter: '{a} {b} : {c} ({d}%)' }, legend: { orient: 'vertical...
  • 程序4-3 //假设利用文件count.txt保存计数值 &lt;? /*检查count.txt文件是否存在,如果不存在则新建一个文件,并写入"000001",即假设最大计数为6位数*/ if(!file_exists("...
  • 1.根据json格式获取到数据,easyui样式列表显示 2.饼图根据表格数据动态生成 3.JavaScript中使用echarts插件
  •  *  修改后支持 柱形图(bar)、线形图(line)、饼形图(pie)  *   * @example:  *   *  HTML代码部分:  *   src="js/esl.js">  *  <!-- 线形图、柱形图显示 -->  id="chartArea" ...
  • 上面介绍了柱状图,只有js代码后台的传递等我们介绍完饼形图的使用过程在做介绍 有了柱状图的介绍,在使用饼形图,其实很容易了,上代码 1.首先加载网页时,需要用到的加载项和事件。 //打开网页加载 $...
  • 本章节我们需要通过饼形图直观的展示出会员预约的各个套餐占比情况。展示效果如下图: 2.完善页面 套餐预约占比饼形图对应的页面为health_backend工程下面的/pages/report_setmeal.html。 <!DOCTYPE html> <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,784
精华内容 1,113
关键字:

饼形图动态的