今天才发现原来stack是带排序功能的，如果需要年份从大到小，把年份前加负数(stack: -2021)。
这样看来，第二种dataset方法意义不大了。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src='https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js'></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id='demo1' style='float: left; width: 900px; height:600px; margin-right: 50px; border: 1px solid #ddd;'></div>
<div id='demo2' style='float: left; width: 900px; height:600px; border: 1px solid #ddd;'></div>
<script type='text/javascript'>
// 基于准备好的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', icon: 'rect' },
{ name: '2021-Scope 2', icon: 'rect' },
{ name: '2021-Intensity', icon: 'circle' },
{ name: '2020-Scope 1', icon: 'rect' },
{ name: '2020-Scope 2', icon: 'rect' },
{ name: '2020-Intensity', icon: 'circle' },
{ name: '2019-Scope 1', icon: 'rect' },
{ name: '2019-Scope 2', icon: 'rect' },
{ name: '2019-Intensity', icon: 'circle' }
]
},
tooltip: {},
toolbox: {
feature: {}
},
xAxis: {
type: 'category',
data: ['Product 1', 'Product 2', 'Product 3'],
// inverse: true
},
yAxis: [
{
name: 'Tonne CO2e',
type: 'value',
position: 'left',
min: 0,
splitLine: { show: false },
},
{
name: 'Tonne CO2e/HKD\'000',
type: 'value',
position: 'right',
min: 0,
splitLine: { show: false },
}
],
series: [
{
name: '2021-Scope 1',
type: 'bar',
stack: '2021',
yAxisIndex: 0,
barWidth: '20%',
barMaxWidth: 40,
data: ['130.00', '150.00', '140.00'],
itemStyle: {
color: '#ffa929'
}
},
{
name: '2021-Scope 2',
type: 'bar',
stack: '2021',
yAxisIndex: 0,
barWidth: '20%',
barMaxWidth: 40,
data: ['125.00', '115.00', '118.00'],
itemStyle: {
color: '#ae6800'
}
},
{
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: '2020-Scope 1',
type: 'bar',
stack: '2020',
yAxisIndex: 0,
barWidth: '20 % ',
barMaxWidth: 40,
data: ['138.55', '665.75', '194.19'],
itemStyle: {
color: '#e86153'
}
},
{
name: '2020-Scope 2',
type: 'bar',
stack: '2020',
yAxisIndex: 0,
barWidth: '20 % ',
barMaxWidth: 40,
data: ['73.53', '387.91', '136.21'],
itemStyle: {
color: '#aa2417'
}
},
{
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: '2019-Scope 1',
type: 'bar',
stack: '2019',
yAxisIndex: 0,
barWidth: '20%',
barMaxWidth: 40,
data: ['140.15', '504.49', '169.65'],
itemStyle: {
color: '#e27588'
}
},
{
name: '2019-Scope 2',
type: 'bar',
stack: '2019',
yAxisIndex: 0,
barWidth: '20%',
barMaxWidth: 40,
data: ['90.26', '514.51', '669.21'],
itemStyle: {
color: '#a43e50'
}
}，
{
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'
}
}
]
}
// demo2
var option2 = {
legend: [
{
top: 10,
left: 'center',
data: ['2021-Scope 1', '2021-Scope 2', '2021-Intensity']
},
{
top: 35,
left: 'center',
data: ['2020-Scope 1', '2020-Scope 2', '2020-Intensity']
},
{
top: 60,
left: 'center',
data: ['2019-Scope 1', '2019-Scope 2', '2019-Intensity']
},
],
tooltip: {},
dataset: {
// 提供一份数据。
source: [
['product', '2021-Scope 1', '2021-Scope 2', '2021-Intensity', '2020-Scope 1', '2020-Scope 2', '2020-Intensity', '2019-Scope 1', '2019-Scope 2', '2019-Intensity'],
['Product 1', 140, 160, 180, 150, 120, 150, 120, 130, 110],
['Product 2', 125, 135, 140, 120, 140, 140, 110, 105, 140],
['Product 3', 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: 'bar',
yAxisIndex: 0,
stack: '2021',
barWidth: '20%',
barMaxWidth: 40,
},
{
type: 'bar',
yAxisIndex: 0,
stack: '2021',
barWidth: '20%',
barMaxWidth: 40,
},
{
type: 'scatter',
yAxisIndex: 1,
symbolOffset: ['700%', 0]
},
{
type: 'bar',
yAxisIndex: 0,
stack: '2020',
barWidth: '20%',
barMaxWidth: 40,
},
{
type: 'bar',
yAxisIndex: 0,
stack: '2020',
barWidth: '20%',
barMaxWidth: 40,
},
{
type: 'scatter',
yAxisIndex: 1,
symbolOffset: ['0%', 0]
},
{
type: 'bar',
yAxisIndex: 0,
stack: '2019',
barWidth: '20%',
barMaxWidth: 40,
},
{
type: 'bar',
yAxisIndex: 0,
stack: '2019',
barWidth: '20%',
barMaxWidth: 40,
},
{
type: 'scatter',
yAxisIndex: 1,
symbolOffset: ['-700%', 0]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option1);
myChart2.setOption(option2);
</script>
</body>
</html>
网友评论