写一个mui 柱状图案例
时间: 2024-05-05 07:18:01 浏览: 131
好的,以下是一个mui柱状图的案例:
```
<!DOCTYPE html>
<html>
<head>
<title>MUI柱状图案例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 导入MUI样式 -->
<link href="//cdn.bootcss.com/mui/3.7.1/css/mui.min.css" rel="stylesheet">
<!-- 导入MUI扩展图标样式 -->
<link href="//cdn.bootcss.com/mui/3.7.1/css/icons-extra.css" rel="stylesheet">
<!-- 导入MUI JS -->
<script src="//cdn.bootcss.com/mui/3.7.1/js/mui.min.js"></script>
<!-- 导入ECharts JS -->
<script src="//cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">柱状图</h1>
</header>
<div class="mui-content">
<div id="chart" style="height: 300px;"></div>
</div>
<script type="text/javascript">
// 初始化图表对象
var myChart = echarts.init(document.getElementById('chart'));
// 配置图表选项
var option = {
title: {
text: '按天统计收入'
},
tooltip: {},
legend: {
data:['收入']
},
xAxis: {
data: ["1月1日","1月2日","1月3日","1月4日","1月5日","1月6日","1月7日"]
},
yAxis: {},
series: [{
name: '收入',
type: 'bar',
data: [100, 200, 150, 300, 250, 180, 220]
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
```
这是一个使用MUI和ECharts开发的柱状图案例,通过这个例子可以学习到如何在移动端使用MUI框架和ECharts图表库来开发数据可视化应用。
阅读全文