数据可视化 -- 封装自己的 Charts

最新推荐文章于 2023-08-07 09:51:55 发布
最新推荐文章于 2023-08-07 09:51:55 发布
阅读量507 收藏 4
点赞数
分类专栏： 笔记 高阶技术专题 文章标签： 数据可视化 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50983325/article/details/120889607
版权

myCharts 目录结构
在这里插入图片描述

myCharts 工程化配置

  • webpack.config.js

    const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: 'chart.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    port: 5000
  },
  module: {
    rules: [
      {
        test: /\.css/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.js/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}

  • public/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>可视化插件封装</title>
  <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'
    window.addEventListener('resize', () => {
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'
    })
  </script>
</head>

<body>
  <div class="box"></div>
</body>

</html>

myCharts初始化

  • src/index.js

    import '../css/main.css'
import MyCharts from './charts'

new MyCharts({
  select: '#box1',
  ratio: 1.5,
  type: 'cirque'
})

  • src/charts.js

    import utils from './utils'

class MyCharts {
  constructor(defaultParam) {
    this.defaultParam = defaultParam
    this._canvasParDom = document.querySelector(this.defaultParam.select)
    this.containerWidth = this._canvasParDom.clientWidth
    this.containerHeight = this._canvasParDom.clientHeight
    this._canvas = document.createElement('canvas')

    // 设置默认配置
    this.defaultConfig = {
      styles: {
        borderColor: "#6b9bb8",
        lineColor: '#9ec8da',
        pointColor: '#41627c'
      },
      data: [],
      x: 40,
      padding: 20,
      fontSize: '16px',
      wd: this.containerWidth * this.defaultParam.ratio,
      ht: this.containerHeight * this.defaultParam.ratio,
      lineWidth: 2,
      hisColor: ['#7b8c7c', '#5c968a', '#576d93', '#a0d878', '#337d56', '#c1d0ae', '#93b469', '#bda29a']
    }

    // 上下文绘制环境
    this.ctx = this._canvas.getContext('2d')

    // 缩放画布大小
    this._canvas.width = this.containerWidth * this.defaultParam.ratio
    this._canvas.height = this.containerHeight * this.defaultParam.ratio

    // 添加至div 当中
    this._canvasParDom.appendChild(this._canvas)

    // 扩展或者覆盖配置
    this.defaultParam = utils.extendsObj(this.defaultConfig, this.defaultParam)

    // 设置合适的画布宽度
    this.defaultParam.wid = this._canvas.width - 20

    this.init()
  }

  init() {
    switch (this.defaultParam.type) {
      case 'cirque':
        console.log('绘制圆环')
        break
      default:
        console.log('无此功能的绘制')
    }
  }
}

export default MyCharts

  • src/utils.js

    let utils = {
  extendsObj: (obj1, obj2) => {
    for (let k in obj2) {
      obj1[k] = obj2[k]
    }
    return obj1
  }
}

export default utils

myCharts动画函数实现

  • src/myAnimation.js

    export default function myAnimation(param) {
  let current = 0
  let looped
  const ctx = this.ctx
  const _canvas = this._canvas
  const callback = param.render
  const successCb = param.success;
  (function looping() {
    looped = requestAnimationFrame(looping)
    if (current < param.percent) {
      ctx.clearRect(0, 0, _canvas.width, _canvas.height)
      current = current + 4 > param.percent ? param.percent : current + 4
      callback(current)
    } else {
      window.cancelAnimationFrame(looping)
      looped = null
      successCb && successCb()
    }
  })()
}

进度园实现

  • src/charts.js

    import Cirque from './cirque'
import myAnimation from './myAnimation'
// ...
init() {
    switch (this.defaultParam.type) {
      case 'cirque':
        let circleConfig = {
          x: this.defaultParam.wd / 2,
          y: this.defaultParam.ht / 2,
          radius: 200,
          startAngle: 0,
          endAngle: 2 * Math.PI,
          arcWidth: 18,
          target: 90
        }
        this.circleConfig = utils.extendsObj(this.defaultConfig, circleConfig)
        myAnimation.call(this, {
          percent: this.circleConfig.target,
          render: (current) => {
            Cirque.call(this, current / 100)
          }
        })
        break
      default:
        console.log('无此功能的绘制')
    }
  }

  • src/cirque.js

    let Cirque = function (percent) {

  const ctx = this.ctx
  const circleConfig = this.defaultParam

  // 绘制打底圆环
  ctx.beginPath()
  ctx.lineWidth = circleConfig.arcWidth
  let grd = ctx.createRadialGradient(circleConfig.x, circleConfig.y, circleConfig.radius - 10, circleConfig.x, circleConfig.y, circleConfig.radius + 10)
  grd.addColorStop(0, "#e9eae9")
  grd.addColorStop("0.8", "#fefefe")
  grd.addColorStop("1", "#e9eae9")
  ctx.strokeStyle = grd
  ctx.arc(circleConfig.x, circleConfig.y, circleConfig.radius, circleConfig.startAngle, circleConfig.endAngle)
  ctx.stroke()
  ctx.closePath()

  // 绘制进度圆环
  ctx.beginPath()
  ctx.lineWidth = circleConfig.arcWidth
  let linear = ctx.createLinearGradient(220, 220, 380, 200)
  linear.addColorStop(0, '#ffc26b')
  linear.addColorStop(0.5, '#ff9a5f')
  linear.addColorStop(1, '#ff8157')
  ctx.strokeStyle = linear
  ctx.arc(circleConfig.x, circleConfig.y, circleConfig.radius, circleConfig.startAngle, circleConfig.endAngle * percent)
  ctx.stroke()
  ctx.closePath()

  // 起点的圆形
  ctx.beginPath()
  ctx.fillStyle = '#ff7854'
  ctx.arc(circleConfig.x + circleConfig.radius, circleConfig.y - 1, circleConfig.arcWidth / 2, circleConfig.startAngle, circleConfig.endAngle)
  ctx.fill()
  ctx.closePath()

  // 终点的圆形
  ctx.beginPath()
  ctx.lineWidth = circleConfig.arcWidth - 10
  ctx.fillStyle = '#fff'
  ctx.strokeStyle = '#ff7854'
  let tarX = circleConfig.x + circleConfig.radius * Math.cos(2 * Math.PI * percent)
  let tarY = circleConfig.y + circleConfig.radius * Math.sin(2 * Math.PI * percent)
  ctx.arc(tarX, tarY, circleConfig.arcWidth - 8, circleConfig.startAngle, circleConfig.endAngle)
  ctx.fill()
  ctx.stroke()
  ctx.closePath()

}

export default Cirque

折线图绘制

  • src/index.js

    import '../css/main.css'
import MyCharts from './charts'

new MyCharts({
  select: '#box2',
  ratio: 1.5,
  type: 'line',
  data: [{
    xVal: '周一',
    yVal: 40
  }, {
    xVal: '周二',
    yVal: 70
  }, {
    xVal: '周三',
    yVal: 30
  }, {
    xVal: '周四',
    yVal: 80
  }, {
    xVal: '周五',
    yVal: 30
  }, {
    xVal: '周六',
    yVal: 20
  }, {
    xVal: '周日',
    yVal: 90
  }]
})

  • src/charts.js

    import utils from './utils'
import myAnimation from './myAnimation'
import { drawAxis, drawPoint, drawBrokenLine, drawDashLine } from './broken'
// ...
 init() {
    switch (this.defaultParam.type) {
      case 'line':
        myAnimation.call(this, {
          percent: 200,
          render: (current) => {
            // 绘制坐标系
            drawAxis.call(this)
            // 绘制虚线
            drawBrokenLine.call(this, current / 200)
            // 绘制Y轴虚线
            drawDashLine.call(this, current / 200)
            // 绘制圆形
            drawPoint.call(this, current / 200)
          }
        })
        break;
      default:
        console.log('无此功能的绘制')
    }
  }

  • src/broken.js

    export function drawAxis() {
  const defaultParam = this.defaultParam
  const ctx = this.ctx
  const pad = defaultParam.padding
  const bottomPad = 30
  const wd = defaultParam.wd
  const ht = defaultParam.ht
  const data = defaultParam.data

  // 绘制坐标系
  ctx.save()
  ctx.beginPath()
  ctx.lineWidth = 2
  ctx.strokeStyle = defaultParam.styles.borderColor
  ctx.moveTo(pad, pad)
  ctx.lineTo(pad, ht - bottomPad)
  ctx.lineTo(wd - pad, ht - bottomPad)
  ctx.stroke()
  ctx.closePath()


  // 绘制文字刻度 
  for (let i = 0; i < data.length; i++) {
    ctx.beginPath()
    ctx.fillStyle = '#333'
    ctx.textAlign = 'center'
    ctx.font = defaultParam.fontSize + ' Microsoft YaHei'
    ctx.fillText(data[i].xVal, i * (defaultParam.wid / data.length - 1) + defaultParam.x, ht - 10)
    ctx.closePath()
  }

  ctx.restore()
}

export function drawPoint(speed) {
  const defaultParam = this.defaultParam
  const ctx = this.ctx
  const data = defaultParam.data
  const len = data.length
  const ht = defaultParam.ht

  // 计算
  ctx.save()
  ctx.lineWidth = 2
  for (let i = 0; i < len; i++) {
    let yVal = parseInt(data[i].yVal * speed)
    let tranY = ht - ht * yVal / defaultParam.maxPoint - 30
    let tranX = i * (defaultParam.wid / len - 1) + defaultParam.x

    // 绘制图形
    ctx.beginPath()
    ctx.shadowOffsetX = 0
    ctx.shadowOffsetY = 0
    ctx.shadowBlur = 3
    ctx.shadowColor = defaultParam.styles.pointColor
    ctx.fillStyle = defaultParam.styles.pointColor
    ctx.strokeStyle = '#fff'
    ctx.arc(tranX, tranY, 6, 0, 2 * Math.PI, false)
    ctx.fill()
    ctx.stroke()
    ctx.closePath()

    // 绘制圆形对应的数值
    ctx.beginPath()
    ctx.shadowBlur = 0
    ctx.fillStyle = '#333'
    ctx.textAlign = 'center'
    ctx.font = defaultParam.fontSize + ' MicroSoft YaHei'
    ctx.fillText(yVal, tranX, tranY - 10)
    ctx.closePath()

  }
  ctx.restore()
}

export function drawBrokenLine(speed) {
  const defaultParam = this.defaultParam
  const ctx = this.ctx
  const bottomPad = 30
  const data = defaultParam.data
  const ht = defaultParam.ht
  const maxPoint = defaultParam.maxPoint
  const len = data.length - 1
  const stepDots = Math.floor(speed * len)

  // 绘制线条 
  ctx.save()
  ctx.beginPath()
  ctx.setLineDash([4, 4])
  ctx.lineWidth = defaultParam.lineWidth
  ctx.strokeStyle = defaultParam.styles.lineColor
  for (let i = 0; i < len; i++) {
    // 起点 
    const yVal = data[i].yVal
    const axisY = ht - ht * (yVal / maxPoint) - bottomPad
    const averageNum = defaultParam.wid / data.length - 1
    const axisX = i * averageNum + defaultParam.x

    // 终点 
    let axisEndX = (i + 1) * averageNum + defaultParam.x
    let axisEndY = ht - ht * (data[i + 1].yVal) / maxPoint - bottomPad

    if (i <= stepDots) {
      if (i === stepDots) {
        axisEndX = (axisEndX - axisX) * speed + axisX
        axisEndY = (axisEndY - axisY) * speed + axisY
      }
      ctx.moveTo(axisX, axisY)
      ctx.lineTo(axisEndX, axisEndY)
    }
  }
  ctx.stroke()
  ctx.closePath()
  ctx.restore()
}

export function drawDashLine(speed) {
  const defaultParam = this.defaultParam
  const ctx = this.ctx
  const bottomPad = 30
  const data = defaultParam.data
  const ht = defaultParam.ht
  const maxPoint = defaultParam.maxPoint
  const len = data.length

  ctx.save()
  for (let i = 0; i < len; i++) {
    // 起始点
    const averageNum = defaultParam.wid / data.length - 1
    let axisX = i * averageNum + defaultParam.x
    let axisY = ht - ht * (data[i].yVal) / maxPoint * speed - bottomPad

    // 开始绘制 
    ctx.beginPath()
    ctx.lineWidth = 2
    ctx.setLineDash([4, 4])
    ctx.strokeStyle = '#d6d6d6'
    ctx.moveTo(axisX, ht - bottomPad)
    ctx.lineTo(axisX, axisY)
    ctx.stroke()
    ctx.closePath()
  }
  ctx.restore()
}

直方图绘制

  • src/index.js

    import '../css/main.css'
import MyCharts from './charts'

new MyCharts({
  type: 'histogram',
  select: '#box3',
  ratio: 1.5,
  data: [{
    xVal: 'vue',
    yVal: 80
  }, {
    xVal: 'react',
    yVal: 70
  }, {
    xVal: 'angular',
    yVal: 40
  }, {
    xVal: 'webpack',
    yVal: 90
  }, {
    xVal: '2222',
    yVal: 80
  }, {
    xVal: 'typescript',
    yVal: 40
  }, {
    xVal: 'ES6+',
    yVal: 100
  }]
})

  • src/charts.js

    import utils from './utils'
import Cirque from './cirque'
import myAnimation from './myAnimation'
import { drawHistogram } from './histogram'
import { drawAxis, drawPoint, drawBrokenLine, drawDashLine } from './broken'
// ...
 init() {
    switch (this.defaultParam.type) {
      case 'cirque':
        // ...
        break
      case 'line':
        // ...
        break;
      case 'histogram':
        myAnimation.call(this, {
          percent: 100,
          render: (current) => {
            // 绘制坐标系
            drawAxis.call(this)
            // 绘制直方图
            drawHistogram.call(this, current / 100)
          }
        })
        break
      default:
        console.log('无此功能的绘制')
    }
  }

  • src/histogram.js

    export function drawHistogram(speed) {
  const defaultParam = this.defaultParam
  const ctx = this.ctx
  const bottomPad = 30
  const data = defaultParam.data
  const ht = defaultParam.ht
  const maxPoint = defaultParam.maxPoint
  const len = data.length
  let rectHeight = this._canvas.height - bottomPad

  for (let i = 0; i < len; i++) {
    let yVal = data[i].yVal * speed
    let axisY = ht - ht * (yVal / maxPoint) - bottomPad
    const averageNum = defaultParam.wid / data.length - 1
    let axisX = i * averageNum + defaultParam.x

    ctx.save()
    ctx.beginPath()
    ctx.fillStyle = defaultParam.hisColor[i]
    ctx.fillRect(axisX - 15, axisY, 30, rectHeight - axisY)
    ctx.restore()
  }

}
christian-dong
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue前端数据可视化echart实践经验（三）可视化功能封装
juliotang的博客
08-04 1019
echart可视化的功能封装 前面部分论述了可视化初始化与刷新，主要关注的是父组件如何与子组件通信确定可视化时机。本节描述子组件中具体可视化的步骤： 1. 接父组件条件进行基础可视化option设置 2. 请求后端数据封装可视化数据对象 3. 根据局部条件将数据对象绑定到option 4. 实际画图 这里的option指的是echart里面的js对象，用过的都很熟悉了。下面将根据我们上一节所说的那个可视化例子来详述我们如何体现出这四步到方法级别，并且如何根据实际场景灵活运用的。以下是上节中的可视化案例：
vue-cli和v-charts实现可视化图表过程解析
01-19
基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。 v-charts的中文社区文档（https://v-charts.js.org/#/），可根据项目...
数据可视化封装开发经验
notagoodwriter的博客
06-15 249
echarts开发经验
可视化图表封装
kaizou520的博客
06-15 482
可视化图表封装 1.先熟悉echarts，highcharts的配置options，即了解图表的组成 图例、标题、提示框、坐标轴、数据列… 2.根据类型封装不同的图表：饼图、柱图、折线图… 在模块中定义图表的构造函数 在构造函数原型上定义组装样式的方法 在构造函数原型上定义重组数据的方法 在构造函数原型上定义获取默认配置的方法 使用ES6模块化导出模块 // 线图 var LineChart = (function() {// 这里使用自执行函数，隔离作用域 // 定义构造函数 fu
jQuery 封装数据可视化圆环效果
chentanpo8678的博客
11-06 157
最终效果： HTML：（很显然，这是一个复用插件） <div class="circle"> <div class="circle-inner"> <div class="loading-circle"> <...
python条形统计图_vue.js + d3.js 封装可视化组件 —— 条形统计图（一）
weixin_39585035的博客
12-03 137
实现上述方法组织数据：function createAllAttr()createAllAttr () {const { padding, axis, width, barWidth, ...otherParams } = this.$propsconst currentWidth = width - padding.left - padding.right // 统计图实际占用宽度const b...
vue基于v-charts封装双向条形图的实现代码
10-15
在Vue.js应用中，我们可以利用第三方库v-charts来创建数据可视化图表。v-charts是基于ECharts的一个轻量级封装库，它提供了简洁的Vue API来操作图表，使得在Vue项目中集成图表变得简单易行。本篇将详细介绍如何在Vue...
基于Python的电影数据可视化分析系统.zip
06-10
前端vue.js使用elementUI组件，使用E charts进行数据的可视化，利用axios的post向后端发送请求 产品测试使用手工测试 详细介绍参考：...
基于VUE的v-charts的曲线显示功能
10-16
V-charts的这种易用性使得开发者能够快速地创建出美观且实用的数据可视化图表，而无需深入理解Echarts复杂的配置选项。通过这种方式，我们可以更专注于业务逻辑，而不是图表的实现细节，从而提高开发效率。
TradingViewLightweightCharts是最小和最快的金融HTML5图表
08-10
小巧的封装中的顶级性能。免费、开源和功能丰富。仅需43kb，轻量级交互式图表的梦想现已成为现实。HTML5 Canvas技术确保（与图片不同）此图表在任何设备上始终都是完美的。
MyEChartsMyECharts
04-11
MyEChartsMyECharts
myCharts.rar
02-19
利用QFile读取在不断刷新写入的文本文件，并用QTextBrowser组件实时显示读取到的内容，QTextQtCharts组件进行动态绘制显示数据变化趋势，且随着x取值范围的增大x轴可伸长变化。
myCharts.zip
10-16
EChart小案例，新手练习
QML+Chart.js 实现图表显示
10-26
QML+Chart.js 实现图表显示qml封装 charts.js，支持基本的图表类型：柱形图、饼形图、环形图、折线图、极坐标图、雷达图。
高效开发大屏可视化项目：公共组件封装指南
最新发布
weixin_43960320的博客
08-07 248
本文主要介绍了在开发大屏项目时的一些常见功能并对其进行了封装，为大屏可视化开发提供了一些基础的解决方案，你可以根据示例代码进行实践和定制关于入场动画和无缝滚动请参考另一篇文章入场动画和无缝滚动。
php echart动态获取数据集,Echart 动态生成series数据
weixin_35389904的博客
04-13 300
要做成页面只传入数据，js生成图表，如下图 下面是js代码 var LineChart = function(ID, title, axisData,seriesData) {var myChart =echarts.init(document.getElementById(ID));var newData =[];var legendData =[];for (var i = 0; i &lt...
ECharts的使用
Cyl0110的博客
02-28 389
1，安装echarts npm install echarts --save //我自己用这个指令时安装到中间就卡住，所以用的cnpm cnpm install echarts --save //cnpm安装指令，用之前先切换淘宝镜像 npm config set registry http://registry.npm.taobao.org/ //切换淘宝镜像 2，引入使用 <template> <div ref="myChart" ...
Echarts的使用
zimistan0997的博客
02-10 216
Echarts的使用 记录自己第一次在vue中使用Echarts。 下载 在vue中使用Echarts，需要先用npm下载Echarts： npm install echarts 引入 下载好之后在项目中引入，我推荐局部引入，Echarts在最新的版本中，需要用以下方式引入。 App.vue: import * as echarts from "echarts" 使用 使用首先需要创建一个宽高固定的DOM容器。 App.vue: <div id="myCharts" style="width:40
【Vue中使用Echarts】在Vue中优雅的使用Echarts——图表轮播图、Echarts图表组件封装、节流函数优化图表性能
一个非常Cool的人
01-04 2803
如果没有对插件进行封装，在后期使用插件的时候效率会十分低下也不便于后期对程序的维护拓展，在优雅的使用echarts时，首先，我们考虑到多个地方需要用到echarts，就需要封装一个组件出来，由于每一个图中的属性均由配置项option进行控制，所以我们可以将option选项提取出来，在将来用到图表的时候从父组件传进来，父组件需要做的就是为图标提供一个有大小的盒子，以便于将图表放进盒子内。当然这只是粗略的想法，具体应如何做还要阅读博客中的内容。
帮我找到基于vue的用户数据可视化平台
05-16
当下比较知名的基于Vue的用户数据可视化平台有以下几个： 1. Element Plus DataV：是饿了么团队出品的一款基于Element Plus和...以上是一些比较知名的基于Vue的用户数据可视化平台，你可以根据自己的需求选择合适的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值