Web开发：小结Apache Echarts官网上常用的配置项（前端可视化图表）

目录

一、须知

二、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}]
};

【实现链接】