通过标签方式直接引入构建好的 echarts 文件
<!-- 引入 echarts.js --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
ECharts 准备一个具备高宽的 DOM 容器
<!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main"></div>
初始化echarts实例
// 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main'), 'light', { renderer: 'canvas', width: '800px', height: '500px', locale: 'EN' });
// 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [] }] };
//01.异步加载数据; setInterval(function () { myChart.setOption({ xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子1"] }, series: [{ data: random(6, 20, 800) }] }); }, 1000);
//02.异步加载数据; option.series[0].data = random(6, 20, 800); option.xAxis.data = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子1"]; myChart.setOption(option);
lockdatav Done!