Skip to content

echart 图表和字体模糊问题 #6054

Closed
@webJing

Description

@webJing

One-line summary [问题简述]

echarts 在显示屏上不清晰

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]:
  • Browser version [浏览器类型和版本]:
  • OS Version [操作系统类型和版本]:

Expected behaviour [期望结果]

期望文字和图表都清晰

ECharts option [ECharts配置项]

http://gallery.echartsjs.com/editor.html?c=xBJp81juHx 配置如例

option ={
    title: {
        text: '米类月累(%)',
        subtext: '',
        left: 'center',
        padding: [140, 0],
        link: 'http://www.baidu.com'
    },
    backgroundColor: '',
    tooltip: {
        formatter: '<div style="text-align: center;">业务指标</div>{b} : {c}'
    },
    toolbox: {
        feature: {
            restore: {},
            saveAsImage: {}
        }
    },
    series: [{
        axisLine: {
            show: true,
            lineStyle: {
                color: [
                    [0.166, '#c23531'],
                    [0.5, '#EFC631'],
                    [0.835, '#63869e'],
                    [1, '#91c7ae']
                ],
                width: 20
            }
        },
        axisTick: {
            show: true
        },
        axisLabel: {
            distance: 6,
            textStyle: {
                color: 'auto'
            }
        },
        itemStyle: {
            normal: {
                color: 'auto'
            }
        },
        radius: '35%',
        pointer: {
            width: 10
        },
        title: {
            offsetCenter: [0, '90%'],
        },
        detail: {
            textStyle: {
                // fontWeight: 'bolder',
                fontSize: 23,
                color: 'black'
            },
            offsetCenter: [0, '58%'],
            formatter: '{value}万\n(5048人)'
        },
        min: 0,
        max: 120,
        name: '米类仪表盘',
        type: 'gauge',
        show: false,
        splitNumber: 12,

        data: [{
            value: '33',
            name: '月目标900吨,月累环比下降20%'
        }]
    }]
};

Other comments [其他信息]

echarts-1

Activity

pissang

pissang commented on Jun 29, 2017

@pissang
Contributor

无法复现

GunhouWong

GunhouWong commented on Jul 4, 2017

@GunhouWong

Chrome 59上的canvas问题。旧版没问题。

zoonderkins

zoonderkins commented on Jul 4, 2017

@zoonderkins

screen shot 2017-07-04 at 14 50 25

最新版沒問題吧
GunhouWong

GunhouWong commented on Jul 4, 2017

@GunhouWong

image

小图会有问题,大的话出现几率低。

webJing

webJing commented on Jul 4, 2017

@webJing
Author

确实小图容易出现

webJing

webJing commented on Jul 10, 2017

@webJing
Author

echarts.init(document.getElementById(id),'', {devicePixelRatio:2});这样的配置可以解决,设置像素比为2

GunhouWong

GunhouWong commented on Jul 12, 2017

@GunhouWong

我这测试无效 @webJing

tedpenk

tedpenk commented on Jul 29, 2017

@tedpenk

@waitingHao 我这测试是有效的:左边模糊,右边清晰,右边加了下面的参数:

echarts.init(document.getElementById('gender1'), null, {devicePixelRatio: 2});

image

GunhouWong

GunhouWong commented on Aug 9, 2017

@GunhouWong

@tedpenk @webJing 生效了,非常感谢。

hz-glueckauf

hz-glueckauf commented on Aug 23, 2017

@hz-glueckauf

另外 在html中
<canvas id="index-chg-chart" width="200%" height="72px" style="width:100%; height: 36px;"></canvas>, 也能解决模糊问题

changbb

changbb commented on Dec 11, 2017

@changbb

我再手机端 加上{devicePixelRatio: 2} 依然不清楚,请问什么原因啊?

huqisan

huqisan commented on May 20, 2019

@huqisan

@changbb 请问一下手机端解决没

changbb

changbb commented on May 20, 2019

@changbb

@changbb 请问一下手机端解决没

我记得是html元素用svg替代canvas

changbb

changbb commented on May 20, 2019

@changbb

@changbb 请问一下手机端解决没

huqisan

huqisan commented on May 20, 2019

@huqisan
wangxinghui88

wangxinghui88 commented on Aug 6, 2021

@wangxinghui88

版本问题, 我一开始安装的是5.1.x的版本, 重新安装4.6.0,一切正常

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @pissang@GunhouWong@zoonderkins@tedpenk@webJing

        Issue actions

          echart 图表和字体模糊问题 · Issue #6054 · apache/echarts