1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

echarts 之(3)环形图 属性

作者:用户 来源:互联网 时间:2018-06-01 15:10:06

echarts 之(3)环形图 属性 - 摘要: 本文讲的是echarts 之(3)环形图 属性, echarts 之(3)环形图 属性 <script type="text/javascript"> var imgUrl = null; var fileLocation ='${Newe

echarts 之(3)环形图 属性

<script type="text/javascript">
    var imgUrl = null;
    var fileLocation ='${NewechartsPath}/echarts';
        require.config({
              paths:{ 
                 echarts: fileLocation,
                }
        });
    // 作为入口
    require(
        [
            'echarts',
            'echarts/chart/pie'//引入需要的jar包
        ],  
        myPieChart    
    );
    var echarts;
    var pieChart;
function myPieChart(ec) {
    //柱状图
    echarts = ec;
    var a =document.getElementById('pie');
    var pieChart = ec.init(a);      
    var pieChartOtion = getPieChartOption(${a},${b},${c},${d},${e},${aSla},${fSla},${sSla},${graphStyleA},${graphStyleB},${graphStyleC},${graphStyleD},${graphStyleE},"${title2}","${title1}"); 
    pieChart.setOption(pieChartOtion);
    imgUrl = encodeURIComponent(pieChart.getDataURL());
}   
    //获得bar图的选项和数据
    function getPieChartOption(a,b,c,d,e,aSla,fSla,sSla,graphStyleA,graphStyleB,graphStyleC,graphStyleD,graphStyleE,MainTitle,newbiaoti){//从后台传过来的参数
        var labelTop = {//上层样式
                normal : {
                    color :'#0099cc',
                    label : {
                        show : true,
                        position : 'center',
                        formatter : '{b}',
                        textStyle: {
                            baseline : 'bottom'
                        }
                    },
                    labelLine : {
                        show : false
                    }
                }
            };
          var labelFromatter = {//环内样式
            normal : {//默认样式
                label : {//标签
                    formatter : function (a,b,c){return 100 - c + '%'},
                   // labelLine.length:30,  //线长,从外边缘起计算,可为负值
                    textStyle: {//标签文本样式
                        color:'black',
                        align :'center',
                        baseline : 'top'//垂直对其方式
                    }
                }
            },
          };
        var labelBottom = {//底层样式
            normal : {
                color: '#99ccff',
                label : {
                    show : true,
                    position : 'center'
                },
                labelLine : {
                    show : false
                }
            },
            emphasis: {//悬浮式样式
                color: 'rgba( 0,0,0,0)'
            }
        };
        var radius = [42,65];// 半径[内半径,外半径]

    var pieChartOption = {
        title : {
                text: MainTitle,
                subtext: newbiaoti,     
                    x:'center',
                    //正标题样式
                    textStyle: {
                          fontSize:24,
                          fontFamily:'Arial',
                          fontWeight:100,
                          //color:'#1a4eb0',
                    },
                    //副标题样式
                    subtextStyle: {
                          fontSize:18,
                          fontFamily:'Arial',
                          color:"#1a4eb0",  
                        },
        },
        animation:false,
        tooltip : {         // 提示框. Can be overwrited by series or data
            trigger: 'axis',
            //show: true,   //default true
            showDelay: 0,
            hideDelay: 50,
            transitionDuration:0,
            borderRadius : 8,
            borderWidth: 2,
            padding: 10,    // [5, 10, 15, 20]
        },
        series : [
            {
                type : 'pie',
                center : ['33.5%', '40%'],//圆心坐标(div中的%比例)
                radius : radius,//半径
                x: '0%', // for funnel
                itemStyle : graphStyleA=='labelTop'?labelTop:labelFromatter,//graphStyleA,//图形样式 // 当查到的数据不存在(并非为0),此属性隐藏
                data : [
                    {name:'当日完成', value:a,itemStyle : labelTop},
                    {name:'', value:100-(a*1), itemStyle : labelBottom}
                ]
            },
            {
                type : 'pie',
                center : ['68.5%', '40%'],
                radius : radius,
                x:'20%', // for funnel
                itemStyle : graphStyleB=='labelTop'?labelTop:labelFromatter,//graphStyleB,// 当查到的数据不存在(并非为0),此属性隐藏
                tooltip : {             // Series config.
                    trigger: 'item',
                    position:['810','120'],
                    backgroundColor: 'rgba(197,196,222,0.6)',
                    borderWidth :0,
                    textStyle:{
                        color:'black'
                    },
                    formatter: '全流程服务时长2小时内达标'
                },
                data : [
                    {name:'全流程', value:b,itemStyle : labelTop},
                    {name:'', value:100-(b*1), itemStyle : labelBottom}
                ]
            },
            {
                type : 'pie',
                center : ['15%', '78%'],
                radius : radius,
                x:'40%', // for funnel
                itemStyle : graphStyleC=='labelTop'?labelTop:labelFromatter,//graphStyleC,// 当查到的数据不存在(并非为0),此属性隐藏
                tooltip : {             // Series config.
                    trigger: 'item',
                    position:['350','260'],
                    backgroundColor: 'rgba(197,196,222,0.6)',
                    borderWidth :0,
                    textStyle:{
                        color:'black'
                    },
                    formatter: '评估SLA标准'+aSla+'分钟'
                },
                data : [
                    {name:'评估', value:c,itemStyle : labelTop},
                    {name:'', value:100-(c*1), itemStyle : labelBottom}
                ]
            },
            {
                type : 'pie',
                center : ['50%', '78%'],
                radius : radius,
                x:'60%', // for funnel
                itemStyle : graphStyleD=='labelTop'?labelTop:labelFromatter,//graphStyleD,// 当查到的数据不存在(并非为0),此属性隐藏
                tooltip : {             // Series config.
                    trigger: 'item',
                    position:['630','260'],
                    backgroundColor: 'rgba(197,196,222,0.6)',
                    borderWidth :0,
                    textStyle:{
                        color:'black'
                    },
                    formatter: '面审SLA标准'+fSla+'分钟'
                },
                data : [
                    {name:'面审', value:d,itemStyle : labelTop},
                    {name:'', value:100-(d*1), itemStyle : labelBottom}
                ]
            },
            {
                type : 'pie',
                center : ['85%', '78%'],
                radius : radius,
                x:'80%', // for funnel
                itemStyle : graphStyleE=='labelTop'?labelTop:labelFromatter,//graphStyleE,  // 当查到的数据不存在(并非为0),此属性隐藏
                tooltip : {             // 鼠标--悬浮
                    trigger: 'item',
                    position:['680','260'],
                    backgroundColor: 'rgba(197,196,222,0.6)',
                    borderWidth :0,
                    textStyle:{
                        color:'black'
                    },
                    formatter: '合同SLA标准'+sSla+'分钟'
                },
                data : [
                    {name:'合同', value:e,itemStyle : labelTop},
                    {name:'', value:100-(e*1), itemStyle : labelBottom}
                      ]
                }
        ]

};
return pieChartOption;
}
function myPieChart2(a,b,c,d,e,aSla,fSla,sSla,graphStyleA,graphStyleB,graphStyleC,graphStyleD,graphStyleE,MainTitle,newbiaoti) {
    a = a.replaceAll('"','');
    b = b.replaceAll('"','');
    c = c.replaceAll('"','');
    d = d.replaceAll('"','');
    e = e.replaceAll('"','');
    graphStyleA = graphStyleA.replaceAll('"','');
    graphStyleB = graphStyleB.replaceAll('"','');
    graphStyleC = graphStyleC.replaceAll('"','');
    graphStyleD = graphStyleD.replaceAll('"','');
    graphStyleE = graphStyleE.replaceAll('"','');
    //柱状图
    var asd =document.getElementById('pie');
    var pieChart = echarts.init(asd);       
    var pieChartOtion = getPieChartOption(a,b,c,d,e,aSla,fSla,sSla,graphStyleA,graphStyleB,graphStyleC,graphStyleD,graphStyleE,MainTitle,newbiaoti);    
    pieChart.setOption(pieChartOtion);
    imgUrl = encodeURIComponent(pieChart.getDataURL());
}
String.prototype.replaceAll = function(s1,s2){
    return this.replace(new RegExp(s1,"gm"),s2);
};
</script>   

