05. series设置
于2023-08-14 20:14:00发布
22
例子1 （最大值和最小值和平均值）
<!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>series设置</title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script src="./js/echarts.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
show: true,
icon: 'circle',
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
markPoint: {
data: [{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
}]
};
myChart.setOption(option);
</script>
</body>
</html>
例子2 （设置柱状图的颜色、宽度）
<!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>series设置</title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script src="./js/echarts.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
barWidth: 20, // 设置宽度
// color: 'pink', // 设置颜色
itemStyle: {
normal: {
// 设置没条柱状图的颜色
color: function (params) {
const colorList = [
'pink',
'yellow',
'green',
'blue',
'#61a0a8',
'red'
];
return colorList[params.dataIndex]
}
}
}
}]
};
myChart.setOption(option);
</script>
</body>
</html>