修改dpr提高ECharts图表的清晰度

相信大家在使用ECharts绘制图表的时候会觉得画出的图表没有那么高清,也许策划或产品没有发现或觉得可行,这都不是问题,但是倘若你遇到那些你懂得的策划或是产品的时候,这就成为了一个问题,所以在这里提供两个解决方法:就是利用设置window.devicePixelRatio(设备像素比,简称dpr,若要详细了解请自行百度)去解决这个问题。

方法一:

        //注意:
        //1.这段代码应当写在echarts.js引入之前
        //2.这个属性对于移动端设备有重要影响,使用时请结合项目,切勿乱用
        window.devicePixelRatio = 2;

方法二:
点击这里有详细介绍

对于我来说,我不愿意随意修改插件的源码,更愿意去覆盖重写插件的方法,并结合项目,认为方法一比较合适,其实方法一、方法二都可以,但都不是最好的解决方法,如果你还有更好的解决方法,请留言或评论指点一二,在此感激不尽。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uni-app使用echarts的详细教程如下: 1. 安装echarts插件 在uni-app项目的根目录下,打开终端,执行以下命令安装echarts插件: ```shell npm install echarts --save ``` 2. 在页面中引入echarts 在需要使用echarts的页面中,引入echarts的js文件。可以在`<script>`标签中使用`import`语句引入echarts: ```javascript import * as echarts from 'echarts' ``` 3. 创建echarts实例 在页面的`<template>`标签中,添加一个容器元素用于显示echarts图表: ```html <view class="chart-container" id="chart"></view> ``` 4. 初始化echarts实例 在页面的`<script>`标签中,使用`uni.createSelectorQuery()`方法获取到容器元素的节点,然后使用`echarts.init()`方法初始化echarts实例: ```javascript onReady() { uni.createSelectorQuery().select('#chart').fields({ node: true, size: true }).exec((res) => { const canvas = res[0].node const ctx = canvas.getContext('2d') const dpr = uni.getSystemInfoSync().pixelRatio canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr const chart = echarts.init(canvas, null, { width: res[0].width, height: res[0].height, devicePixelRatio: dpr }) this.chart = chart }) } ``` 5. 配置echarts图表 在页面的`<script>`标签中,使用`this.chart.setOption()`方法配置echarts图表的选项,例如: ```javascript this.chart.setOption({ title: { text: '柱状图示例' }, xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10] }] }) ``` 6. 渲染echarts图表 在页面的`<script>`标签中,使用`this.chart.render()`方法将echarts图表渲染到页面上: ```javascript this.chart.render() ``` 以上是uni-app使用echarts的详细教程。你可以根据需要进行配置和定制,实现各种类型的图表展示。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值