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

最新推荐文章于 2023-01-04 10:07:48 发布
最新推荐文章于 2023-01-04 10:07:48 发布
阅读量505 收藏 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
    评论
专栏目录
myCharts.rar
02-19
利用QFile读取在不断刷新写入的文本文件，并用QTextBrowser组件实时显示读取到的内容，QTextQtCharts组件进行动态绘制显示数据变化趋势，且随着x取值范围的增大x轴可伸长变化。
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
可视化图表（ECharts、orgchart）
sinat_38011533的博客
08-10 1230
一、ECharts 官网：https://echarts.apache.org/examples/zh/index.html 常用的饼图、柱状图、关系图 html中js文件引入: <link type="text/javascript" src="../eCharts-4/eCharts4.js" /> <link type="text/javascript" src="../OrgChart-master/jquery.orgchart.css" /> <!
【Vue中使用Echarts】在Vue中优雅的使用Echarts——图表轮播图、Echarts图表组件封装、节流函数优化图表性能
一个非常Cool的人
01-04 2800
如果没有对插件进行封装，在后期使用插件的时候效率会十分低下也不便于后期对程序的维护拓展，在优雅的使用echarts时，首先，我们考虑到多个地方需要用到echarts，就需要封装一个组件出来，由于每一个图中的属性均由配置项option进行控制，所以我们可以将option选项提取出来，在将来用到图表的时候从父组件传进来，父组件需要做的就是为图标提供一个有大小的盒子，以便于将图表放进盒子内。当然这只是粗略的想法，具体应如何做还要阅读博客中的内容。
vue-cli和v-charts实现可视化图表过程解析
01-19
基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。 v-charts的中文社区文档（https://v-charts.js.org/#/），可根据项目...
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技术确保（与图片不同）此图表在任何设备上始终都是完美的。
myCharts.zip
10-16
EChart小案例，新手练习
MyEChartsMyECharts
04-11
MyEChartsMyECharts
echarts 横向圆角条状图
WangJiangNan17214的博客
06-07 2442
Echarts绘制横向柱状图(圆角+渐变) var MyChartsTop10; function drawTop10(dic){      var myChart = echarts.init(document.getElementById('drawTop10'));     //初始化数据     // var category = ['小王', '小李
JS Charts生成网页的柱状图，圆饼图以及曲线图
刘津宇教编程
06-26 5429
JS Charts 是一个轻量级的免费javascript 基础图表生成器，支持柱状图，圆饼图以及简单的曲线图。不需要在服务器端安装插件，只需在客户端加入javascript代码。JS Charts 支持XML 和 JSON 数据。图片格式为PNG，兼容所有主要浏览器。 曲线图 柱状图
ECharts图表初级入门（三）：ECharts对象的数据实例化方法汇总以及注意事项
唐策的博客
01-30 2419
[摘要]： 前面我们以及提及到了ECharts图表组件初级入门之(一)：如何将ECharts引入至项目中的几种方式和ECharts图表初级入门(二)：ECharts图表对象的初始化(init)详解以及注意事项，我们完成了ECharts图表使用的一些基础部署了，也拿到了ECharts的对象，通过init(dom)方法，那么我们如何给这个对象进行数据初始化呢？这将会是这一篇文章将会谈及到的问题： 关于
前端ECharts可视化框架快速上手详解(三)
Augenstern_QXL的博客
08-28 1481
✍ 1、Echarts高级 1、显示相关 1.1、主题 1.1.1、内置主题 ECharts 中默认内置了两套主题：light、dark 在初始化对象方法 init 中可以指明 init 方法有两个参数，第一个参数代表是一个 dom 节点，第二个参数，代表你需要使用哪一套主题 var chart = echarts.init(dom,'light'); var chart = echarts.init(dom,'dark'); <body> <!-- 1.准备一
Echart.js简单使用
热门推荐
weixin_39570075的博客
07-22 4万+
前台页面除了表格以外，最能表现数据的就属图表。也就是Echart.js啦 先简单介绍一下柱状图和扇形图。 需要引入的js: &lt;script src="../js/echarts.js"&gt;&lt;/script&gt; html只有一个div就可以： &lt;div id="main" style="width: 600px;height:400px;"&gt;&lt;
uniapp 项目实践
weixin_50983325的博客
08-20 1万+
基于 UniAPP 社区论坛项目多端开发实战 学习目的： ​ 通过学习，基于 Vue 、微信小程序、uniapp 开发框架，对标企业级「大前端」开发实践标准，从零到一构建社区论坛类客户端应用项目全流程， 输出相关 H5、微信小程序、安卓、IOS 多客户端应用。 一、项目准备 1.1 项目业务逻辑介绍 相关文档 API 接口文档，详情查阅《 ThinkSNS 社区服务接口文档.md 》 ThinkSNS 综合管理系统，开源代码 git 地址：https://gitee.com/joysapp/t
帮我找到基于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、付费专栏及课程。

余额充值