评论

记录第一次圆饼图的动态加载,利用了ec-canvas中的echarts

自我记录,自我学习

1.首先要下载好ec-canvas插件

2.将插件引入js文件中

3.在 wxml文件中编写

<view style='position:relative;width:100%;height:600rpx;'>
      <ec-canvas id="mychartOne" canvas-id="mychart-bar" ec="{{ecOne}}"></ec-canvas>
</view>


4.实现圆饼图进行延时加载的.

5.实现数据加载形成的圆饼图在onload方法内开始进行数据查询加载

再对数据进行初始化.


6.后续将数据放置在圆饼图中
//自动配置自己要的数据 参照ECharts 微信小程序例子 复制后 修改
//饼图

getOption: function () {
  var that=this;
  console.log("进入了getOption方法中!")
  console.log("dataList", that.data.dataList);
  var option = {
    backgroundColor: "#ffffff",
    color: ["#da8982", "#ec9683","#45B580","#b6e4c7","#B9C753","#dbce8e"],
    series: [{
      label: {
        normal: {
          show: true,
          formatter: ' {b} \n {c} ',//({ d } %)  b=名称 c=数值 d=百分比 \n换行 
          fontSize: 12,
          fontWeight:700,
        }
      },
      labelLine: { show: true },
      type: 'pie',//饼图实例
      center: ['50%', '55%'], //圆饼图的位置
      radius: [0, '60%'], //圆饼图大小的比例
      data: [{
        value: that.data.dataList.wayNum,
        name: '在途量',
        Id:that.data.dataList.matId,
      }, {
          value: that.data.dataList.leadNum,
          name: '未发量',
          Id: that.data.dataList.matId,
        }, {
          value: that.data.dataList.saleNum,
          name: '受订量',
          Id: that.data.dataList.matId,
        }, {
          value: that.data.dataList.dictNum,
          name: '在制量',
          Id: that.data.dataList.matId,
        }, {
          value: that.data.dataList.aiNum,
          name: '可用库存',
          Id: that.data.dataList.matId,
        },{
          value: that.data.dataList.eiNum,
          name: '现有库存',
          Id: that.data.dataList.matId,
        }],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 2, 2, 0.3)'
        }
      }
    }]
  };
  return option;
},


最后可以得到的结果

最后一次编辑于  11-15  
点赞 0
收藏
评论

2 个评论

  • 唐伯虎点蚊香
    唐伯虎点蚊香
    10-25

    我找到原因了,小程序版echarts初始化的方式有两种:

    一种是在标签上初始化

    <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ec}}" bindinit="echartInit"></ec-canvas>

    这种就是我现在用的初始化方式,不会有点击放大的效果。

    第二种是直接page的data里初始化

    data: {
        ec: { // 环形饼图数据
          onInit: echartInit
        }
      }

    这种方式初始化,就会有点击放大的效果了,但是第二种方式我就不知道怎么异步加载完数据再初始化echarts了    orz

    10-25
    赞同
    回复 3
    • 唐伯虎点蚊香
      唐伯虎点蚊香
      10-25
      楼主就是用的第二种方式初始化的,所以就会有点击放大的效果的吧,但是你是怎么异步加载完数据再初始化echcarts的呢?能给个demo看看吗?
      10-25
      回复
    • 林  晓
      林 晓
      10-25
      这里是可以在onload的方法中执行加载你的数据,等请求成功后你再初始化
      10-25
      回复
    • 唐伯虎点蚊香
      唐伯虎点蚊香
      10-25回复林 晓
      好的,谢谢,我在仔细看看你的demo
      10-25
      回复
  • 唐伯虎点蚊香
    唐伯虎点蚊香
    10-25

    复制代码很多引号报错,全改成英文还是有报错。请问点击扇形或者图例后,扇形高亮变大是怎么做到的啊,搞了一天了,头疼死了

    10-25
    赞同
    回复 8
    • 林  晓
      林 晓
      10-25
      点击扇形或者图例后,扇形没有办法高亮变大,有可能是布局的问题,或者手机设备适配的问题,我自己也测试过,同一个程序,有的手机点击扇形可以 变大高亮的,有的手机没有反应。(我也是这几天测试到的。)
      10-25
      回复
    • 林  晓
      林 晓
      10-25
      https://www.echartsjs.com/examples/zh/index.html
      10-25
      回复
    • 唐伯虎点蚊香
      唐伯虎点蚊香
      10-25回复林 晓
      这不是echarts的官方网站吗?
      10-25
      回复
    • 唐伯虎点蚊香
      唐伯虎点蚊香
      10-25回复林 晓
      我是开发者工具和我的安卓手机上都没高亮变大,可能是所有手机上都没高亮,你是做了啥高亮配置了吗?只有少数机型上不会高亮?
      10-25
      回复
    • 林  晓
      林 晓
      10-25回复唐伯虎点蚊香
      你可以参照Echarts 中例子,这里没有配置什么高亮的属性,可以看看你的引用有没有什么问题。但是你在开发工具上都点击了没有高亮变大的话,有可能是在布局的层级上有些问题
      10-25
      回复
    查看更多(3)