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%', // 图列相对容器的位置 top\bottom\left\right
right: '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, // 是否显示提示框，默认为true
trigger: 'item', // 数据项图形触发
axisPointer: { // 指示样式
type: 'shadow',
axis: 'auto'
},
padding: 5,
textStyle: { // 提示框内容的样式
color: '#fff'
}
},
// ---- gird区域 ---
gird: {
show: false, // 是否显示直角坐标系网格
top: 0, // 相对位置 top\bottom\left\right
containLabel: 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', // 轴名称相对位置value
nameTextStyle: { // 坐标轴名称样式
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 + ""
}
}
}
扫一扫
7890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
