使用canvas画出带阴影效果的折线图

最近在做银行的项目,项目比较老旧,是基于angular和jquery的,所以很多东西都不支持。而且还是在内网开发的,就很不方便。然后有个需求是需要给当日的数据用折线图展示出来

 大概就是上面这样的效果。用echarts也可以实现,但是内网并没有echarts。所以就考虑使用canvas自己画一个。

下面是一个简单的demo

html部分:

<canvas id="myCanvas"></canvas>

js部分:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 数据
const data = [1, 2, 3, 4, 5, 6, 5, 4, 3, 2, 1];
// 定义画布宽高
const canvasWidth = 800;
const canvasHeight = 400;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
// 定义折线图边距和坐标轴颜色
const padding = 50;
const axisColor = "#333";
// 定义折线颜色和阴影颜色
const lineColor = "#f00";
const shadowColor = "rgba(0, 0, 0, 0.2)";
// 计算折线图区域宽高
const graphWidth = canvasWidth - padding * 2;
const graphHeight = canvasHeight - padding * 2;
// 计算每个数据点的横向间距和纵向间距
const xSpacing = graphWidth / (data.length - 1);
const ySpacing = graphHeight / (Math.max(...data) - Math.min(...data));
// 创建渐变阴影
const gradient = ctx.createLinearGradient(padding, padding, padding, canvasHeight - padding);
gradient.addColorStop(0, "rgba(0, 0, 0, 0)");
gradient.addColorStop(0.5, shadowColor);
gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
// 画坐标轴
ctx.strokeStyle = axisColor;
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(padding, padding);
ctx.lineTo(padding, canvasHeight - padding);
ctx.lineTo(canvasWidth - padding, canvasHeight - padding);
ctx.stroke();
// 画数据点
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(padding, canvasHeight - padding - data[0] * ySpacing);
for (let i = 1; i < data.length; i++) {
  const x = i * xSpacing + padding;
  const y = canvasHeight - padding - data[i] * ySpacing;
  ctx.lineTo(x, y);
}
// 填充渐变阴影
ctx.lineTo(canvasWidth - padding, canvasHeight - padding);
ctx.lineTo(padding, canvasHeight - padding);
ctx.closePath();
ctx.fillStyle = gradient;
ctx.fill();
// 画折线
ctx.strokeStyle = lineColor;
ctx.stroke();

 效果图大概入如上图所示;

当然,如果要实现我所想要的效果,就可以把画坐标的模块给去掉

注意:

因为canvas如果要填充颜色的话,是需要一个封闭空间的,所以,如果要实现需求里的效果,就需要先用白色线画一个封闭空间,然后再给封闭空间填充颜色。然后就需要再重新绘制一次折线,就可以达到需求里的效果了。

如果对你有用的话,那就点赞收藏一下吧~

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在uniapp中使用echarts可以通过uni-echarts插件来实现。下面是一个简单的折线图实现步骤: 1. 安装插件:在HBuilderX中,打开项目,右键选择工具 -> 插件市场,搜索 uni-echarts 插件并安装。 2. 在需要使用图表的页面中引入 echarts 和 uni-echarts 组件。 ``` <template> <view class="container"> <uni-echarts :option="echartsOption" :config="echartsConfig"></uni-echarts> </view> </template> <script> import * as echarts from 'echarts' import uniEcharts from '@/components/uni-echarts/uni-echarts.vue' export default { components: { uniEcharts }, data() { return { echartsOption: {}, echartsConfig: {} } } } </script> ``` 3. 在页面的 data 中定义 echartsOption 和 echartsConfig,其中 echartsOption 是图表的配置项,echartsConfig 是图表的全局配置。 ``` data() { return { echartsOption: { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }, echartsConfig: { lazyLoad: true // 懒加载 } } } ``` 4. 在页面的 onReady 生命周期中初始化图表。 ``` onReady() { this.$nextTick(() => { this.echartsInit() }) }, methods: { echartsInit() { this.$refs.echarts.init((canvas, width, height) => { const chart = echarts.init(canvas, null, { width: width, height: height }) chart.setOption(this.echartsOption) return chart }) } } ``` 5. 至此,你已经成功地在uniapp中使用echarts画出了一个折线图。 以上是一个简单的折线图实现步骤,你可以根据自己的需求来调整和修改图表的配置项,以及添加更多的图表类型。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值