echarts绘制饼图

之前写过一篇highcharts绘制环形配比图,当时boss建议通过highcharts来绘制。但是公司的官网的图表是通过echarts来绘制的,并且这次把这个需求交给了我。所以这次只能再研究一下echarts的绘制饼图的api。

start

echarts因为是百度开发的,所以它的API都是中文的,相对较简单一些。
需求如本图
如上图所示,本次的需求相对比较简单,只需要展示出配比详情及图例即可。左侧较好实现,右侧如果使用图例legend的话非常麻烦,里面包含了很多小项也包含了很多数据。所以决定右侧还是使用html来写。

为echarts准备一个DOM容器

创建一个DOM元素,为其取个id名

<body>
    <div id="echarts_pie" style="width:300px;height:300px;"></div>
</body>

最简单的echarts配置

首先要通过echarts.init方法,初始化一个echarts实例。这个跟highcharts的$("#container_pie").highcharts({})是相似的。这里的echarts_pie就是上一步设置的DOM元素的id名。

var virtualPie = echarts.init($("#echarts_pie"));

然后配置图表的数据

var option = {
    title: { //图表标题
        text: '资金分配构成',
        x: 'center',
        y: 'bottom',
        textStyle: {fontSize: '14px', color: '#999'},
        padding: 15
    },
    tooltip: {

    },
    legend: {

    },
    series: [
        {
            name: '资金构成',
            type: 'pie'
        }
    ]
    ...
}

这里的配置项有很多(点击查看更多)。
其中图表主元素中的东西,如饼图或者折线图本身,有一些类似min,max,scale这种的属性。图表主元素外的,如图例,提示框这种的都会有show这种是否显示的属性。这一点跟highcharts也是一样的。
就比如在这个项目中,legend图例我就用的show: false,然后用DOM元素来替代。
另外说一下决定图表样式的series,这个属性中有一项type,这个地方决定了图表的样式是饼图pie、折现图line还是柱形图bar等。其中,如果在一个图表中展示多组数据。series这个地方就需要用数组来标示,每一组数据都用一个对象来标示。
再说一下显示组件tooltip。这个是鼠标hover上去之后显示的提示框,这里面显示的内容可以用DOM去编写,如:

tooltip : { //显示组件
    show: true,
    trigger: 'item',
    formatter: "{b} : <em style="position:relative;top:1px;">{d}</em>%"
    }

如果不需要,可以在将属性show设为false

最后,需要我们将刚刚的option配置,指定为图表的配置
virtualPie.setOption(option);

下面贴一下我的配置:

var initPie = function(data){
    var chart = echarts.init($('#pie')[0]);
    var option = {
        title : {
            text: '投资资金构成',
            x:'center',
            y:'bottom',
            textStyle: {fontSize: '14px', color:'#999'},
            padding: 15
        },
        tooltip : {
            trigger: 'item',
            formatter: "{b} : <em style='position:relative;top:1px;'>{d}</em>%"
        },
        legend: {
            show: false
        },
        series : [
            {
                name: '资金构成',
                type: 'pie',
                radius : '60%',
                center: ['50%', '50%'],
                data: data,
                label:{
                    normal: {
                        show: false,
                        position: 'inside'
                    }
                },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    chart.setOption(option);
};

发表评论

邮箱地址不会被公开。 必填项已用*标注