// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('demo1'));
var myChart2 = echarts.init(document.getElementById('demo2'));
// demo 1
var option1 = {
title: {
text: '',
textStyle: {
color: '#464646', fontWeight: 'normal', fontSize: 18
}
},
grid: {
top: 140, right: 20, bottom: 0, left: 20, containLabel: true
},
legend: {
top: 30,
left: 'center',
textStyle: {
fontSize: 14,
padding: [0, 10, 0, 0]
},
data: [
{ name: '2021-Scope 1-Direct emissions and removals', icon: 'rect' },
{ name: '2021-Scope 2 – Energy indirect emissions', icon: 'rect' },
{ name: '2021-Intensity', icon: 'circle' },
{ name: '2020-Scope 1-Direct emissions and removals', icon: 'rect' },
{ name: '2020-Scope 2 – Energy indirect emissions', icon: 'rect' },
{ name: '2020-Intensity', icon: 'circle' },
{ name: '2019-Scope 1-Direct emissions and removals', icon: 'rect' },
{ name: '2019-Scope 2 – Energy indirect emissions', icon: 'rect' },
{ name: '2019-Intensity', icon: 'circle' }
]
},
tooltip: {},
toolbox: {
feature: {}
},
xAxis: {
type: 'category',
data: ['Transportation and logistics', 'Engineering and construction', 'Real estate'], axisLabel: { fontSize: 14 },
// inverse: true
},
yAxis: [
{
name: 'Tonne CO2e',
type: 'value',
position: 'left',
min: 0,
splitLine: { show: false },
axisLabel: { fontSize: 12 },
nameTextStyle: { fontSize: 13, align: 'center' }
},
{
name: 'Tonne CO2e/HKD\'000',
type: 'value',
position: 'right',
min: 0,
splitLine: { show: false },
axisLabel: { fontSize: 14 },
nameTextStyle: { fontSize: 13, align: 'center' }
}
],
series: [
{
name: '2021-Intensity',
type: 'scatter',
stack: null,
yAxisIndex: 1,
data: [
{ value: '10', symbolOffset: ['-800%', 0] },
{ value: '20', symbolOffset: ['-800%', 0] },
{ value: '30', symbolOffset: ['-800%', 0] }
],
itemStyle: {
color: '#9013fe'
}
},
{
name: '2021-Scope 1-Direct emissions and removals',
type: 'bar',
stack: '2021',
yAxisIndex: 0,
barWidth: '20%',
barMaxWidth: 80,
data: ['130.00', '150.00', '140.00'],
itemStyle: {
color: '#ffa929'
}
},
{
name: '2021-Scope 2 – Energy indirect emissions',
type: 'bar',
stack: '2021',
yAxisIndex: 0,
barWidth: '20%',
barMaxWidth: 80,
data: ['125.00', '115.00', '118.00'],
itemStyle: {
color: '#ae6800'
}
},
{
name: '2020-Intensity',
type: 'scatter',
stack: null, yAxisIndex: 1,
data: [
{ value: '15', symbolOffset: ['0%', 0] },
{ value: '25', symbolOffset: ['0%', 0] },
{ value: '35', symbolOffset: ['0%', 0] }
],
itemStyle: {
color: '#0089eb'
}
},
{
name: '2020-Scope 1-Direct emissions and removals',
type: 'bar',
stack: '2020',
yAxisIndex: 0,
barWidth: '20 % ',
barMaxWidth: 80,
data: ['138.55', '665.75', '194.19'],
itemStyle: {
color: '#e86153'
}
},
{
name: '2020-Scope 2 – Energy indirect emissions',
type: 'bar',
stack: '2020',
yAxisIndex: 0,
barWidth: '20 % ',
barMaxWidth: 80,
data: ['73.53', '387.91', '136.21'],
itemStyle: {
color: '#aa2417'
}
},
{
name: '2019-Intensity',
type: 'scatter',
stack: null,
yAxisIndex: 1,
data: [
{ value: '125', symbolOffset: ['800%', 0] },
{ value: '130', symbolOffset: ['800%', 0] },
{ value: '145', symbolOffset: ['800%', 0] }
],
itemStyle: {
color: '#4eb523'
}
},
{
name: '2019-Scope 1-Direct emissions and removals',
type: 'bar',
stack: '2019',
yAxisIndex: 0,
barWidth: '20%',
barMaxWidth: 80,
data: ['140.15', '504.49', '169.65'],
itemStyle: {
color: '#e27588'
}
},
{
name: '2019-Scope 2 – Energy indirect emissions',
type: 'bar',
stack: '2019',
yAxisIndex: 0,
barWidth: '20%',
barMaxWidth: 80,
data: ['90.26', '514.51', '669.21'],
itemStyle: {
color: '#a43e50'
}
}
]
}
// demo2
var option2 = {
legend: {
top: 30,
left: 'center',
padding: [0, 40],
textStyle: {
fontSize: 14,
padding: [0, 10, 0, 0]
}
},
tooltip: {},
dataset: {
// 提供一份数据。
source: [
['product', '2021-Scope 1-Direct emissions and removals', '2021-Scope 2 – Energy indirect emissions', '2021-Intensity', '2020-Scope 1-Direct emissions and removals', '2020-Scope 2 – Energy indirect emissions', '2020-Intensity', '2019-Scope 1-Direct emissions and removals', '2019-Scope 2 – Energy indirect emissions', '2019-Intensity'],
['Transportation and logistics', 140, 160, 180, 150, 120, 150, 120, 130, 110],
['Engineering and construction', 125, 135, 140, 120, 140, 140, 110, 105, 140],
['Real estate', 190, 210, 160, 130, 150, 170, 120, 100, 130]
]
},
// 声明一个 X 轴，类目轴(category)。默认情况下，类目轴对应到 dataset 第一列。
xAxis: { type: 'category' },
// 声明一个 Y 轴，数值轴。
yAxis: [
{
name: 'Tonne CO2e',
type: 'value',
position: 'left',
min: 0,
splitLine: { show: false },
axisLabel: { fontSize: 12 },
nameTextStyle: { fontSize: 13, align: 'center' }
},
{
name: 'Tonne CO2e/HKD\'000',
type: 'value',
position: 'right',
min: 0,
splitLine: { show: false },
axisLabel: { fontSize: 14 },
nameTextStyle: { fontSize: 13, align: 'center' }
}
],
grid: {
top: 140, right: 20, bottom: 0, left: 20, containLabel: true
},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: [
{
type: 'scatter',
yAxisIndex: 1,
symbolOffset: ['700%', 0]
},
{
type: 'bar',
yAxisIndex: 0,
stack: '2021',
barWidth: '20%',
barMaxWidth: 80,
},
{
type: 'bar',
yAxisIndex: 0,
stack: '2021',
barWidth: '20%',
barMaxWidth: 80,
},
{
type: 'scatter',
yAxisIndex: 1,
symbolOffset: ['0%', 0]
},
{
type: 'bar',
yAxisIndex: 0,
stack: '2020',
barWidth: '20%',
barMaxWidth: 80,
},
{
type: 'bar',
yAxisIndex: 0,
stack: '2020',
barWidth: '20%',
barMaxWidth: 80,
},
{
type: 'scatter',
yAxisIndex: 1,
symbolOffset: ['-700%', 0]
},
{
type: 'bar',
yAxisIndex: 0,
stack: '2019',
barWidth: '20%',
barMaxWidth: 80,
},
{
type: 'bar',
yAxisIndex: 0,
stack: '2019',
barWidth: '20%',
barMaxWidth: 80,
}
]
};
option2.series.reverse()
console.log(option2)
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option1);
myChart2.setOption(option2);