Echarts柱状图常用属性

  var option = {//--------------    标题 title  ----------------title: {text: "主标题",textStyle: {color: "#fff",},subtext: "副标题",subtextStyle: {color: "#bbb",},padding: [0, 0, 100, 100], //标题位置},//----------------   图例 legend  -----------------legend: {type: "plain", //----图例类型，默认为'plain'，当图例很多时可使用'scroll'top: "1%", //----图例相对容器位置,top\bottom\left\rightselected: {销量: true, //----图例选择,图形加载出来会显示选择的图例，默认为true},textStyle: {//----图例内容样式color: "#fff", //---所有图例的字体颜色backgroundColor: "black", //---所有图例的字体背景色},tooltip: {//图例提示框，默认不显示show: true,color: "red",},data: [//----图例内容{name: "销量",icon: "circle", //----图例的外框样式textStyle: {color: "#fff", //----单独设置某一个图例的颜色backgroundColor: "black", //---单独设置某一个图例的字体背景色},},],},//--------------   提示框 -----------------tooltip: {show: true, //---是否显示提示框,默认为truetrigger: "item", //---数据项图形触发axisPointer: {//---指示样式type: "shadow",axis: "auto",},padding: 5,textStyle: {//---提示框内容样式color: "#fff",},},//-------------  grid区域  ----------------grid: {show: false, //---是否显示直角坐标系网格top: 80, //---相对位置，top\bottom\left\rightcontainLabel: false, //---grid 区域是否包含坐标轴的刻度标签tooltip: {//---鼠标焦点放在图形上，产生的提示框show: true,trigger: "item", //---触发类型textStyle: {color: "#666",},},},//-------------   x轴   -------------------xAxis: {show: true, //---是否显示position: "bottom", //---x轴位置offset: 0, //---x轴相对于默认位置的偏移type: "category", //---轴类型，默认'category'name: "月份", //---轴名称nameLocation: "end", //---轴名称相对位置nameTextStyle: {//---坐标轴名称样式color: "#fff",padding: [5, 0, 0, -5], //---坐标轴名称相对位置},nameGap: 15, //---坐标轴名称与轴线之间的距离//nameRotate:270,           //---坐标轴名字旋转axisLine: {//---坐标轴 轴线show: true, //---是否显示//------------------- 箭头 -------------------------symbol: ["none", "arrow"], //---是否显示轴线箭头symbolSize: [8, 8], //---箭头大小symbolOffset: [0, 7], //---箭头位置//------------------- 线 -------------------------lineStyle: {color: "#fff",width: 1,type: "solid",},},axisTick: {//---坐标轴 刻度show: true, //---是否显示inside: true, //---是否朝内lengt: 3, //---长度lineStyle: {color: "red", //---默认取轴线的颜色width: 1,type: "solid",},},axisLabel: {//---坐标轴 标签show: true, //---是否显示inside: false, //---是否朝内rotate: 0, //---旋转角度margin: 5, //---刻度标签与轴线之间的距离color: "red", //---默认取轴线的颜色},splitLine: {//---grid 区域中的分隔线show: false, //---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的lineStyle: {//color:'red',//width:1,//type:'solid',},},splitArea: {//--网格区域show: false, //---是否显示，默认false},data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",], //内容},//----------------------  y轴  ------------------------yAxis: {show: true, //---是否显示position: "left", //---y轴位置offset: 0, //---y轴相对于默认位置的偏移type: "value", //---轴类型，默认'category'name: "销量", //---轴名称nameLocation: "end", //---轴名称相对位置valuenameTextStyle: {//---坐标轴名称样式color: "#fff",padding: [5, 0, 0, 5], //---坐标轴名称相对位置},nameGap: 15, //---坐标轴名称与轴线之间的距离//nameRotate:270,           //---坐标轴名字旋转axisLine: {//---坐标轴 轴线show: true, //---是否显示//------------------- 箭头 -------------------------symbol: ["none", "arrow"], //---是否显示轴线箭头symbolSize: [8, 8], //---箭头大小symbolOffset: [0, 7], //---箭头位置//------------------- 线 -------------------------lineStyle: {color: "#fff",width: 1,type: "solid",},},axisTick: {//---坐标轴 刻度show: true, //---是否显示inside: true, //---是否朝内lengt: 3, //---长度lineStyle: {color: "red", //---默认取轴线的颜色width: 1,type: "solid",},},axisLabel: {//---坐标轴 标签show: true, //---是否显示inside: false, //---是否朝内rotate: 0, //---旋转角度margin: 8, //---刻度标签与轴线之间的距离color: "red", //---默认取轴线的颜色},splitLine: {//---grid 区域中的分隔线show: true, //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的lineStyle: {color: "#666",width: 1,type: "dashed", //---类型},},splitArea: {//--网格区域show: false, //---是否显示，默认false},},//------------ 内容数据  -----------------series: [{name: "销量", //---系列名称type: "bar", //---类型legendHoverLink: true, //---是否启用图例 hover 时的联动高亮label: {//---图形上的文本标签show: false,position: "insideTop", //---相对位置rotate: 0, //---旋转角度color: "#eee",},itemStyle: {//---图形形状color: "blue",barBorderRadius: [18, 18, 0, 0],},barWidth: "20", //---柱形宽度barCategoryGap: "20%", //---柱形间距data: [3020, 4800, 3600, 6050, 4320, 6200, 5050, 7200, 4521, 6700, 8000,5020,],},],};参考博客：https://www.cnblogs.com/zhangxiaoxia/p/9832201.html

Echarts柱状图常用属性相关推荐

柱状图---常用属性
怎么创建图表我就不再次展示了,上一篇博客有进行叙述,这次就直接写常用的属性 title:图表标题 legend:标记,也是我们常说的备注 data:显示的标记值 textStyle:文本样 ...
ECharts 图表常用属性参考 -- 雷达图Radar
color: ['#29C0F3', '#AA5BF2', '#F5C333', '#26C372', '#4474F5'], tooltip: {}, legend: {top: 48,// 类型包 ...
chart.js使用学习——柱状图（2：常用属性设置)
本文介绍柱状图常用属性及效果.柱状图中有部分常用属性与折线图用法相同,本文仅列出这些属性的简要说明,不再详细说明. base 设置图形绘制时的基准值,数值型,默认值为空,设置的值为数值轴上的值 ...
echarts 之常用的属性配置
目录 echarts 之常用的属性配置饼形图相关柱状图相关简单的柱状图多柱状图折线图 echarts 之常用的属性配置饼形图相关 series: [{type: "pie&quo ...
echarts柱状图
echarts柱状图图表实例 option = {xAxis: {name: '横坐标',type: 'category', // 设置为类目轴data: ['Mon', 'Tue', 'Wed', ...
【Echarts】ECharts中常用的标签
详细的标签详解 ECharts中常用的标签 ECharts中常用的标签 title标签 legend tooltip xAxis和yAxis 不同种类图的区别 ECharts中常用的标签 title标 ...
解决 echarts柱状图x轴数据隔一个显示
echarts柱状图x轴数据隔一个显示在显示一个柱状图的时候,x轴的数据是隔一个显示的,但是hover的时候却能显示出当前轴x轴的名称,如下图: 那就只能说明这个轴的名称太长了,所以导致它默认就隔一 ...
echarts柱状图改变标签的位置及柱状图颜色
echarts柱状图改变标签的位置(柱状图里面的数值位置)及柱状图颜色在 series里面改变label对象里面的label属性 import * as echarts from 'echarts' ...
Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记
Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记展示效果如下(主要记录一下如何在柱状体实体里面展示自定义的数据和在顶部展示自定义数据) 柱状图实体展示数据 series: [{ na ...
点击echarts柱状图动态改变数据项颜色样式
首先附上参考文章连接:https://blog.csdn.net/weixin_42870683/article/details/103528254添加链接描述今天来实现点击echarts柱状图,动 ...

Echarts柱状图常用属性

Echarts柱状图常用属性

Echarts柱状图常用属性相关推荐

最新文章

热门文章