返回

ECharts属性速查指南:告别频繁查询,提升开发效率

前端

作为前端开发者,我们在使用ECharts绘制各种数据可视化图表时,经常会遇到需要查找和记忆大量属性的情况,这不仅耗费时间,还容易造成开发效率低下。为了解决这一痛点,本文精心整理了一份ECharts属性速查指南,帮助开发者快速查找所需属性,提升开发效率。

标题提示的修改

title: {
    text: '标题内容',  // 标题文本
    show: true,        // 是否显示标题
    textStyle: {
        color: '#000',  // 标题文本颜色
        fontSize: 14,    // 标题文本字体大小
        fontWeight: 'bold' // 标题文本加粗
    },
    itemGap: 10,         // 标题与子标题之间的间距
    subtextStyle: {
        color: '#666',  // 子标题文本颜色
        fontSize: 12    // 子标题文本字体大小
    }
}

选中高亮框的修改

emphasis: {
    itemStyle: {
        color: '#000',  // 选中后的颜色
        borderColor: '#000', // 选中后的边框颜色
        borderWidth: 2,    // 选中后的边框宽度
        shadowBlur: 10,   // 选中后的阴影模糊度
        shadowColor: '#000' // 选中后的阴影颜色
    }
}

饼图的位置和内圈缩放

series: {
    type: 'pie',
    center: ['50%', '50%'],  // 饼图中心位置
    radius: ['40%', '60%'],   // 饼图内/外半径
}

横向线条和y轴的取消

xAxis: {
    show: false,  // 取消横向线条显示
},
yAxis: {
    show: false,  // 取消y轴显示
}

线条颜色的设置

series: {
    lineStyle: {
        color: '#000',  // 线条颜色
        width: 2,      // 线条宽度
        type: 'solid'  // 线条类型(solid, dotted, dashed)
    }
}