<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="width:600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector('div'));
var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
var yDataArr = [200, 455, 300, 600, 700, 600, 400, 230, 666, 555, 345, 678]
var yDataArr2 = [400, 400, 100, 650, 400, 800, 500, 430, 166, 955, 745, 278]
var option = {
xAxis: {
type: 'category',
data: xDataArr,
//值与Y轴没有间距,紧挨边缘
boundaryGap:false
},
yAxis: {
// 数值轴
type: 'value',
// 起始值脱离0值 从Y数据第一个值开始
scale:true
},
series: [{
name: '康师傅',
data: yDataArr,
type: 'line',
//两根线条累加
stack:'all',
areaStyle:{},
//加颜色
//最大值 最小值
// markPoint: {
// data: [{
// type: 'max'
// }, {
// type: 'min'
// },
// ]
// },
//平均线
// markLine: {
// data: [{
// type: 'average'
// }]
// },
//区间阴影标注
// markArea: {
// data: [
// [
// // 开始值
// {
// xAxis: '1月'
// },
// //结束值
// {
// xAxis: '2月'
// }
// ],
// [ // 开始值
// {
// xAxis: '7月'
// },
// //结束值
// {
// xAxis: '8月'
// }
// ]
// ]
// },
// 折线平滑
// smooth:true,
// //折线风格
// lineStyle:{
// color:'green',
// // 虚线
// type:'dashed' //dotted solid
// },
// // 这线下部分颜色
// areaStyle:{
// color:'pink'
// },
},
{
name: '统一',
data: yDataArr2,
type: 'line',
stack:'all',
areaStyle:{}
}]
}
mCharts.setOption(option)
</script>
</body>
</html>
原创文章，作者：1402239773，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/275971.html