<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="containerZ" style="height: 340px"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<script type="text/javascript">
var domZ = document.getElementById("containerZ");
var myChartZ = echarts.init(domZ);
var app = {};
var optionZ;
optionZ = {
title: {
text: '折線圖堆疊',
left: '10%' //可以定義
},
legend: {
right: '10%'
},
tooltip: {},
dataset: {
dimensions: ['product', '任務總金額', '服務總金額'],
source: [
{product: '江西分平台', '任務總金額': 43.3, '服務總金額': 93.7},
{product: '湖南分平台', '任務總金額': 83.1, '服務總金額': 55.1},
{product: '萊西分平台', '任務總金額': 86.4, '服務總金額': 82.5},
]
},
xAxis: {type: 'category'},
yAxis: {},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{
type: 'bar',
color: '#169687' //可以改變顔色
},
{
type: 'bar',
color: '#FCB72B' //可以改變顔色
}
]
};
if (optionZ && typeof optionZ === 'object') {
myChartZ.setOption(optionZ);
}
</script>
</body>
</html>
和數組配合使用-處理接口資料
https://blog.csdn.net/qq_38881495/article/details/116716612?spm=1001.2014.3001.5501
echarts柱狀圖demo整理 
![echarts 實作漸變的儀表盤[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)