test.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <!-- 文档编码 -->
  5. <meta charset="UTF-8" />
  6. <!-- 视口设置,确保页面在移动设备上正确显示 -->
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8. <!-- 页面标题 -->
  9. <title>test</title>
  10. <script src="./node_modules/echarts/dist/echarts.common.min.js"></script>
  11. </head>
  12. <body>
  13. <!-- 页面主体内容 -->
  14. <script src="add.js"></script>
  15. <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  16. <div id="main" style="width: 600px; height: 400px"></div>
  17. <script type="text/javascript">
  18. // 基于准备好的dom,初始化echarts实例
  19. var myChart = echarts.init(document.getElementById("main"));
  20. // 指定图表的配置项和数据
  21. var option = {
  22. title: {
  23. text: "ECharts 入门示例",
  24. },
  25. tooltip: {},
  26. legend: {
  27. data: ["销量"],
  28. },
  29. xAxis: {
  30. data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
  31. },
  32. yAxis: {},
  33. series: [
  34. {
  35. name: "销量",
  36. type: "bar",
  37. data: [5, 20, 36, 10, 10, 20],
  38. },
  39. ],
  40. };
  41. // 使用刚指定的配置项和数据显示图表。
  42. myChart.setOption(option);
  43. </script>
  44. </body>
  45. </html>