美文网首页
echart画饼图

echart画饼图

作者: 前端来入坑 | 来源:发表于2020-02-13 12:22 被阅读0次
    • 引人
    <script src="echarts.js"></script>
    
    <div id="pie" style="width: 100%;height: 300px;"></div>
    
              function pie(piedata) {
                // 基于准备好的dom,初始化echarts实例
                var myChart2 = echarts.init(document.getElementById('pie'));
    
                // 指定图表的配置项和数据
                var option = {
                    color: ['#00A1E9', '#7AD038', '#F1C14F' ],
                    series: [{
                        name: '',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '55%'],
                        data: piedata,
                        // data: jyzbdata,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },
                            normal: {
                                label: {
                                    textStyle: {
                                        fontSize: '130%'
                                    }
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                formatter: '{b}' + '\n\r' + '{d}%',
                            }
                        }
                    }]
                };
    
                // 使用刚指定的配置项和数据显示图表。
                myChart2.setOption(option);
            }
    
            var piedata = [{value: 10, name: '分类一'},{value: 30, name: '分类二'},{value: 60, name: '分类三'}];
            pie(data);
    

    相关文章

      网友评论

          本文标题:echart画饼图

          本文链接:https://www.haomeiwen.com/subject/fruznctx.html