echarts动态刷新数据

在这次的项目中图表显示的部分比较多,这边给分享下用到的图表的数据刷新 饼图最后的效果 先看下 前端部分 <div div style="height: 40%; width: 17.5%; background-color: white;margin-top: 20px; float: left; border-left: black;" id="member">...
摘要由CSDN通过智能技术生成

在这次的项目中图表显示的部分比较多,这边给分享下用到的图表的数据刷新

 饼图最后的效果

先看下

前端部分

<div div style="height: 40%; width: 17.5%; background-color: white;
margin-top: 20px; float: left; border-left: black;" id="member">

</div>

这是右边图的 echarts的html  一定要定义好大小

接下来是 js部分 先定义一个模板 官网有 自己稍加修改 (比较懒没加注释)

// 绘制会员量比例图表
    var memberChart = echarts.init(document.getElementById('member'));
        memberChart.setOption({
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            itemHeight: 10,
            itemWidth: 10,
            orient: 'vertical',
            x: 'center',
            y: 'bottom',
            icon: 'roundRect',
            formatter: function(name) {
                var index = 0;
                var clientlabels = ['新增会员','老会员'];
                var clientcounts = [621,32032];
                clientlabels.forEach(function(value,i){
                    if(value == name){
                        index = i;
                    }
                });
                return name + "  " + clientcounts[index];
            }
        },
        series: [
            {
                name:'男女比例',
                type:'pie',
                radius: ['
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值