1. 使用Echarts五部曲
学习链接：https://echarts.apache.org/zh/index.html
入门案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/echarts.min.js"></script> <script src="js/jquery.min.js"></script> <style> .box { width: 400px; height: 400px; background: skyblue; } </style> </head> <body> <div class="box"></div> <script> // <!-- 首先进行初始化 --> var myEcharts = 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] } ] }; // 使用刚指定的配置项和数据显示图表。 myEcharts.setOption(option); </script> </body> </html>
