步骤1:
下载并引入echarts.js文件 --> 图标依赖这个js库
步骤2:
准备一个具备大小的DOM容器 --> 生成的图表会放入这个容器内
步骤3:
初始化echarts实例化对象 --> 实例化对象echarts对象
步骤4:
指定配置项和数据(option) --> 根据具体需求修改配置选项
步骤5:
将配置项设置给echarts实例化对象 --> 让echarts对象根据修改好的配置生效
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .box{ width: 300px; height: 300px; background-color: pink; opacity: 0.4; } </style> <body> <div class="box"> </div> <script src="js/echarts.min.js"></script> <script> // 实例化对象echarts.init(dom容器); var myChart = echarts.init(document.querySelector(".box")); // 指定配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; // 把配置项给实例对象 myChart.setOption(option); </script> </body> </html>