🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
`审核人:舒曼` `被审核代码负责人:廖爽` `代码地址:http://192.168.1.170/hyfe/demo-project/tree/master/demo-liaoshuang` #### 1、配置项(未修改,故意滴o,暂定) 文件名:`charts/roadFlow.js` ``` var width = 1300; var height = 600; var padding = { top: 50, right: 50, left: 50, bottom: 50 }; var color = ["#3FDBFF", "#3579F8"]; var tickValues = [0, 10, 20, 30, 40, 50]; // y轴要显示的刻度值 var tickValues1 = [10, 20, 30, 40, 50]; // 移除网格0位置的绘制 ``` 解决方案:写个方法专门放配置项,并结合lodash使用,不然调用图表的时候不方便灵活配置 ``` defaultSetting: function(){ return { width: 1910, height: 1520, ...... } } ``` #### 2、比例尺(未修改,故意的e) 文件名:`charts/roadFlow.js` 和`charts/trafNum.js` ![](https://box.kancloud.cn/edf745cb9d6b73782a72ddf2aa3f90fb_595x89.png) ![](https://box.kancloud.cn/79496758ce1e1ec7d0825a80afa069d0_592x84.png) 解决方案:这里比例尺定死了,该给最大数和最小数 #### 3、圆点标记(已修改,学习了) 文件名:`charts/roadFlow.js` ![](https://box.kancloud.cn/448d3db275fffe32daf5a04eedd8fde5_556x418.png) 解决方案:这里可以不用去循环去生成圆点标记。线段可以添加标记marker,可以将圆点放那里面去 ```html <marker id="markerArrow" markerWidth="13" markerHeight="13" refx="5" refy="3.5" orient="auto"> <rect id="jtG" fill="url(#markerJt)" width=10 height=10 /> </marker> // 类似这样引用,可以去看具体用法 <path d='....' marker-end='url(#markerArrow)'></path> ```