首页 前端知识 【Echarts】Echarts饼图样式-添加内圈阴影达到立体效果

【Echarts】Echarts饼图样式-添加内圈阴影达到立体效果

2024-02-22 11:02:23 前端知识 前端哥 719 680 我要收藏

给饼图添加内圈阴影达到立体效果

实现思想:
	使用双饼图,将内圈饼图与外圈饼图数据一致,并保持高亮
最终效果:

在这里插入图片描述

1.在series中添加内圈饼图
	注意:data要与外圈饼图一致,饼图中心与外圈饼图一致,饼图外径与外圈饼图内径一致(+1效果更好)
	{
      type: 'pie',
      radius: ['36%', '41%'],
      center: ['35%', '55%'],
      startAngle: 135,
      minAngle: 12,
      label: {
      	show: false
      },
      hoverAnimation: false,
      legendHoverLink: false,
      animation: false,
      tooltip: {
      	show: false
      },
      data: data,
  }
2.保持内圈高亮,达到阴影效果
	myChart.dispatchAction({
		type: "highlight",
		seriesIndex: 1, // series 数据数组第几个
	});
完整script代码:
        $(function () {
                var main = document.getElementById('item1');
                var msg=[
                    {name: '字段1', value: '16'},
                    {name: '字段2', value: '34'},
                    {name: '字段3', value: '52'},
                    {name: '字段4', value: '48'},
                    {name: '字段5', value: '88'}
                ]
                nanding_bing_echart(msg, main);
            })
        function nanding_bing_echart(msg, main) {
            var data = msg;
            
            // 计算和
            var num = 0;
            for (var i = 0; i < data.length; i++) {
                num += Number(data[i].value);
            }
            var myChart = echarts.init(main);
            option = null;


            myChart.setOption({
                backgroundColor:'#1a3c81',
                legend: {
                    //是否显示图例
                    show: true,
                    //plain普通(默认),scroll数量较多时可使用可滚动翻页的图例(水平\垂直)
                    type: 'plain',
                    //图例列表的布局朝向:水平horizontal、垂直vertical
                    orient: 'vertical',
                    //图例组件离容器上(left,top,right,bottom)侧的距离
                    bottom: '30',
                    right: '30',
                    //图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。
                    itemGap: 6,
                    //图例标记的图形宽度
                    itemWidth: 10,
                    //图例标记的图形高度
                    itemHeight: 10,
                    //图例的公用文本样式(包括颜色\字体\字号\等等...)
                    textStyle: {
                        color: font_color,
                        fontSize: 14,
                    },
                    //控制是否可以通过点击图例改变系列的显示状态:true\false\single\multiple
                    selectedMode: true,
                    //图例关闭时的颜色
                    inactiveColor: '#ccc',
                    icon: 'circle',
                    formatter: function (name) {
                        var value;
                        for (var i = 0; i < data.length; i++) {
                            if (data[i].name == name) {
                                value = data[i].value;
                            }
                        }
                        return name + ' : ' + Math.round(value / num * 10000) / 100 + "%";

                    },
                },
                tooltip: {
                    confine: true,
                    //是否显示提示框组件,包括提示框浮层和 axisPointer
                    show: true,
                    //触发类型:'item':数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用\'axis':坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用\'none':什么都不触发
                    trigger: 'item',
                    //提示框浮层内容格式器:{a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
                    formatter: ' {b} :<br/> {c} 人 ({d}%)',
                    //是否显示提示框浮层,默认显示
                    showContent: true,
                    //是否永远显示提示框内容,默认情况下在移出可触发提示框区域后 一定时间 后隐藏,设置为 true 可以保证一直显示提示框内容
                    alwaysShowContent: false,
                    //提示框触发的条件:mousemove,click,mousemove|click,none
                    triggerOn: 'mousemove|click',
                    //浮层隐藏的延迟,单位为 ms,在 alwaysShowContent 为 true 的时候无效
                    hideDelay: 100,
                    //鼠标是否可进入提示框浮层中,默认为false,如需详情内交互,如添加链接,按钮,可设置为 true
                    enterable: false,
                    //是否将 tooltip 框限制在图表的区域内,当图表外层的 dom 被设置为 'overflow: hidden',或者移动端窄屏,导致 tooltip 超出外界被截断时,此配置比较有用
                    confine: true,
                    //提示框浮层的移动动画过渡时间,单位是 s,设置为 0 的时候会紧跟着鼠标移动
                    transitionDuration: 0.4,
                    //提示框浮层的背景颜色
                    backgroundColor: 'rgba(50,50,50,0.7)',
                    //提示框浮层的边框颜色
                    borderColor: '#333',
                    //提示框浮层的文本样式(颜色\字体\字号\等等...)
                    textStyle: {
                        color: font_color,
                        fontSize: 12,
                    },
                },
                animationDuration: 2000,
                animationDurationUpdate: 800,
                series: [
                    {
                        color:['#17b367', '#02aafe', '#814ecc', '#cb8251', '#a3c84e', '#4c63d9'],
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['35%', '55%'],
                        startAngle: 135,
                        minAngle: 12,
                        data: data,
                        label:{
                            //是否显示标签(圆环false)
                            show: true,
                            // 标签的位置outside:有视觉引导线连接,inside==inner,圆环中心center
                            position: 'outside',
                            //标签内容:{a}:系列名,{b}:数据名,{c}:数据值,{d}:百分比
                            formatter: '{b}\n{c}人',
                            // 标签文字颜色
                            color: font_color,
                        },
                        labelLine: {
                            //是否显示视觉引导线
                            show: true,
                            //是否平滑视觉引导线,默认不平滑,可以设置成 true 平滑显示,也可以设置为 0 到 1 的值,表示平滑程度
                            smooth: false,
                        },
                    },{
                        type: 'pie',
                        radius: ['36%', '41%'],
                        center: ['35%', '55%'],
                        startAngle: 135,
                        minAngle: 12,
                        label: {
                            show: false
                        },
                        hoverAnimation: false,
                        legendHoverLink: false,
                        animation: false,
                        tooltip: {
                        show: false
                        },
                        data: data,
                    },
                ]
            }, true);
            // 保持内圈高亮,达到阴影效果
            myChart.dispatchAction({
                type: "highlight",
                seriesIndex: 1, // series 数据数组第几个
                });
            // 自适应大小
            window.addEventListener("resize", function () { 
                myChart.resize();
            });
        };
转载请注明出处或者链接地址:https://www.qianduange.cn//article/2488.html
标签
评论
发布的文章

jQuery中的ajax

2024-03-07 08:03:42

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!