效果图
代码
<!--01、 引入 ECharts 文件 -->
<script src="../js/echarts-4.1.0/echarts.js"></script>
<script src="../js/theme/customed.js"></script>
<!--02、 构建 ECharts 数据源 -->
<script type="text/javascript">
var legendData =['数据1','数据2'];
var xAxisData = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
var ktData = [1324,1322,2680,2671,2680,2914,514,266,2660,2685,2683,2699];
var xlData = [752,739,1526,1522,1517,1505,299,150,1536,1517,1515,1503];
//总计
var allData = function() {
var datas = [];
for (var i = 0; i < ktData.length; i++) {
datas.push(ktData[i] + xlData[i]);
}
return datas;
}();
var option = {
// title: {
// text: '折线总图'
// },
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
// backgroundColor: '#6a7985'
}
}
},
legend: {
// icon: "circle",
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 2, // 设置间距
textStyle:{
fontSize:10,
},
x: 'right',
top:'-1',
data:legendData
},
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
grid: {
top:'13%',
left: '3%',
right: '4%',
bottom: '10',
containLabel: true
},
xAxis : [
{
type : 'category',
axisLabel: {
interval: 0,
rotate: 30
},
boundaryGap : false,
data :xAxisData
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:legendData[0],
type:'line',
stack: '总量',
areaStyle: {normal: {}},
data:ktData
},
{
name:legendData[1],
type:'line',
stack: '总量',
areaStyle: {normal: {}},
data:xlData
},
{
name: '总量',
type: 'line',
stack: 'sum',
label: {
normal: {
show: true,
position: 'top',
// textStyle:{ color:'#000' }
}
},
data: allData
}
]
};
</script>
工作中使用到的,总结归纳后,仅供各位大神们参考......