微信小程序中Echart 的使用

2022-09-27 12:55:30

1 下载微信微信部的echart 小程序 (https://github.com/ecomfe/echarts-for-weixin)
2 如果只是需要部分图表 可采用定制方式下载 减少小程序包的大小 (https://echarts.apache.org/zh/builder.html)
3 最重要的地方是 官方给的小程序echart 的 数据是写在data 外面的 。我们挺难去动态修改数据
可以采用如下方法 将 数据写在方法中 再数据setData 到data 中

import*as echartsfrom'../../ec-canvas/echarts';var chart=nullfunctioninitChart(canvas, width, height, dpr){
  chart= echarts.init(canvas,null,{
    width: width,
    height: height,
    devicePixelRatio: dpr// new});
  canvas.setChart(chart);return chart;}Page({

  data:{
    ec:{
      onInit: initChart}},onLoad(){this.test()},test(){var option={
      title:{
        text:'阅读书籍分布',
        left:'center',
        textStyle:{
          color:'#999',
          fontWeight:'normal',
          fontSize:14}},
      backgroundColor:"#ffffff",
      series:[{
        label:{
          position:'outside',
          alignTo:'edge',
          formatter:'{name|{b}}\n{time|{c} 小时}',
          minMargin:5,
          edgeDistance:10,
          lineHeight:15,
          rich:{
            time:{
              fontSize:10,
              color:'#999'}},},
        type:'pie',
        center:['50%','50%'],
        radius:['20%','40%'],
        data:[{ name:'克莱因壶', value:3.5},{ name:'投资最重要的事', value:2.8},{ name:'简读中国史', value:1.7},{ name:'你当像鸟飞往你的山', value:1.4},{ name:'表象与本质', value:0.5},{ name:'其它', value:3.8}]}]};setTimeout(()=>{
      chart.clear()
      chart.setOption(option);},1500)}});
  • 作者:麦克白_Gavin
  • 原文链接:https://blog.csdn.net/qq_44855431/article/details/121627694
    更新时间:2022-09-27 12:55:30