美文网首页
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画饼图

    引人

  • echart地图使用经验-地图变形和添加数据

    关于echart2,echart3地图的使用一点人生经验: 1.echart3,echa...

  • SVG基础/SVG画饼图

    SVG基础 SVG画饼图 扩展

  • echart使用心得

    最近在弄商城的图表数据,要用到了echart.js,echart是支持多种图表的,有折线图,饼图,柱形图等等,我们...

  • YII2 echart 饼图 demo

    echart 使用 视图层view.php 此次针对 echart 饼状图。控制器代码类似。 主要记录一下数据格式...

  • vue框架下实现甘特图(dhtmlxGantt)

    项目中要用到甘特图,最开始研究了echart,实现的样式如下: 对比下面的原型图,发觉相差甚大且通过echart不...

  • echart迁徙图

    需要的js有 0.jquery 1.echart.js 2,china.js 代码奉上 html页面

  • echart 关系图

    首先安装echart,打开终端,进入项目目录,输入以下命令进行安装 子组件chart.vue 父组件 index....

  • iOS画饼图

    扇形易画,扇形的中心点不易找。 找扇形中心点的算法分析 ****注意****:此找扇形中点算法,是从-π/2开始画...

  • 画饼图-未出

    要重复的图 老大给的提示:本世纪初Perou和Sorlie 等人作为分子分型(MC)的先驱,通过全基因表达谱确立了...

网友评论

      本文标题:echart画饼图

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