欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

解决微信小程序引用echarts视图模糊的问题

程序员文章站 2022-06-28 18:34:58
在小程序项目中需要用到echarts图表 但是展示的时候遇到了问题 图表高度失真 体验感非常差 经过一番查找实验,终于找到了解决方案 下面上代码! function initChart(canvas, width, height,dpr) { const chart = echarts.init(c ......

在小程序项目中需要用到echarts图表 

但是展示的时候遇到了问题 图表高度失真 体验感非常差 

解决微信小程序引用echarts视图模糊的问题

 

 

 

经过一番查找实验,终于找到了解决方案 

下面上代码!

function initchart(canvas, width, height,dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicepixelratio: dpr //解决小程序视图模糊的问题,必写
  });
  canvas.setchart(chart);
  var checkname = '今天';
  var datalength = 14; //默认的数据长度,既真实数组的长度,必须设置,长度来源:后台传输
  //这里是echart基础配置
  var option = {
    backgroundcolor: 'rgba(25,1,169,.05)',
    tooltip: {
      trigger: 'axis',
      axispointer: {
        type: 'shadow',
        backgroundcolor: 'rgba(245, 245, 245, 1)',
        borderwidth: 1,
        // padding: 10,
      }
    },
    datazoom: [{
        show: false, //是否显示下方滚动条
        realtime: true,
        startvalue: datalength - 7,
        endvalue: datalength - 1, //显示数据结束位置
      },
      {
        type: 'inside',
        realtime: true,
        startvalue: datalength - 7,
        endvalue: datalength - 1, //显示数据结束位置
      }
    ],
    grid: {
      top: '20%',
      right: '0',
      left: '0',
      bottom: '12%'
    },
    xaxis: [{
      type: 'category',
      data: ['02.25', '02.26', '02.27', '02.28', '03.01', '03.02', '03.02', '02.25', '02.26', '02.27', '02.28', '03.01', '03.02', '今天'],
      axisline: {
        linestyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      },
      position: 'top',
      axislabel: {
        color: function(params) {
          //通过判断选中的名字改变柱子的颜色样式
          if (checkname === params) {
            return 'rgba(38,74,255,1)';
          } else {
            return 'rgba(38,74,255,.3)';
          }
        },
        textstyle: {
          fontsize: 14
        },
        padding: [10, 0]

      },

    }],
    yaxis: [{
      show: false,
      axislabel: {
        formatter: '{value}',
        color: '#e2e9ff',
      },
      axisline: {
        show: false
      },
      splitline: {
        linestyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      }
    }],
    series: [{
      type: 'bar',
      data: [300, 450, 770, 203, 255, 188, 156, 300, 450, 770, 203, 255, 188, 156],
      // itemstyle: {
      //     normal: {
      //         color: 'rgba(38,74,255,.3)',
      //     }
      // },
      itemstyle: {
        normal: {
          label: {
            show: true
          },
          color: function(params) {
            //通过判断选中的名字改变柱子的颜色样式
            if (checkname === params.name) {
              return 'rgba(38,74,255,1)';
            } else {
              return 'rgba(38,74,255,.3)';
            }
          }
        }

      },
      label: {
        normal: {
          show: true,
          position: 'top',
          textstyle: {
            color: '#b9c5fc',
            fontsize: '12'
          },
          formatter: '{c}分'
        }
      }
    }]
  };
  chart.setoption(option);
  return chart;
}
 
 
在小程序的data里面调用
解决微信小程序引用echarts视图模糊的问题

 

 这样就解决了 解决后的效果图 

解决微信小程序引用echarts视图模糊的问题