【echarts】 饼图

基本配置

   //1.初始化图表
        let myCharts = echarts.init(document.getElementById('charts'))
        //2.准备数据
        //饼图无需配置 xaxis 和 yaxis  数据是由 value name构成的数组
        let data = [
            { value: 11231, name: "淘宝", },
            { value: 22673, name: "京东" },
            { value: 6123, name: "唯品会" },
            { value: 8989, name: "1号店" },
            { value: 6700, name: "聚美优品" }
        ]
        //3.配置
        let option = {
            series: [
                {
                    type: 'pie',
                    data: data
                }
            ]
        }
        //4.渲染图表
        myCharts.setOption(option)

饼图的常见效果

• 显示数值

label.show : 显示文字
label.formatter : 格式化文字

   {
                    type: 'pie',
                    data: data,
                    label: {
                        show: true, 
                        formatter: function (arg) {
                            return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%'
                        }
                    }
                }

• 南丁格尔图
  南丁格尔图指的是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大

  {
                    type: 'pie',
                    data: data,
                    roseType: 'radius', //指定为南格尔玫瑰图
                    label: {
                        show: true, 
                        formatter: function (arg) {
                            return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%'
                        }
                    }
                }

• 选中效果

selectedMode: ‘multiple’
选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选 ‘single’ ， ‘multiple’ ，分别表示单选还是多选
selectedOffset: 30
选中扇区的偏移距离

  {
                    type: 'pie',
                    data: data,
                    selectedMode: 'multiple', //指定单选还是多选
                    selectedOffset: 30  //偏移距离
                }

• 圆环

radius

   {
                    type: 'pie',
                    data: data,
                    radius: ['50%', '70%']
                }