var mychart = echarts.init(document.getElementById("mychart6"))
var labelleft = {
normal: {
position: 'left'
}
};
var labelRight = {
normal: {
position: 'right'
}
};
//负轴样式
var itemStyle1 = {
normal: {
color: new echarts.graphic.LinearGradient(
1,
0,
0,
0,
[
{
offset: 0,
color: '#9BE5E5' // 0% 处的颜色
},
{
offset: 1,
color: '#37CBCB' // 100% 处的颜色
}
],
false
),
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: '#687284',
fontSize: 9
}
}
}
};
//正轴样式
var itemStyle2 = {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: '#9BE5E5' // 0% 处的颜色
},
{
offset: 1,
color: '#37CBCB' // 100% 处的颜色
}
],
false
),
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: '#687284',
fontSize: 9
}
}
}
};
var yData = ['优', '良', '中', '差']
var sData = [
{ value: -0.07, label: labelleft, itemStyle: itemStyle1 },
{
value: -0.09,
label: labelleft,
itemStyle: itemStyle1
},
{
value: 0.2,
label: labelRight,
itemStyle: itemStyle2
},
{
value: 0.44,
label: labelRight,
itemStyle: itemStyle2
}
]
if (sData.length == 0) {
this.myChartArr[5].mychart.setOption(getNoDataEchart())
return
}
let option = {
title: {
text: '环比值:%',
show: true,
textStyle: {
color: '#333',
fontWeight:'normal',
fontSize: 12
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
show: false,
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
top: 30,
left: 20,
bottom: 30,
right: 20,
show: false
},
xAxis: {
type: 'value',
axisLine: { show: false },
axisLabel: { show: true, color: 'rgba(153, 153, 153, 1)' },
axisTick: { show: false },
splitLine: {
show: true,
lineStyle: {
color: 'rgba(220, 223, 230, 1)'
}
},
position: 'left'
},
yAxis: {
type: 'category',
// name: '环比值:%',
// nameLocation: 'end',
show: true,
position: 'left',
axisLine: { show: false },
axisLabel: { show: true, color: 'rgba(153, 153, 153, 1)' },
axisTick: { show: false },
splitLine: {
show: true,
lineStyle: {
color: 'rgba(220, 223, 230, 1)'
}
},
data: yData
},
series: [
{
name: '园区评价等级环比分析',
type: 'bar',
stack: '总量',
barWidth: 30,
data: sData
}
]
};
mychart.setOption(option)
var mychart = echarts.init(document.getElementById("mychart7"))
var xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
var data = [3, -6, 1, 6, -4, 3, -2];
var sdd = [];
var labeltop = {
normal: {
position: 'top'
}
};
var labelbottom = {
normal: {
position: 'bottom'
}
};
//负轴样式
var itemStyle1 = {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#4ECB73' // 0% 处的颜色
},
{
offset: 1,
color: '#A7E5B9' // 100% 处的颜色
}
]),
normal: {
//这里设置柱形图圆角 [左上角,右上角,右下角,左下角]
barBorderRadius: [0, 0, 4, 4]
},
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: '#687284',
fontSize: 9
}
}
}
};
//正轴样式
var itemStyle2 = {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
// 四个数字分别对应 数组中颜色的开始位置,分别为 右,下,左,上。例如(1,0,0,0 )代表从右边开始渐
// 变。offset取值为0~1,0代表开始时的颜色,1代表结束时的颜色,柱子表现为这两种颜色的渐变。
offset: 0,
color: '#4ECB73'
},
{
offset: 1,
color: '#A7E5B9'
}
]),
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: '#687284',
fontSize: 9
}
}
}
};
data.forEach((v, i) => {
if (v < 0) {
sdd.push({
value: v,
label: labelbottom,
itemStyle: itemStyle1
})
} else {
sdd.push({
value: v,
label: labeltop,
itemStyle: itemStyle2
})
}
});
if(sdd.length == 0) {
this.myChartArr[6].mychart.setOption(getNoDataEchart())
return
}
var option = {
tooltip: {
trigger: 'item'
},
xAxis: {
type: 'category',
data: xData,
axisTick: {
show: false //去除刻度线
},
axisLine: {
show: true,
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#000'
}
}
},
yAxis: {
type: 'value',
name: '环比值:%',
splitLine: {
lineStyle: {
type: 'dashed'
},
show: true
},
axisTick: {
show: false //去除刻度线
},
axisLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#000'
}
}
},
grid: {
top: 30,
left: 50,
right: 20,
bottom: 50
},
dataZoom: [
{
xAxisIndex: 0, //这里是从X轴的0刻度开始
show: true, //是否显示滑动条,不影响使用
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 0,
end: 100,
height: 16, //组件高度
bottom: 10,
zoomLock: false,
showDataShadow: false, //是否显示数据阴影 默认auto
realtime: true, //是否实时更新
showDetail: false,
brushSelect: false, //刷选功能,设为false可以防止拖动条长度改变 ************(这是一个坑)
},
],
series: [
{
data: sdd,
type: 'bar',
barWidth: 30,
showBackground: false,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)',
borderWidth: 32,
borderType: 'solid'
},
}
]
};
mychart.setOption(option)
window.addEventListener('resize',() => {
mychart.resize()
})