微信小程序中使用动态echarts-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序中使用动态echarts。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序中使用动态echarts，套值可用

1、先在微信开发者工具中创建一个项目

2、在echarts-for-weixin中下载项目

微信小程序echarts动态传入数据,微信小程序,echarts,前端,javascript

解压后打开，把ec-canvas文件夹复制到项目pages同目录下
如有必要，将 ec-canvas 目录下的 echarts.js 替换为最新版的 ECharts。如果希望减小包体积大小，可以使用自定义构建生成并替换 echarts.js
进入官网echarts点击下载

微信小程序echarts动态传入数据,微信小程序,echarts,前端,javascript

微信小程序echarts动态传入数据,微信小程序,echarts,前端,javascript
然后根据自己的需求选择需要的图表、坐标系、组件进行打包下载，生成并替换 echarts.js

4、在页面中使用echarts

在json中

  "usingComponents": {
    "ec-canvas":"../../ec-canvas/ec-canvas"
  }

在wxml中

<view class="my-chart">
  <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
</view>

在wxss中

.my-chart {
  width: 90%;
  height: 500rpx;
}
ec-canvas {
  width: 100%;
  height: 100%;
}

在js中

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


function pieChart(chart,valueList) {
  var option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '3%',
      left: 'center'
    },

    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        
        labelLine: {
          show: false
        },
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'inner',
              formatter: function(params) {
                return (params.percent - 0).toFixed(0) + '%'
              }
            },
            labelLine: {
              show: false
            }
          },
          emphasis: {
            label: {
              show: true,
              formatter: "{b}\n{d}%"
            }
          },
        },
        data: valueList
      }
    ]
  };
    chart.setOption(option);
  }


Page({
  data: {
    ec: {
      lazyLoad: true
    },

    valueList:[
      {value: 111, name: '十岁'},
      {value: 231, name: '八岁'},
      {value: 263, name: '六岁'},
      {value: 234, name: '四岁'}
    ]
  },

  onLoad: function (options) {
    this.initChart(this.data.valueList);
  },

 
  initChart: function (valueList) {
    this.selectComponent('#mychart-dom-pie').init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      pieChart(chart,valueList)
      this.chart = chart;
      canvas.setChart(chart);
      return chart;
    })
  },

})

效果图
微信小程序echarts动态传入数据,微信小程序,echarts,前端,javascript
通过改变valueList的值套值文章来源地址https://www.toymoban.com/news/detail-627249.html