欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

如何用Echarts插件写出半环图

程序员文章站 2022-06-02 22:16:10
...

首先下载echarts3.0.js    地址 : http://echarts.baidu.com/download.html

思想:将json串中的value值相加计算总和,添加一个数组到json中,设置添加的数组的样式,颜色为白色,使其效果看不见的状态。


创建一个div的层,设置它高度,宽度,设置id选择器 'main' ,(名字自己随便起!).

设置echarts的初始化:

var myChart = echarts.init(document.getElementById('main'));
定义一个json串data


var data=[{value:335, name:'直接访问'},

                {value:310, name:'邮件营销'},

           ]

//这里才是关键整去掉下半部分的关键,

//计算data中value的总和

var a=0;
for(var i=0; i<data.length; i++)
{
  a+=data[i].value;

}


//添加新的元素到data中,并设置其颜色样式为白色

data.push({value:a, name:'__other', itemStyle:{normal:{color:'rgba(0,0,0,0)'}}});

console.log(data);


//下面就不说了,都是echarts的属性,看其api就好

option = {
 
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            startAngle:180,
            radius :  ['50%', '60%'],
            center: ['50%', '60%'],
            data:data,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]

};

效果图如下:



如何用Echarts插件写出半环图

                                                                                                                                                                                                                  技术交流关注小阿叁博客:yanmh007


相关标签: Echarts半环图