一下为效果图:
echarts 之(3)环形图 属性

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索,以便于您获取更多的相关知识。

用Echart插件里,环形里内圈里的颜色能填充吗

问题描述 用Echart插件里,环形里内圈里的颜色能填充吗

java+echarts开发流程详细说明详解

echarts官方文档: http://echarts.baidu.com/doc/doc.html#简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等)...

echarts 关系图节点图自定义及关系边上提示内容自定义

...: 我要实现的效果图是个一对多的图(多对多类似),echarts官网的数据文件是xml格式,要知道他规定的数据格式可以通过“F12”输出的方式查看转换后的json格式,然后取后台数据时,处理成正确格式即可。 效果图: 鼠标放...

ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化

ECharts下载js代码工作原理浅析在项目中引入ECharts后台处理数据库端MySQLPHP端JQuery Ajax处理ECharts 端处理前端全部代码演示结果总结 最近要将后台数据库上的一些数据以可视化的方法显示到前端,找来找去,发现百度开发的这套图...

echarts实现环形进度图

//环形进度图TgsChartsUtil.drawCircleLoadingChart = function(cfg){ var myChart = TgsChartsUtil.getChart(cfg); if(!TgsChartsUtil.isPageLoad()){ cfg.chartType = "circleLoading"; TgsChartsUtil.configs.push(cfg); TgsChartsUtil.showLoading(myChart, null, 12, TgsChartsUtil.loaddingEffects[3],8); r...

前三篇
后三篇