网站备案号在哪里查询,西安SEO网站推广,做渔船的网站,在哪个网站做旅游攻略好目录
一、须知
二、Title
三、 Legend
四、Grid 一、须知
配置项官方文档#xff1a;点此进入。
我总结了比较常用的功能#xff0c;写进注释里面#xff0c;附带链接分享和效果图展示。#xff08;更新中....#xff09;
二、Title
option {title: {text: Weekl…目录
一、须知
二、Title
三、 Legend
四、Grid 一、须知
配置项官方文档点此进入。
我总结了比较常用的功能写进注释里面附带链接分享和效果图展示。更新中....
二、Title
option {title: {text: Weekly Sales,//标题文本textStyle: {color: #333, // 标题文本颜色fontWeight: bold, // 标题文本字体粗细可选normal,bold,bolder,lighterfontSize: 18, // 标题文本字体大小},subtext: Unit: Pieces, // 副标题文本内容subtextStyle: {color: #aaa, // 副标题文本颜色fontStyle: normal, // 副标题文本字体风格fontWeight: normal, // 副标题文本字体粗细fontSize: 14 // 副标题文本字体大小},textAlign: auto, // 标题文本水平对齐方式可选值auto、left、right、centerpadding: [10, 10, 10, 10], // 标题的内边距上右下左itemGap: 10, // 主副标题之间的间距left: center, // 标题组件离容器左侧的距离可选left, center, right2020%top:top // 标题组件离容器顶部的距离可选top, middle, bottom2020%},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,verticalleft: left, // 图例组件离容器左侧的距离可选left, center, rightitemHeight: 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}]
};【实现链接】
