echars 环形图加外边框

简介: 需求是加外边框,鼠标放上去外边框随着一起突出
学习过程中将笔记跟大家分享,希望对大家也有所帮助,共同成长进步💪~\
如果大家喜欢,可以点赞或留言给个支持💕 ~~,谢谢大家⭐️⭐️⭐️~

需求是加外边框,鼠标放上去外边框随着一起突出,如下图所示:

image.png

代码如下:

function mychart1() {
    myChart1 = echarts.init(document.getElementById('profitTotal'));
    let echartData = [{
        name: '费用',
        value: 30, 
    },
    {
        name: '投资',
        value: 70, 
    },];
    let xAxisData = echartData.map(v => v.name);
    let yAxisData = echartData.map(v => v.value);
    option = {
        color:['#03A08C','#1D6CDC'],
        legend: {
            orient: 'vertical', // 'vertical' ,'horizontal'
            x: 'right', // 'center' | 'left' | 'right' | {number}, 
            y: 'center', // 'center' | 'bottom' | {number} 
            padding:[0,80,0,0],
            align:'left',
            textStyle: { //图例文字的样式
                color: '#81ACCF',
                fontSize: 14,
                fontWeight: '100',
            },
            // icon: "rect",   //  字段控制形状  类型包括 circle,rect,line,roundRect,triangle,diamond,pin,arrow,none
          itemWidth: 18,  // 设置宽度
          itemHeight: 10, // 设置高度
        //   itemGap: 40, // 设置间距
            selectedMode:false,//取消图例上的点击事件
            data:xAxisData,
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['25%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderColor: '#0A284C',
                    borderWidth: 2,
                },
                label: {
                    normal: {
                        position: 'inner',
                        show : false,
                        formatter:'{c}%'
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:echartData,
            },
            {
                name: '外边框',
                type: 'pie',
                radius: ['25%', '80%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    normal:{
                        color:function(params){//渐变色
                            var colorList = ['rgba(3, 160, 140, 0.2)','rgba(3, 105, 211, 0.2)'];
                            return colorList[params.dataIndex]
                        },
                        // color:'rgba(62,109,255,0.4)',
                        borderColor: '#0A284C',
                        borderWidth: 2,
                    },
                },
                label: {
                    normal: {
                        position: 'inner',
                        show : true,
                        color:'#ffffff',
                        formatter:'{c}%'
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:echartData,
            }]
    };
    myChart1.on('mouseover', 'series.pie',function(params) {
        myChart1.dispatchAction({
            type: 'highlight',
            dataIndex: params.dataIndex,
            seriesIndex: 0,
        });
    });
    myChart1.on('mouseout', 'series.pie', function(params) {
        myChart1.dispatchAction({
            type: 'downplay',
            dataIndex: params.dataIndex,
            seriesIndex: 0,
        });
    });
    myChart1.setOption(option);
}

ECharts中支持的图表行为,通过 dispatchAction 触发。实现外边框会随着一起突出显示与否

目录
相关文章
|
7月前
|
前端开发
css实现伪类三角形气泡框 带边框
css实现伪类三角形气泡框 带边框
63 3
|
前端开发 容器
如何利用CSS实现三角形、扇形、聊天气泡框
如何利用CSS实现三角形、扇形、聊天气泡框
182 0
|
前端开发
CSS小技巧之圆形虚线边框
CSS小技巧之圆形虚线边框
182 0
|
7月前
边框虚线滚动动画特效
边框虚线滚动动画特效
|
7月前
|
前端开发
CSS 做三角边框,实现及原理
CSS 做三角边框,实现及原理
90 0
|
7月前
|
前端开发 JavaScript
uniapp四个元素点击那个哪个变色,其他的还变原来的颜色
uniapp四个元素点击那个哪个变色,其他的还变原来的颜色
416 0
|
JSON 数据格式
Echarts折线图的折线实线设置成虚线
Echarts折线图的折线实线设置成虚线
200 0
|
前端开发
CSS实现鼠标悬停图片向上浮动,放大,翻转
CSS实现鼠标悬停图片向上浮动,放大,翻转
319 0
|
前端开发
【CSS动画02--卡片旋转3D】
【CSS动画02--卡片旋转3D】