<!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=)