echarts.js 绘图出现的问题

最新推荐文章于 2025-07-11 10:20:42 发布

其实还很远

最新推荐文章于 2025-07-11 10:20:42 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/running_shuai/article/details/79530282

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了ECharts中处理折线图断点、自定义tooltip样式、使用自定义图片作为图例图标以及扇形图中实现间隙的方法。对于折线图断点，通过在data中设置“-”来表示缺失数据；自定义tooltip可通过HTML生成特定样式；图例图标可通过指定路径使用自定义图片；而扇形图间隙则可通过添加空白数据项或设置白色边框实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts.js折线图断点的的情况

    这个文档里面有说明的，可以在断点的时候，把data设置为“-”，比如这样
[12, '-', 56,10, 23]，记住0也是数据，没有数据用"-"代替，
但是echart自身有缺陷，就是没有数据的时候会有一个小黑点，
有多少没有数据，全部为“-”

echarts中tooltip里面小圆点（有图）是怎么做的啦？（全部和日常作业前面的小圆点）

这里写图片描述

    默认的 formatter 会提供这一效果，如果必须自定义 formatter，可以用 html 元素生成这个圆点
    tooltip: {
        trigger: 'axis',
        formatter:function(params){
            console.log(params)
            let str = '';
            params.forEach((item,index)=>{
                if(index == 0){
                    str = item.name+"<br/>"
                }else{
                    str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>' + item.seriesName+"："+item.value+'份'+"<br/>";
                }
            })
            return str;
        },
    },

echarts之legend-改变图例的图标为自定义图片（或者其他形状）

这里写图片描述

     legend: {
        top :20,
        right:20,
        itemGap:22,
        itemWidth:12,
        itemHeight:12,
        data: [{
            name:'全部',
            icon:'roundRect'
             icon:'image://./images/icon1.png'//格式为'image://+icon文件地址'，其中image::后的//不能省略
        },
        {
            name:'日常作业',
            icon:'roundRect'
        },
        {
            name:'周练',
            icon:'roundRect'
            icon:'image://./images/icon2.png'//格式为'image://+icon文件地址'，其中image::后的//不能省略
        }]

echarts.js 扇形图怎么出现空隙和间隙

    1、push一个数据，但是颜色为空，这个办法的时候需要我们自己算，标签展示值和tootip
      seriesData.push( { 
                value:item.examNum == 0 || examTypeStatsList.length == 1 ? 0 : (totalExam/80),
                name: '',
                itemStyle:{
                    normal:{
                        color:'#ffffff'
                    },    
                }, 
            })
    2、设置个白色的边框就好了 不用设空值 itemStyle: { normal: { borderColor: "#FFFFFF", borderWidth: 1, }},
        seriesData.push({
                value:item.examNum,
                name:item.examTypeName,
                labelLine: {
                    normal: {
                        length: 20,
                        length2: 70,
                        color:item.color,

                    }
                },
                 itemStyle:{
                        normal:{
                            color:item.color,
                            fontWeight:'bold', 
                            borderColor: "#FFFFFF", 
                            borderWidth: (studentLevelList.filter(item=>item.num > 0)).length == 1 ? 0 : 5,           
                        }
                    },
            })