Echarts

ECharts图表入门

最新推荐文章于 2023-10-20 14:53:41 发布

原创最新推荐文章于 2023-10-20 14:53:41 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用ECharts创建基本图表，包括准备DOM元素、引入ECharts库文件、配置图表选项等关键步骤。

Echarts

引入echarts——单文件引用：

1，

<div id="main" style="height:400px"></div>

2，引用 <script src="./js/echarts.js"></script>

3，获取AMD环境

<script type="text/javascript">

require.config({

paths: {

echarts:
 './js/dist'

}

});

4，加载echarts
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
5，加载所需要的数据
}
myChart.setOption(option);
}
);