解决微信小程序引用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里面调用

 

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