Vue+D3.js制作仪表图组件

基于Vue+D3.js的仪表图组件

实现的效果如下图所示

《Vue+D3.js制作仪表图组件》

1.定义data数据,实现组件的可定制化

  • panel组件能定制的参数包括以下几项

     config: {
           size: 200,             //panel的大小
           label: '采油量',       //panel的名称
           min: 0,                //量程的最小值
           max: 100,              //量程的最大值
           majorTicks: 6,         //主刻度的个数
           minorTicks: 4,         //次刻度的个数
           greenColor: '#109618', //区域1颜色
           yellowColor:'#FF9900', //区域2颜色
           redColor:'#DC3912',    //区域3颜色
           duration: 500,         //转动一次动画需要的时间
           value: 10}             //panel显示的值

2.处理数据函数setConfig()

  • 处理config数据

    return {
           value: config.value,               
           size: config.size,
           cx: config.size / 2,                 //圆心的x坐标
           cy: config.size / 2,                 //圆心的y坐标
           label: config.label,
           max: config.max,
           min: config.min,
           range: config.max - config.min,      //量程
           radius: config.size * 0.97 / 2,      //半径(稍许留白)
           minorTicks: config.minorTicks,         
           majorTicks: config.majorTicks,
           duration: config.duration,
           greenColor: config.greenColor,
           yellowColor : config.yellowColor,
           greenZones: {from: config.min, to: config.min + (config.max - config.min) * 0.75},                           //区域1范围
           yellowZones: { from: config.min + (config.max - config.min)*0.75, to: config.min +(config.max - config.min)*0.9 } ,
           redColor:config.redColor,            //区域2范围
           redZones: { from: config.min +(config.max - config.min)*0.9, to: config.max }                               //区域3范围
         }

3.render函数

  • 3.1获取数据

      let {size, cx, cy, radius, range,  min, max, label, minorTicks, 
       majorTicks, duration, value,greenZones,greenColor,yellowZones,yellowColor,redZones,redColor} = this.setConfig(config);
  • 3.2添加svg

     let self = this;                   //添加上下文
     let panel = d3.select("#panel").append("svg:svg")
           .attr("class", "gauge")      //添加类名gauge
           .attr("width", size)         //设置svg宽度   
           .attr("height", size);       //设置svg高度
  • 3.3画外圆

      panel.append("svg:circle")        //添加circle,圆  
             .attr("cx", cx)            //设置circle的坐标
             .attr("cy", cy)
             .attr("r", radius)         //设置circle的半径
             .style("fill", "#ccc")     //设置circle的填充颜色
             .style("stroke", "#000")   //设置circle的轮廓颜色
             .style("stroke-width", "0.5px");//设置circle的轮廓宽度
  • 3.4画内圆

    panel.append("svg:circle")  
             .attr("cx", cx)
             .attr("cy", cy)
             .attr("r", 0.9 * radius)    //半径不一样
             .style("fill", "#fff")
             .style("stroke", "#e0e0e0")
             .style("stroke-width", "2px");
  • 3.5画颜色区域

    黄色和绿色同下
    panel.append("svg:path")             //添加路径        
             .style("fill", greenColor)
             .attr("d", d3.svg.arc()  //添加圆弧
               .startAngle(this.valueToRadians(greenZones.from, config))  
                                      //开始弧度
               .endAngle(this.valueToRadians(greenZones.to, config))  
                                     //结束弧度            
               .innerRadius(0.65 * radius)  //内圈半径
               .outerRadius(0.85 * radius))  //外圈半径
             .attr("transform", function () {//移动+旋转
               return "translate(" + cx + ", " + cy + ") rotate(270)"
             });
  • 3.6设置label

    let fontSize = Math.round(size / 9); //字体大小
        panel.append("svg:text")         //添加文本
             .attr("x", cx)              //文本位置
             .attr("y", cy / 2 + fontSize / 2)
             .attr("dy", fontSize / 2)
             .attr("text-anchor", "middle")//文字角度
             .text(label)                 //文字内容
             .style("font-size", fontSize + "px")//字体大小
             .style("fill", "#333")        //颜色
             .style("stroke-width", "0px");
  • 3.7设置大小刻度线

     let deltaSize = Math.round(size / 16); //
     let majorDelta = range / (majorTicks - 1);//大刻度之间的距离
         {
           for (let major = min; major <= max; major += majorDelta) {
                                               //循环每个大刻度
             let minorDelta = majorDelta / minorTicks;//小刻度之间的距离
             for (let minor = major + minorDelta; minor < Math.min(major + majorDelta, max); minor += minorDelta) {      //循环每个小刻度
               let point1 = this.valueToPoint(minor, config, 0.75);
               let point2 = this.valueToPoint(minor, config, 0.85);
                                     //获取小刻度线的(x1,y1)(x2,y2)位置
               //添加小刻度线
               panel.append("svg:line")
                 .attr("x1", point1.x) //小刻度线的两点坐标
                 .attr("y1", point1.y)
                 .attr("x2", point2.x)
                 .attr("y2", point2.y)
                 .style("stroke", "#666")//小刻度线颜色
                 .style("stroke-width", "1px");//小刻度的宽度
             }
             //获取大刻度线的(x1,y1)(x2,y2)位置
             let point3 = this.valueToPoint(major, config, 0.7);
             let point4 = this.valueToPoint(major, config, 0.85);
             //添加大刻度线
             panel.append("svg:line")
               .attr("x1", point3.x)
               .attr("y1", point3.y)
               .attr("x2", point4.x)
               .attr("y2", point4.y)
               .style("stroke", "#333")
               .style("stroke-width", "2px");
             //标记最大值和最小值
             if (major == min || major == max) {
               let point = this.valueToPoint(major, config, 0.63);
               panel.append("svg:text")
                 .attr("x", point.x)
                 .attr("y", point.y)
                 .attr("dy", fontSize / 3)
                 .attr("text-anchor", major == min ? "state" : "end")
                 .text(major)
                 .style("font-size", deltaSize + "px")
                 .style("fill", "#333")
                 .style("stroke-width", "0px")
             }
           }
         }
  • 3.8设置指针

  1. pointerContainer = panel.append(“svg:g”).attr(“class”, “pointerContainer”);

      //中间值
      let midValue = (min + max) / 2;
      //指针的点轨迹
      let pointerPath = this.buildPointerPath(midValue, config);
      //曲线生成器
      let pointerLine = d3.svg.line()
        .x(function (d) {
          return d.x
        })
        .y(function (d) {
          return d.y
        })
        .interpolate("basis"); //贝斯曲线
      //画指针
      pointerContainer.selectAll("path")
        .data([pointerPath])
        .enter()
        .append("svg:path")
        .attr("d", pointerLine)
        .style("fill", "#dc3912")  //填充的颜色
        .style("stroke", "#c63310") //轮廓的颜色
        .style("fill-opacity", 0.7);  //填充的透明度
  • 3.9画指针中心圆

     pointerContainer.append("svg:circle")
              .attr("cx", cx)
              .attr("cy", cy)
              .attr("r", 0.12 * radius)
              .style("fill", "#4684EE")
              .style("stroke", "#666")
              .style("opacity", 1);
  • 3.10设置value

    let valueSize = Math.round(size / 10);
    pointerContainer.append("svg:text")
            .attr("x", cx)
            .attr("y", size - (cy / 4) - valueSize)
            .text(midValue)
            .attr("dy", valueSize / 2)
            .attr("text-anchor", "middle")
            .style("font-size", valueSize + "px")
            .style("fill", "#000")
            .style("stroke-width", "0px");
          this.redraw(value,duration,min,max,range,config,cy,cx)//指针渲染函数

