1.先主备容器
<div class="content">
<!-- <div style="width: 100%; height: 100%" ref="chartArea"></div> -->
<div class="echa" id="mbyCh6artnn"></div>
</div>
.content {
width: 100%;
height: 73%;
}
.echa {
height: 100%;
width: 100%;
}
2.渲染
// 构建echarts private myChartNt1: any = null
this.myChartNt1 = echarts.init(document.getElementById('mbyCh6artnn'))
var option = {
// backgroundColor: '#000E1A', //背景色
title: {
// subtext: ''副标题
},
tooltip: {
trigger: 'item',
formatter: function(parms) {
return parms.marker + ' ' + parms.name + '：' + parms.value + ''
}
},
grid: {
left: '3%',
right: '0%',
top: '12%',
bottom: '0%',
containLabel: true,
show: true
},
legend: {
selectedMode: false,
top: '0',
right: '0',
textStyle: {
color: '#ffffff',
fontSize: 10
},
data: ['计划数', '完成数']
},
xAxis: [
{
data: this.sourceData.length > 0 ? this.sourceData : ['1#码头二氧化碳'],
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 12
},
margin: 20 //刻度标签与轴线之间的距离。
},
axisLine: {
show: true, //不显示x轴
lineStyle: {
color: '#acabab'
}
},
axisTick: {
show: true //不显示刻度
},
splitLine: {
show: true,
lineStyle: {
color: '#787e92'
}
}
}
],
yAxis: [
{
name: '各油品提货量(T)',
nameTextStyle: {
fontSize: 12,
align: 'left',
fontWeight: 'bold'
},
nameGap: 10,
splitLine: {
show: true,
lineStyle: {
color: '#787e92'
}
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#acabab',
type: 'solid'
// dashed 虚线
}
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 12
}
}
// max: 180
}
],
series: [
// planValue
{
name: '计划数',
label: {
offset: [0, -10],
show: false, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: '#5392FF',
fontSize: 12
},
data: this.planValueData.length > 0 ? this.planValueData : [0]
},
type: 'bar', // 柱状图
barWidth: 5, // 柱条的宽度,不设时自适应
barGap: '-5%', // 柱子与柱子之间的距离
itemStyle: {
// 图形样式
// color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
// 下面就是使用线性渐变
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0, // 0%处的颜色
color: 'rgba(0, 188, 215, 1)'
},
{
offset: 1, // 100%处的颜色
color: 'rgba(0, 223, 255, 1)'
}
]
}
},
data: this.planValueData.length > 0 ? this.planValueData : [0]
},
{
name: '计划数',
type: 'bar', // 柱状图
barWidth: 5, // 柱条的宽度,不设时自适应
barGap: '-5%', // 柱子与柱子之间的距离
itemStyle: {
// 图形样式
// color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
// 下面就是使用线性渐变
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0, // 0%处的颜色
color: 'rgba(0, 188, 215, 1)'
},
{
offset: 1, // 100%处的颜色
color: 'rgba(0, 223, 255, 1)'
}
]
}
},
data: this.planValueData.length > 0 ? this.planValueData : [0]
},
{
type: 'pictorialBar',
// 负左正右，正下负上
symbolOffset: [-5, -5],
symbol: 'diamond',
z: 12,
symbolSize: 10,
symbolPosition: 'end',
itemStyle: {
color: 'rgba(119, 238, 255, 1)'
},
data: this.planValueData.length > 0 ? this.planValueData : [0]
},
// finishValue
{
name: '完成数',
label: {
offset: [0, -3],
show: false, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: '#5392FF',
fontSize: 12
}
},
type: 'bar', // 柱状图
barWidth: 5, // 柱条的宽度,不设时自适应
barGap: '0%', // 柱子与柱子之间的距离
itemStyle: {
// 图形样式
// color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
// 下面就是使用线性渐变
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0, // 0%处的颜色
color: '#455DFF'
},
{
offset: 1, // 100%处的颜色
color: '#5392FF'
}
]
}
},
data: this.finishValue.length > 0 ? this.finishValue : [0]
},
{
name: '完成数',
type: 'bar', // 柱状图
barWidth: 5, // 柱条的宽度,不设时自适应
barGap: '-5%', // 柱子与柱子之间的距离
itemStyle: {
// 图形样式
// color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
// 下面就是使用线性渐变
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0, // 0%处的颜色
color: '#334BF2'
},
{
offset: 1, // 100%处的颜色
color: '#5392FF'
}
]
}
},
data: this.finishValue.length > 0 ? this.finishValue : [0]
},
{
type: 'pictorialBar',
symbolOffset: [5, -5],
symbol: 'diamond',
z: 12,
symbolSize: 10,
symbolPosition: 'end',
itemStyle: {
color: '#7385FF'
},
data: this.finishValue.length > 0 ? this.finishValue : [0]
}
]
}
this.myChartNt1.setOption(option)
// 设置该 chart 的 resize 方法
window.addEventListener('resize', this.myChartNt1.resize)