在这个示例中，我们将使用Chart.js库来生成一个简单的柱状图，并且添加按钮来点击时修改图表的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图表练习</title>
<script src="./js/jquery-3.7.1.min.js"></script>
<script src="./js/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<button id="Bar">柱状图</button>
<button id="Line">折线图</button>
<div id="mains" style="width: 600px;height:400px;"></div>
<div id="" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
let arr = [{
id: 1,
name: '衬衫',
price: '119',
num: 109,
income: 152
},
{
id: 2,
name: '西装',
price: '159',
num: 59,
income: 256
},
{
id: 3,
name: '领带',
price: '99',
num: 200,
income: 147
},
{
id: 4,
name: '那不雷斯',
price: '169',
num: 123,
income: 258
},
{
id: 5,
name: '皮鞋',
price: '259',
num: 144,
income: 369
}
];
let goods = [];
let quantity = [];
let surplus = [];
let price = [];
for (let i in arr) {
goods[i] = arr[i].name;
quantity[i] = arr[i].num;
surplus[i] = arr[i].income;
price[i] = arr[i].price;
}
// 指定图表的配置项和数据
let option = {
title: {
text: '西装'
},
tooltip: {},
legend: {
data: ['销量', '剩余', '价格']
},
xAxis: {
data: goods
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: quantity,
},
{
name: '剩余',
type: 'bar',
data: surplus
},
{
name: '价格',
type: 'bar',
data: price
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
let Bar = document.getElementById('Bar');
let Line = document.getElementById('Line');
Line.onclick = function() {
for(let i = 0 ; i < option.series.length ; i++){
option.series[i].type = 'line';
myChart.setOption(option);
}
}
Bar.onclick = function() {
for(let i = 0 ; i < option.series.length ; i++){
option.series[i].type = 'bar';
myChart.setOption(option);
}
}
</script>
</body>
</html>
我们可以通过点击按钮，切换柱状图和折线图。
原文链接: https://blog.csdn.net/hexadecimal_001/article/details/138507140