小程序 echarts 饼图不显示?

echarts 饼图不显示,柱形图可以正常显示。
image.png

const app = getApp();
import * as echarts from '../../components/ec-canvas/echarts';
var pieChart;


Page({
  data: {
    ecPie: {
      disableTouch: true,
      lazyLoad: true
    },
  },
  onLoad() {
    this._initPieChart();
  },


  _initPieChart: function () {
    this.chart2Componnet = this.selectComponent('#pie-chart');
    this.chart2Componnet.init((canvas, width, height, dpr) => {
      pieChart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      canvas.setChart(pieChart);
      pieChart.setOption(this._getPieOption());
      console.log("pieChart(23) => ", pieChart);
      return pieChart;
    });
  },


  _getPieOption: function () {
    let option = option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' }
          ]
        }
      ]
    };
    return option
  },
})
<view class="pie_chart">
  <ec-canvas id="pie-chart" canvas-id="pie-chart" ec="{{ ecPie }}"></ec-canvas>
</view>

image.png

阅读 2.8k
1 个回答

wxml

<view class="pie_chart">
  <ec-canvas id="pie-chart" canvas-id="pie-chart" ec="{{ ecPie }}" custom-class="pie-chart"></ec-canvas>
</view>

wxss

.pie-chart {
    height: 400rpx;
}

大概就是这样, 给canvas一个高度, 应该就可以的了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题