1.效果图
2.说明
2.1 Echarts引用关键在于容器的创建
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>***</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<!-- 引入主题 -->
<script src="https://www.runoob.com/static/js/wonderland.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
*****************
*****************
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
2.2 Echarts多个图表的引用关键在于getElementById(‘main’)的命名
div标签中id="main"定义的是它的id
例如<div id="main1.2" class="box"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main1.2'));
参考代码：
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:600PX;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
********************
********************
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
<div id="main1.1" class="box"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main1.1'));
****************
****************
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
<div id="main1.2" class="box"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main1.2'));
*****************
*****************
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
3.html在线运行传送门
4.源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引用bootstrap4-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>2021年-诺乐智能科技-售后月结</title>
<style>
.box{
width: 100%;
height:560PX;
}
.boxl{
width: 600px;
height: 400px;
float: left;
}
.boxmax{
width: 100%;
height: 800px;
background-color:skyblue;
}
body{ min-height: 100%; background: linear-gradient(#FFFAD0,#ffffff); }
/* .boxlift{
width: 600px;
height: 300px;
float: left;
}
.boxcenter{
width: 600px;
height: 300px;
float: center;
}
.boxright{
width: 600px;
height: 300px;
float: right;
} */
</style>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<!-- 引入主题 -->
<script src="https://www.runoob.com/static/js/wonderland.js"></script>
</head>
<body>
<div class="container">
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">1月</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">2月</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu3">3月</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu4">4月</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu5">5月</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu6">6月</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu7">7月</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu8">8月</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu9">9月</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu10">10月</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu11">11月</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu12">12月</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<div id="main0.1" class="box"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main0.1'));
var dataAxis = ['1月', '2月', '3月', '4月','5月', '6月', '7月', '8月','9月', '10月', '11月', '12月'];
var data = [128,91,172,90,0,0,0,0,0,0,0,0];
var yMax = 180;
var dataShadow = [];
for (var i = 0; i < data.length; i++) {
dataShadow.push(yMax);
}
option = {
title: {
subtext: '2021年售后维修数量概况统计'
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
xAxis: {
data: dataAxis,
axisLabel: {
inside: true,
textStyle: {
color: '#ff4d00'//朱红https://encycolorpedia.cn/fedcbc
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#ff73b3'//尖晶石红https://encycolorpedia.cn/fedcbc
}
}
},
dataZoom: [
{
type: 'inside'
}
],
series: [
{ // For shadow
name:'上限',
type: 'line',//line or bar 上限显示柱状还是线
itemStyle: {
color: 'rgba(0,0,0,0.05)'
},
barGap: '-100%',
barCategoryGap: '40%',
data: dataShadow,
animation: false
},
{
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#bbb'},//原色为83bff6，改为bbb
{offset: 0.5, color: '#bfb'},//原色为188df0，改为bfb
{offset: 1, color: '#188df0'}
]
)
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#2378f7'},
{offset: 0.7, color: '#2378f7'},
{offset: 1, color: '#83bff6'}
]
)
}
},
data: data
}
]
};
// Enable data zoom when user click bar.
var zoomSize = 6;
myChart.on('click', function (params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
myChart.dispatchAction({
type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
});
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main1.1" style="width: 1100PX;height:560PX;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main1.1'));
var option = {
title: {
text: '诺乐智能科技-1月',
subtext: '大概率问题-所占比例饼图',
left: ''
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
data: ['测试正常', '特殊要求', '以旧换新', '匹配问题',
'程序问题', '烧坏报废', '使用不当', '器件不良',
'其他']
},
series: [
{
name: '访问来源',
type: 'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
position: 'inner',
fontSize: 14,
},
labelLine: {
show: false
},
data: [
{value: 28, name: '0-12个月', selected: true},
{value: 21, name: '13-24个月'},
{value: 30, name: '25个月以上'},
{value: 12, name: '未知'}
]
},
{
name: '大致类型',
type: 'pie',
radius: ['45%', '60%'],
labelLine: {
length: 30,
},
label: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
backgroundColor: '#F6F8FC',
borderColor: '#8C8D8E',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#6E7079',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#8C8D8E',
width: '100%',
borderWidth: 1,
height: 0
},
b: {
color: '#4C5058',
fontSize: 14,
fontWeight: 'bold',
lineHeight: 33
},
per: {
color: '#fff',
backgroundColor: '#4C5058',
padding: [3, 4],
borderRadius: 4
}
}
},
data: [
{value: 14, name: '测试正常'},
{value: 3, name: '特殊要求'},
{value: 4, name: '以旧换新'},
{value: 5, name: '匹配问题'},
{value: 1, name: '程序问题'},
{value: 1, name: '烧坏报废'},
{value: 35, name: '使用不当'},
{value: 54, name: '器件不良'},
{value: 11, name: '其他'},
]
}
]
};
/*
注：大概率事件进行区分，小概率事件归类其他，仅注明，不在图表中详细赘述。
*/
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main1.2" style="width: 1100PX;height:560PX;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main1.2'));
var option = {
title: {
text: '诺乐智能科技-2月',
subtext: '大概率问题-所占比例饼图',
left: ''
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
data: ['测试正常', '用户买新', '以旧换新', '退货',
'程序问题', '烧坏报废', '使用不当', '器件不良',
'其他']
},
series: [
{
name: '访问来源',
type: 'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
position: 'inner',
fontSize: 14,
},
labelLine: {
show: false
},
data: [
{value: 28, name: '0-12个月', selected: true},
{value: 21, name: '13-24个月'},
{value: 30, name: '25个月以上'},
{value: 12, name: '未知'}
]
},
{
name: '大致类型',
type: 'pie',
radius: ['45%', '60%'],
labelLine: {
length: 30,
},
label: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
backgroundColor: '#F6F8FC',
borderColor: '#8C8D8E',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#6E7079',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#8C8D8E',
width: '100%',
borderWidth: 1,
height: 0
},
b: {
color: '#4C5058',
fontSize: 14,
fontWeight: 'bold',
lineHeight: 33
},
per: {
color: '#fff',
backgroundColor: '#4C5058',
padding: [3, 4],
borderRadius: 4
}
}
},
data: [
{value: 6, name: '测试正常'},
{value: 3, name: '用户买新'},
{value: 2, name: '以旧换新'},
{value: 1, name: '退货'},
{value: 3, name: '程序问题'},
{value: 0, name: '烧坏报废'},
{value: 21, name: '使用不当'},
{value: 44, name: '器件不良'},
{value: 11, name: '其他'},
]
}
]
};
/*
注：出现过商家自己维修，更换的MOS不同，属于电路问题。因是个例，分类到未知，仅注明，不在表中详细赘述。
*/
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</div>
<div id="menu3" class="container tab-pane fade"><br>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main1.3" style="width: 1100PX;height:560PX;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main1.3'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</div>
<div id="menu4" class="container tab-pane fade"><br>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main1.4" style="width: 1100PX;height:560PX;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main1.4'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</div>
</div>
</div>
</body>
</html>
5.声明
所有的引用我都写到了html里面，所以只需要一个.html文件即可。
想要使用Echarts的3D地图，除了需要 echarts.js 之外，还需要 echarts-gl.js （WebGL的扩展包，提供了丰富的三维可视化组件以及常规图表的性能增强），以及相关的 json文件（3D地图数据文件）。
echarts.js 和 echarts-gl.js 下载链接:
https://echarts.apache.org/zh/builder.html
全部代码是我自己写的，涉及到的Bootstrap和Echarts都是去看官网的标准开发文档，并自行修改过，大家可以放心拿去做二次开发。
但若要写文章，请说明转载出处，否则将追究责任，谢谢。