当前位置: 首页> 文旅> 美景 > Web开发:小结Apache Echarts官网上常用的配置项(前端可视化图表)

Web开发:小结Apache Echarts官网上常用的配置项(前端可视化图表)

时间:2025/7/11 10:17:24来源:https://blog.csdn.net/m0_67412019/article/details/140856997 浏览次数:0次

目录

一、须知

二、Title

三、 Legend

四、Grid


一、须知

配置项官方文档:点此进入。

我总结了比较常用的功能,写进注释里面,附带链接分享和效果图展示。(更新中....)

二、Title

option = {title: {text: 'Weekly Sales',//标题文本textStyle: {color: '#333',  // 标题文本颜色fontWeight: 'bold',  // 标题文本字体粗细,可选'normal','bold','bolder','lighter'fontSize: 18,  // 标题文本字体大小},subtext: 'Unit: Pieces',  // 副标题文本内容subtextStyle: {color: '#aaa',  // 副标题文本颜色fontStyle: 'normal',  // 副标题文本字体风格fontWeight: 'normal',  // 副标题文本字体粗细fontSize: 14  // 副标题文本字体大小},textAlign: 'auto',  // 标题文本水平对齐方式,可选值:'auto'、'left'、'right'、'center'padding: [10, 10, 10, 10],  // 标题的内边距,上右下左itemGap: 10,  // 主副标题之间的间距left: 'center',  // 标题组件离容器左侧的距离,可选'left', 'center', 'right',20,'20%'top:'top'  // 标题组件离容器顶部的距离,可选'top', 'middle', 'bottom',20,'20%'},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]
};

【分享链接:点此进入】

【实现效果】

三、 Legend

option = {title: {text: 'Referer of a Website',left: 'center'},tooltip: {trigger: 'item', // 提示框触发类型为数据项触发formatter: '{a} <br/>{b} : {c} ({d}%)' // 提示框内容格式器:显示series的name、data的name、data的value和百分比},legend: {orient: 'vertical', // 图例布局方式为垂直,可选'horizontal','vertical'left: 'left', // 图例组件离容器左侧的距离,可选'left', 'center', 'right'itemHeight: 14, // 图例的高itemWidth: 14, // 图例的宽itemGap: 20, // 图例之间的间隔padding: [40, 20, 10, 5], // 上、右、下、左的内边距(移动位置)textStyle: {color: '#333', // 图例文字颜色fontSize: 12 // 图例文字大小},data: ['Search Engine', 'Direct', 'Email', 'Union Ads', 'Video Ads'] // 图例数据,与series中的name对应},series: [{name: 'Access From',type: 'pie', // 图表类型为饼图radius: '50%', // 饼图半径,可设置为相对的百分比或绝对的像素值center: ['50%', '60%'], // 饼图的中心(圆心)坐标,支持绝对像素和相对百分比data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }],label: {show: true, // 是否显示标签formatter: '{b} : {c} ({d}%)', // 显示data的name、data的value和百分比fontSize: 12 // 标签文字大小},labelLine: {show: true // 是否显示标签的视觉引导线},emphasis: {//鼠标悬浮阴影itemStyle: {shadowBlur: 10,shadowOffsetX: 10,shadowColor: 'rgba(0, 0, 0, 0.5)'}},animationType: 'scale', // 数据更新动画的类型animationEasing: 'elasticOut', // 数据更新动画的缓动效果animationDelay: function (idx) { // 数据更新动画的延迟return idx * 50;}}]
};

【分享链接】

【实现效果】

四、Grid

option = {grid: {show: true,left: '10%', // 网格左边距top: 60, // 网格顶边距borderWidth: 1 // 网格边框宽度},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},tooltip: {show: true, // 显示提示框trigger: 'axis', // 触发类型,鼠标悬停显示提示框axisPointer: { // 坐标轴指示器,坐标轴触发有效type: 'line' // 指示器类型为直线}},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true}]
};

【实现链接】 

 

关键字:Web开发:小结Apache Echarts官网上常用的配置项(前端可视化图表)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: