
<div class="container">
<div class="row">
<div class="col-md-6">
<div id='main' style="width: 900px; height: 500px;">
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js" ></script>
<script src="js/bootstrap.min.js" ></script>
<script src="js/echarts.min.js" ></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '商品名称'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋','袜子']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月',
'八月', '九月', '十月', '十一月', '十二月']
}
],
yAxis: [
{
type: 'value',
min:0,
max:150,
}
],
series: [
{
name: '衬衫',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [5, 6 ,12, 20, 21, 21, 15, 17, 8, 7, 22, 12
]
},
{
name: '羊毛衫',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [20, 18, 30, 22, 22, 24, 9, 12, 21, 24, 22, 12
]
},
{
name: '雪纺衫',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [36, 20, 20, 23, 28, 21, 13, 16, 12, 28, 21, 22
]
},
{
name: '裤子',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [10, 12, 18, 21, 25, 22, 12, 14, 32, 21, 18, 21
]
},
{
name: '高跟鞋',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [10, 11, 17, 18, 13, 12, 14, 21, 12, 31, 21, 18
]
},
{
name: '袜子',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [20, 19, 22, 21, 23, 21, 19, 24, 32, 21, 24, 21
]
}
]
};
myChart.setOption(option);
</script>