4.设置指针渲染函数

  • 渲染指针

    redraw(value,duration,min,max,range,config,cy,cx){
    let self =this;
    let panel = d3.select("#panel").select(".gauge");
    //指针旋转
    let pointContainer = panel.select(".pointerContainer");
    //设置value值
    pointContainer.selectAll('text').text(value);
    let pointer = pointContainer.selectAll("path");
    //指针移动
    pointer.transition()
     .duration(duration)//持续时间
     .attrTween("transform", function () {
       let pointerValue = value;
       //判断超出量程的问题
       if (value > max) pointerValue = max + 0.02 * range;
       else if (value < min) pointerValue = min - 0.02 * range;
       //目标旋转角度:将数值转化为角度,并减去一个直角,
       let targetRotation = (self.valueToDegrees(pointerValue, config) - 90);
       //现在的角度
       let currentRotation = self._currentRotation || targetRotation;
       self._currentRotation = targetRotation;
       return function (step) {
         let rotation = currentRotation + (targetRotation - currentRotation) * step;
         return " rotate(" + rotation + ", " + cx + ", " + cy + ")";   //定义旋转
       }
     })
         }

5.公共函数

  • 转化为弧度

     valueToRadians(value, config) {
     return this.valueToDegrees(value, config) * Math.PI / 180
         }
  • 转化为角度

      valueToDegrees(value, config) {
    let {range, min} = this.setConfig(config);
    return value / range * 270 - (min / range * 270 + 45)
       }
  • 生成指针点数据

    valueToPoint(value, config, factor){
    let {cx, cy, radius} = this.setConfig(config);
    return {
     x: cx - radius * factor * Math.cos(this.valueToRadians(value, config)),
     y: cy - radius * factor * Math.sin(this.valueToRadians(value, config))
    }
         }
  • 生成指针

    buildPointerPath(value, config){
    let {range} = this.setConfig(config);
    let delta = range / 13,
     head = this.valueToPoint(value, config, 0.85),
     head1 = this.valueToPoint(value - delta, config, 0.12),
     head2 = this.valueToPoint(value + delta, config, 0.12),
     tailValue = value - (range * (1 / (270 / 360)) / 2),
     tail = this.valueToPoint(tailValue, config, 0.28),
     tail1 = this.valueToPoint(tailValue - delta, config, 0.12),
     tail2 = this.valueToPoint(tailValue + delta, config, 0.12);
    return [head, head1, tail2, tail, tail1, head2, head];
         }
    原文作者:何凯
    原文地址: https://segmentfault.com/a/1190000009222490
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