博客

解决echart图表层级太高 cover-view无效的问题

首先在这里贴下微信小程序使用echart的流程：（注意：这里要下载最新版的ec-canvas这里附上链接[https://github.com/ecomfe/echarts-for-weixin]这个最新的链接并且解决了图表模糊的问题。）

下面展示一些

echart使用案例

。将legend的z设置成-1，将头部的cover-view的z-indez设置成99即解决了echart图表层级过高的问题。

import * as echarts from '../../components/ec-canvas/echarts';

//初始化 
var chartLine = null
function initChartLine(canvas, width, height,dpr) {
  chartLine = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr //解决图表模糊问题
  });
  canvas.setChart(chartLine);
  var option = {
    title: {
      left: 'left',
      subtext: '营业额',
      subtextStyle:{
        color:'rgba(51, 51, 51, 1)'
      }
    },
    legend: {
      top: '10%',
      data: ['当月','上月'],
      left: '30%',  //图例距离左的距离
      y: 'center',  //图例上下居中
      z: -1,  
    },
    grid: {
      top: 50,
      left: 10,
      right: 15,
      width: '100%',
      height: '80%',
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'item'
    },
    xAxis: {
      type: 'category',
      data:[1,2,3,4,5,6,7,8,9,10],
      boundaryGap: false,
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      z: 100,
    },
    series: [
      {
        name: '当月',
        type: 'line',
        data:[]
      },
      {
        name: '上月',
        type: 'line',
        data: []
      }

    ]
  };
  chartLine.setOption(option);
  return chartLine;
}

在data里面初始化

 chartLine:{
      onInit: initChartLine
    },

// 重新赋值下需要切换的optoin
   chartLine.setOption(option)