echarts 其他展示

 

 

let data=[{name:"回族",value:20},{name:"汉族",value:50},{name:"壮族",value:60},
{name:"满族",value:80},{name:"其他",value:231}]
let dataorder=[{name:"土家族",value:12},{name:"布依族",value:9},
{name:"纳西族",value:13},{name:"毛南族",value:15}]
 
 let totalqt=0
 dataorder.forEach(item=> {
        totalqt+=item.value
    })
let totalCount=0
 data.forEach(item=> {
        totalCount+=item.value
    })
 
 
option = {
                tooltip: {
                    show: true, //是否显示提示框
                    tirgger: "item", //触发方式   axis 坐标轴触发   item  数据项图形触发 散图 饼状图使用
                    asixPointer: {
                        type: "shadow",
                    },
                    showContent: true, 是否显示提示框浮层
                    renderMode: "html", //渲染方式 html   richText 富文本
                    fonfine: true, //是否将 tooltip 框限制在图表的区域内
                    className: "echarts-tooltip", //dom节点的样式名称  （只在 html 模式下生效）
                    textStyle: {
                        fontSize: 12,
                        color: "#666666",
                    },
                    borderWidth: "0", //去掉border边框
                    position: function (point, params, dom, rect, size) {
                        //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
                        var x = point[0]; //
                        var y = point[1];
                        var viewWidth = size.viewSize[0];
                        var viewHeight = size.viewSize[1];
                        var boxWidth = size.contentSize[0];
                        var boxHeight = size.contentSize[1];
                        var posX = 0; //x坐标位置
                        var posY = 0; //y坐标位置

                        if (x < boxWidth) {
                            //左边放不开
                            posX = 5;
                        } else {
                            //左边放的下
                            posX = x - boxWidth;
                        }

                        if (y < boxHeight) {
                            //上边放不开
                            posY = 5;
                        } else {
                            //上边放得下
                            posY = y - boxHeight;
                        }

                        return [posX, posY];
                    },
                    // padding:0,
                    // backgroundColor:'#fff',
                    formatter: function (params) {
                        console.log("悬浮", params);
                        let name = params.name.substring(0, 7);
                        // let name = params.name;
                        
                        let str = `<span class='tooltip_name'>${params.marker}${name}</span>
                              <span  class='tooltip_value'>${params.value}</span>个
                               | <span  class='tooltip_value'>${params.percent}</span>% </br>
                              `; // 设置显示内容
                              if( params.name=="其他"){
                                dataorder.forEach(item=>{
                                    str+=`<span class='tooltip_name'>${item.name}</span>
                                    <span  class='tooltip_value'>${item.value}</span>个
                                     | <span  class='tooltip_value'>${(item.value/totalqt*100).toFixed(2)}</span>%
                                     </br>`
                                })
                              
                              }
                        return str;
                    },
                },
                color: ["#73A0FA", "#C28DFF", "#FFB04A", "#FF8C64", "#51DCA7"],
                legend: {
                    type: "scroll", //
                    // x:"right",
                    // y:'center',
                    // show:true,
                    // height:'500px',
                    itemGap: 10,
                    orient: "vertical",
                    // left: 'left',
                    top: "center",
                    // // icon:'circle',
                    icon: "path://M512 371c37.66 0 73.07 14.67 99.7 41.3 26.63 26.63 41.3 62.04 41.3 99.7s-14.67 73.07-41.3 99.7C585.07 638.33 549.66 653 512 653s-73.07-14.67-99.7-41.3C385.67 585.07 371 549.66 371 512s14.67-73.07 41.3-99.7c26.63-26.63 62.04-41.3 99.7-41.3m0-127c-148.01 0-268 119.99-268 268s119.99 268 268 268 268-119.99 268-268-119.99-268-268-268z", //自定义图标
                    // // right:10,
                    // top:'0%',
                    right: "0%",
                    selectedMode: false, //取消点击事件

                    // align:'left',

                    // width:'30%',
                    textStyle: {
                        color: "#666666",
                        fontSize: 14,
                        fontWeight: 500,
                        overflow: "truncate",

                        // lineHeight:20,
                        padding: [2, 0, 2, 0],
                        rich: {
                            name: {
                                fontSize: 14,
                                color: "#666666",
                                padding: [2, 0, 0, 0], //上 右  下 左
                            },
                            longname: {
                                fontSize: 12,
                                color: "#666666",
                                padding: [2, 0, 0, 0], //上 右  下 左
                            },
                        },
                    },
                    formatter(name) {
                        console.log(name);

                        if (name.length > 7) {
                            //     return `{longname|${name}}`;
                            // }
                            // else if(name.length>7)
                            // {
                            //大于7个汉字截取 最大只展示7个汉字
                            name = name.substring(0, 7) + "...";

                            return `{longname|${name}}`;
                        } else {
                            return `{name|${name}}`;
                        }
                    },
                },
                grid: {
                    x: 10, //左留白
                    y: 20, //上留白
                    x2: 10, //右留白
                    y2: 10, //下留白
                },
                series: [
                    {
                        name: "卡包使用数据",
                        type: "pie",
                        radius: ["30%", "60%"], //饼图内圈和外圈半价
                        center: ["25%", "50%"], //饼图位置
                        avoidLabelOverlap: false,
                        // hoveranination:false,
                        // silent:true,
                        label: {
                            show: true,
                            position: "center", //饼图中心
                            formatter: function (params) {
                                let count = totalCount;
                                let str = "{a| " + count + "}" + "{b|个}";
                                return str;
                            },
                            rich: {
                                a: {
                                    fontSize: 17,
                                    color: "#333333",
                                },
                                b: {
                                    fontSize: 12,
                                    color: "#333333",
                                },
                            },
                            // textStyle:{
                            //     fontSize:12,
                            //     color:'#333333',
                            // }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "14",
                                fontWeight: "500",
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data:  data,
                    },
                ],
            }