图表测试

本仓库使用了webpack的热更新功能。可以在编辑图表时打开测试页面，实时查看编辑效果。以下是创建并打开测试页面的步骤。

  1. 编辑test/CustomChartBar/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>
     <style>
         *{
             margin:0;
             padding:0;
         }
         html, body{
             width: 100%;
             height: 100%;
         }
         #container{
             width: 100%;
             height: 100%;
         }
     </style>
 </head>
 <body>
     <div id="container"></div>
 </body>
 </html>

    container是图表容器

  2. 编辑test/CustomChartBar/index.js文件

     //引入图表
 import bar from '../../src/chart/CustomChartBar/CustomChartBar.js';
 //工具（将配置文件解析为实际的配置）
 import Utils from '../utils.js';
 //获取样式配置和数据配置
 let config = new bar(document.querySelector('#container'), {getConfig:true}).getConfig();
 //初始化图表
 let chart = new bar(document.querySelector('#container'));

 let styleConfig = config.styleConfig;
 let dataConfig = config.dataConfig;

 //在这里可以对样式和数据进行相应修改
 //styleConfig.xAxis.show = false;

 //调用setOption方法
 chart.setOption(Utils.parseStyle(styleConfig), dataConfig);

 //销毁图表
 //chart.dispose();

  3. 打开测试页面

    3.1 在charts目录下执行命令

     npm run dev

    3.2 打开页面 http://localhost:3000/CustomChartBar/index.html

    如果图表名称为CustomChartLine，那么测试页面是http://localhost:3000/CustomChartLine/index.html

results matching ""

    No results matching ""