Echarts - legend、tooltip、xAxis属性设置

legend：

        legend: {show: true, //是否显示type: "plain", // 图例的类型 'plain':普通图例  'scroll':可滚动翻页的图例zlevel: 1, // 所有图形的 zlevel 值。icon: "circle",top: "5%", // bottom:"20%" // 组件离容器的距离right: "5%", //left:"10%"  // // 组件离容器的距离width: "auto", // 图例组件的宽度height: "auto", // 图例组件的高度orient: "horizontal", // 图例列表的布局朝向。 'horizontal'  'vertical'align: "auto", // 图例标记和文本的对齐padding: 5, // 图例内边距itemWidth: 6, // 图例标记的图形宽度。itemGap: 20, // 图例每项之间的间隔。itemHeight: 14, //  图例标记的图形高度。symbolKeepAspect: true, // 如果图标（可能来自系列的 symbol 或用户自定义的 legend.data.icon）是 path:// 的形式，是否在缩放时保持该图形的长宽比。formatter: function (name) {return '{a|text}{a|   }{b|' +  name + '}'},selectedMode: true, // 图例选择的模式，inactiveColor: "#ccc", // 图例关闭时的颜色。textStyle: {color: "#556677", // 文字的颜色。fontStyle: "normal", // 文字字体的风格。fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold'  'bolder' 'lighter'  100 | 200 | 300 | 400...fontFamily: "sans-serif", // 文字的字体系列。fontSize: 12, // 文字的字体大小。lineHeight: 20, // 行高。backgroundColor: "transparent", // 文字块背景色。borderColor: "transparent", // 文字块边框颜色。borderWidth: 0, // 文字块边框宽度。borderRadius: 0, // 文字块的圆角。padding: 0, // 文字块的内边距shadowColor: "transparent", // 文字块的背景阴影颜色shadowBlur: 0, // 文字块的背景阴影长度。shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。// width: 50, // 文字块的宽度。 默认// height: 40, // 文字块的高度 默认textBorderColor: "transparent", // 文字本身的描边颜色。textBorderWidth: 0, // 文字本身的描边宽度。textShadowColor: "transparent", // 文字本身的阴影颜色。textShadowBlur: 0, // 文字本身的阴影长度。textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。rich: {a: {color: "red",lineHeight: 10,},b: {color: "#fff",lineHeight: 10,},}, // 自定富文本样式},},

tooltip：

tooltip: {show: true, // 是否显示trigger: 'axis', // 触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。axisPointer: { // 坐标轴指示器配置项。type: 'shadow', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。axis: 'auto', // 指示器的坐标轴。 snap: true, // 坐标轴指示器是否自动吸附到点上},// showContent: true, //是否显示提示框浮层，默认显示。// triggerOn: 'mouseover', // 触发时机  'mouseover'鼠标移动时触发。     'click'鼠标点击时触发。  'mousemove|click'同时鼠标移动和点击时触发。// enterable: false, // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。borderColor: '#333', // 提示框浮层的边框颜色。borderWidth: 0, // 提示框浮层的边框宽。padding: 5, // 提示框浮层内边距，textStyle: { // 提示框浮层的文本样式。color: '#fff',fontStyle: 'normal',fontWeight: 'normal',fontFamily: 'sans-serif',fontSize: 14,},extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 额外附加到浮层的 css 样式confine: false, // 是否将 tooltip 框限制在图表的区域内。// formatter: '{b} 的成绩是 {c}'formatter: function(arg) {return arg[0].name + '的分数是:' + arg[0].data}},

xAxis：

xAxis： {show: true,    // 是否显示 x 轴position: 'top',    // x 轴的位置（'top'，'bottom'） type: 'category',    // 坐标轴类型nameRotate: 10,    // 坐标轴名字旋转，角度值inverse: false,    // 是否是反向坐标轴boundaryGap: ['20%', '20%'],    // 坐标轴两边留白策略splitNumber: 5,    // 坐标轴的分割段数（预估值）axisLine: {show: true,    // 是否显示坐标轴轴线symbol: ['none', 'arrow'],     // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头symbolSize: [10, 15],     // 轴线两端箭头大小，数值一表示宽度，数值二表示高度lineStyle: {color: '#333',    // 坐标轴线线的颜色width: '5',    // 坐标轴线线宽type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）},},axisTick: {show: true,    // 是否显示坐标轴刻度inside: true,     // 坐标轴刻度是否朝内，默认朝外length: 5,    // 坐标轴刻度的长度lineStyle: {color: '#FFF',     // 刻度线的颜色width: 10,    // 坐标轴刻度线宽type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）},},axisLabel: {show: true,     // 是否显示刻度标签interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有inside: true,    // 刻度标签是否朝内，默认朝外rotate: 90,    // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从 -90 度到 90 度margin: 10,    // 刻度标签与轴线之间的距离// formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式color: '#FFF',     // 刻度标签文字的颜色fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）fontSize: '20',    // 文字字体大小align: 'left',     // 文字水平对齐方式，默认自动（'left'，'center'，'right'）verticalAlign: 'left',    // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'lineHeight: '50',    // 行高 ）backgroundColor: 'red',    // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'},splitLine: {show: true,    // 是否显示分隔线。默认数值轴显示，类目轴不显示interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有color: ['#ccc'],    // 分隔线颜色，可以设置成单个颜色，也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色width: 3,    // 分隔线线宽type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）},splitArea: {show: true,    // 是否显示分隔区域interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有areaStyle: {color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],    // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色opacity: 1,    // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形},},data: {textStyle: {color: '#FFF',     // 文字的颜色fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）fontSize: '20',    // 文字字体大小align: 'left',     // 文字水平对齐方式，默认自动（'left'，'center'，'right'）verticalAlign: 'left',    // 文字垂直对齐方式，默认自动（'top'，'middle'，'bottom'lineHeight: '50',    // 行高 ）backgroundColor: 'red',    // 文字块背景色，例：'#123234', 'red', 'rgba(0,23,11,0.3)'},},
}

Echarts - legend、tooltip、xAxis属性设置相关推荐

Echarts饼状图属性设置大全
1.标题设置 title: {text: '学生生源地来源分布图',subtext: '模拟数据',// x 设置水平安放位置,默认左对齐,可选值:'center' ¦ 'left' ¦ 'right ...
recharts中Legend的margin属性设置无效
设置legend图例组件中的margin无效: return(<BarChartwidth={400}height={300}data={data}margin={{top: 20, right ...
Echarts折线图属性设置大全
Echarts折线图属性设置大全 var option = {backgroundColor: '#FFF0F5',title: {text: '折线图',subtext: '模拟数据',x: 'ce ...
echarts切换折线图变大_Echarts折线图属性设置大全
Echarts折线图属性设置大全 var option = { backgroundColor: '#FFF0F5', title: { text: '折线图', subtext: '模拟数据', x ...
ECharts属性设置
ECharts属性设置转载于:https://www.cnblogs.com/macT/p/10212684.html
echarts 之常用的属性配置
目录 echarts 之常用的属性配置饼形图相关柱状图相关简单的柱状图多柱状图折线图 echarts 之常用的属性配置饼形图相关 series: [{type: "pie&quo ...
echarts legend修改形状
legend: {icon: "circle", // 字段控制形状类型包括 circle,rect,line,roundRect,triangle,diamond,pin,ar ...
1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字)，手把手教程系列
一.echarts 折线图(折线统计图) 折线图在我们也是我们的数据可视化图表中最常用的一种图表之一,是用折线将各个数据点标志连接起来的图表,不仅可以表示数量的多少,而且可以反映同一事物在不同时间里的 ...
echarts仪表盘option_ECharts仪表盘属性与使用
series[i]-gauge 用于表示ECharts仪表盘,当您要使用ECharts仪表盘的时候,需要将series中的type属性设置为" 'gauge' ",本节介绍了ECh ...

Echarts - legend、tooltip、xAxis属性设置

目录

legend：

tooltip：

xAxis：

Echarts - legend、tooltip、xAxis属性设置相关推荐

最新文章

热门文章