echarts 柱状图

echarts 柱状图

option = {grid:{top:"30",left:"30",right:"30",bottom:"20"},// ----  标题 -----// title: {//     text: '主标题',//     textStyle: {//         color: 'red'//     },//     subtext: '副标题',//     subtextStyle: {//         color: 'blue'//     },//     padding: [0, 0, 10, 100]  // 位置// },// ---- legend ----legend: {type: 'plain',  // 图列类型，默认为 'plain'top: '0%',  // 图列相对容器的位置 topbottomleftrightright: '1%',selected: {'基础评分': true  // 图列选择，图形加载出来会显示选择的图列，默认为true},textStyle: {  // 图列内容样式color: '#fff',  // 字体颜色backgroundColor: 'black'  // 字体背景色},tooltip: {  // 图列提示框，默认不显示show: true,color: 'red'},data: [   // 图列内容{name: '基础评分',icon: 'circle',textStyle: {color: '#fff',// 单独设置某一个图列的颜色backgroundColor: 'transparent' // 单独设置某一个图列的字体背景色}},{name: '履职评分',icon: 'circle',textStyle: {color: '#fff',  // 单独设置某一个图列的颜色backgroundColor: 'transparent' // 单独设置某一个图列的字体背景色}},{name: '监控评分',icon: 'circle',textStyle: {color: '#fff',  // 单独设置某一个图列的颜色backgroundColor: 'transparent' // 单独设置某一个图列的字体背景色}},]},// ---  提示框 ----tooltip: {show: true,   // 是否显示提示框，默认为truetrigger: 'item', // 数据项图形触发axisPointer: {   // 指示样式type: 'shadow',axis: 'auto'},padding: 5,textStyle: {   // 提示框内容的样式color: '#fff'}},// ---- gird区域 ---gird: {show: false,    // 是否显示直角坐标系网格top: 0,  // 相对位置 topbottomleftrightcontainLabel: false, // gird 区域是否包含坐标轴的刻度标签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: 'rgba(255,255,255,1)',padding: [5, 0, 0, -5]},nameGap: 15, // 坐标轴名称与轴线之间的距离nameRotate: 0,  // 坐标轴名字旋转axisLine: {       // 坐标轴 轴线show: false,  // 是否显示// symbol: ['none', 'arrow'],  // 是否显示轴线箭头// symbolSize: [8, 8], // 箭头大小// symbolOffset: [0, 7],  // 箭头位置// // ------   线 ---------// lineStyle: {//     color: 'blue',//     width: 1,//     type: 'solid'// }},axisTick: {    // 坐标轴 刻度show: false,  // 是否显示inside: true,  // 是否朝内length: 3,     // 长度lineStyle: {   // 默认取轴线的样式color: 'rgba(255,255,255,1)',width: 1,type: 'solid'}},axisLabel: {    // 坐标轴标签show: true,  // 是否显示inside: false, // 是否朝内rotate: 0, // 旋转角度margin: 5, // 刻度标签与轴线之间的距离color: 'rgba(255,255,255,1)',},splitLine: {    // gird区域中的分割线show: false,  // 是否显示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: false,  // 是否显示//  -----   箭头 -----// symbol: ['none', 'arrow'],  // 是否显示轴线箭头// symbolSize: [8, 8],  // 箭头大小// symbolOffset: [0, 7], // 箭头位置//// // ----- 线 -------// lineStyle: {//     color: 'blue',//     width: 1,//     type: 'solid'// }},axisTick: {      // 坐标轴的刻度show: false,    // 是否显示inside: true,  // 是否朝内length: 3,      // 长度lineStyle: {color: 'rgba(255,255,255,1)',width: 1,type: 'solid'}},axisLabel: {      // 坐标轴的标签show: true,    // 是否显示inside: false,  // 是否朝内rotate: 0,     // 旋转角度margin: 8,     // 刻度标签与轴线之间的距离color: 'rgba(255,255,255,1)',},splitLine: {    // gird 区域中的分割线show: false,   // 是否显示lineStyle: {color: 'rgba(255,255,255,1)',width: 1,type: 'solid'}},splitArea: {     // 网格区域show: false   // 是否显示，默认为false}},//  -------   内容数据 -------series: [{name: '基础评分',      // 序列名称type: 'bar',      // 类型legendHoverLink: true,  // 是否启用图列 hover 时的联动高亮label: {   // 图形上的文本标签show: false,position: 'insideTop', // 相对位置rotate: 0,  // 旋转角度color: '#eee'},itemStyle: {    // 图形的形状color: 'rgb(35,145,255)',barBorderRadius: [18, 18, 18 ,18]},barWidth: 15,  // 柱形的宽度barCategoryGap: '15%',  // 柱形的间距data: [31, 40, 12, 45, 31, 23, 24, 20, 12, 40, 30, 34],},{name: '履职评分',      // 序列名称type: 'bar',      // 类型legendHoverLink: true,  // 是否启用图列 hover 时的联动高亮label: {   // 图形上的文本标签show: false,position: 'insideTop', // 相对位置rotate: 0,  // 旋转角度color: '#eee'},itemStyle: {    // 图形的形状color: 'rgb(214,169,56)',barBorderRadius: [18, 18, 18 ,18]},barWidth: 15,  // 柱形的宽度barCategoryGap: '15%',  // 柱形的间距data: [21, 40, 34, 40, 43, 34, 40, 21, 23, 32, 40, 21],},{name: '监控评分',      // 序列名称type: 'bar',      // 类型legendHoverLink: true,  // 是否启用图列 hover 时的联动高亮label: {   // 图形上的文本标签show: false,position: 'insideTop', // 相对位置rotate: 0,  // 旋转角度color: '#eee'},itemStyle: {    // 图形的形状color: 'red',barBorderRadius: [18, 18, 18 ,18]},barWidth: 15,  // 柱形的宽度barCategoryGap: '15%',  // 柱形的间距data: [30, 40, 42, 40, 43, 34, 40, 32, 40, 23, 40, 40],}]};

option = {color: ["#238FFE","#F45E23"],tooltip: {formatter(a){return a.name+''+a.data+""}},grid: {containLabel: true,top:'10%',left:'2%',bottom:'7%',right:'4%'},legend: {show: true,x: '75%',itemWidth: 45,itemHeight: 18,textStyle: {color: '#fff',},data:['故障趋势','预警趋势']},xAxis: [{type: "category",data: ["一月", "二月", "三月","四月", "五月", "六月","七月", "八月", "九月","十月", "十一月", "十二月"],axisTick: {show: false,alignWithLabel: true},nameTextStyle: {color: "#82b0ec"},axisLine: {show: false,},axisLabel: {textStyle: {color: "#82b0ec"}}}],yAxis: [{type: "value",axisLabel: {textStyle: {fontSize: 14,color: "#82b0ec"},formatter: "{value}"},splitLine: {show: false,},axisTick: {show: false},axisLine: {show: false}}],series: [{name: "故障趋势",type: "pictorialBar",symbolSize: [20, 10],symbolOffset: [-13, -5],symbolPosition: "end",z: 12,data: [60, 70, 80, 90, 60, 70, 80, 90, 60, 70, 80, 90]},{name: "预警趋势",type: "pictorialBar",symbolSize: [20, 10],symbolOffset: [13, -5],symbolPosition: "end",z: 12,data: [60, 70, 80, 90, 60, 70, 80, 90, 60, 70, 80, 90]},{name: "故障趋势",type: "pictorialBar",symbolSize: [20, 10],symbolOffset: [-13, 5],z: 12,data: [60, 70, 80, 90, 60, 70, 80, 90, 60, 70, 80, 90]},{name: "预警趋势",type: "pictorialBar",symbolSize: [20, 10],symbolOffset: [13, 5],z: 12,data: [60, 70, 80, 90, 60, 70, 80, 90, 60, 70, 80, 90]},{name: "故障趋势",type: "bar",itemStyle: {normal: {opacity: 0.7}},barWidth: "20",data: [60, 70, 80, 90, 60, 70, 80, 90, 60, 70, 80, 90],markLine: {silent: true,symbol: "none",label: {position: "middle",formatter: "{b}"},}},{name: "预警趋势",type: "bar",itemStyle: {normal: {opacity: 0.7}},barWidth: "20",data: [60, 70, 80, 90, 60, 70, 80, 90, 60, 70, 80, 90],markLine: {silent: true,symbol: "none",label: {position: "middle",formatter: "{b}"},}}]}

option = {textStyle: {color: "#02E8FF",fontSize: 14},legend: {top: 10,itemWidth: 8,itemHeight: 8,icon: "circle",left: "center",padding: 0,textStyle: {color: "#c0c3cd",fontSize: 14,padding: [2, 0, 0, 0]}},color: ["#63caff", "#63caff", "#11498B", "#11498B", "#11498B"],grid: {containLabel: true,left: 15,right: 20,bottom: 20,top: 30},xAxis: {nameTextStyle: {color: "#02E8FF",padding: [0, 0, -10, 0],fontSize: 14},axisLabel: {color: "#02E8FF",fontSize: 14,interval: 0},axisTick: {lineStyle: {color: "#384267",width: 1},show: false},splitLine: {show: false},axisLine: {lineStyle: {color: "#384267",width: 1,type: "dashed"},show: false},data: ["鄂城区", "华容区", "葛店区", "临空区", "梁子湖区"],type: "category"},yAxis: {nameTextStyle: {color: "#02E8FF",padding: [0, 0, -10, 0],fontSize: 14},axisLabel: {show: false,color: "#02E8FF",fontSize: 14},axisTick: {show: false},splitLine: {show: false,},axisLine: {show: false},name: ""},series: [{data: [180, 200, 160, 100, 140],type: "bar",barMaxWidth: "auto",barWidth: 30,itemStyle: {normal: {color: function (params) {//自定义颜色var colorList = ['#65C6E3', '#4366F3', '#7342E7', '#DA39F2', '#F2A139'];return colorList[params.dataIndex]}},/* color: {x: 0,y: 0,x2: 0,y2: 1,type: "linear",global: false,colorStops: [{offset: 0,color: "#0b9eff"}, {offset: 1,color: "#63caff"}]}*/},label: {show: false,}}, {data: [1, 1, 1, 1, 1, 1, 1, 1],type: "pictorialBar",barMaxWidth: "20",symbol: "diamond",symbolOffset: [0, "50%"],symbolSize: [30, 15],itemStyle: {normal: {color: function (params) {//自定义颜色var colorList = ['#65C6E3', '#4366F3', '#7342E7', '#DA39F2', '#F2A139'];return colorList[params.dataIndex]}},}}, {data: [180, 200, 160, 100, 140],type: "pictorialBar",barMaxWidth: "20",symbolPosition: "end",symbol: "diamond",symbolOffset: [0, "-50%"],symbolSize: [30, 12],zlevel: 2,itemStyle: {normal: {color: function (params) {//自定义颜色var colorList = ['#65C6E3', '#4366F3', '#7342E7', '#DA39F2', '#F2A139'];return colorList[params.dataIndex]}},}}, {data: [200, 200, 200, 200, 200, 200, 200, 200],type: "bar",barMaxWidth: "auto",barWidth: 30,barGap: "-100%",zlevel: -1,itemStyle: {normal: {color: "#11498B"},}}, {data: [1, 1, 1, 1, 1, 1, 1, 1],type: "pictorialBar",barMaxWidth: "20",symbol: "diamond",symbolOffset: [0, "50%"],symbolSize: [30, 15],zlevel: -2,itemStyle: {normal: {color: "#11498B"},}}, {data: [200, 200, 200, 200, 200, 200, 200, 200],type: "pictorialBar",barMaxWidth: "20",symbolPosition: "end",symbol: "diamond",symbolOffset: [0, "-50%"],symbolSize: [30, 12],zlevel: -1,itemStyle: {normal: {color: "#11498B"},}}],tooltip: {formatter(a) {return a.name + ':' + a.data + ""}}}