基于Echarts+HTML5可视化数据大屏展示—北斗车联网大数据平台_echarts代码如何在h5界面上展示
以下是一个简化版的ECharts代码示例，用于在HTML页面中展示一个基本的柱状图：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
myChart.showLoading();
// 使用 ECharts 内置的 month 和 day 数据，这里可以替换成你的数据源
$.get('https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/extension/dataTool.min.js').done(function (dataTool) {
// 这里的 'data' 是模拟的数据，你应该替换成你的实际数据
var data = [
{name: '类别1', value: 10},
{name: '类别2', value: 20},
{name: '类别3', value: 30}
];
var dataset = dataTool.dataset(data, [
{
seriesIndex: 0,
dataDimensionIndex: 0 // 表示这部分数据是X轴的数据
},
{
seriesIndex: 0,
dataDimensionIndex: 1 // 表示这部分数据是Y轴的数据
}
]);
myChart.hideLoading();
myChart.setOption(option = {
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {type: 'category', data: dataset.source[0].data},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: dataset.source[1].data
}]
});
});
</script>
</body>
</html>这段代码展示了如何在HTML页面中使用ECharts库创建一个简单的柱状图。你需要替换数据源和数据以展示你自己的数据。记得在你的服务器环境中提供ECharts库的链接。
评论已关闭