Echarts:如何使用它描绘两个数据来绘制夜莺?

时间:2017-07-06 07:28:48

标签: javascript echarts

enter image description here

这是map.I希望它描述两个不同的数据。 使用区域来描述订单总和,角度描述订单数量。 现在我知道type =“pie”和roseType = true可以画出夜莺。 但数据只能是一个,面积和角度是相同的百分比。 帮我 !谢谢! (原谅我拉英文。Ծ‸Ծ)

<style>

    .data-bac{box-shadow: 1px 2px 5px #333;border-radius: 8px;background-color: #fff;}
    .data-img{width:700px;height: 482px;float:left;margin-bottom:20px;}
</style>
<div class='data-img data-bac' id='data-img'></div>
<script>
    var app = echarts.init(document.getElementById('data-img'));
    app.title = '嵌套环形图';
    var sum = [1200,1300,1400,1500] //here is the total money of area ,symbol for 苏州,常州,上海,无锡
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            right:"8%",
            bottom:"8%",
            data: ["苏州","常州","无锡","上海"]
        },
        color:['#006699', '#00CC33','#000','#006600'],
        series: [{
            name:'注册用户数量的渠道分布',
            type:'pie',
            radius: ['30%', '55%'],
            roseType : true,
            data: [{
                value: 10,//here is the num of area
                name: '苏州'
            },{
                value: 20,//here is the num of area
                name: '常州'
            },{
                value: 30,//here is the num of area
                name: '无锡'
            },{
                value: 40,//here is the num of area
                name: '上海'
            }],
        }],
        backgroundColor:{color:"rgb(255,255,255)"}
    };
    // 使用刚指定的配置项和数据显示图表。
    app.setOption(option);

</script>

1 个答案:

答案 0 :(得分:1)

我正在努力解决同样的事情,联系了GitHub上的开发人员,并被告知这对ECharts来说是不可能的;它根本就不是这样设计的。

您必须在roseType: 'area'roseType: 'radius'之间进行选择。

Documentation on roseType