微信小程序使用Echarts全步骤

傷城~ 2023-05-31 03:06 19阅读 0赞

--------------------

**要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)**

--------------------

今天分享一个小程序使用Echarts插件的步骤，下面开始讲解：

**1、首先要想在微信小程序中使用Echarts，就要先去下载Echarts包并引入，**

下载地址：[https://github.com/ecomfe/echarts-for-weixin][https_github.com_ecomfe_echarts-for-weixin]

引入与pages同级

**2、你要在哪一个页面中使用Echarts,就要在当前页面的json文件中做一下配置：**

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

**3、配置完成后就可以在页面中使用了**

.containers{
      height: 600rpx;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding: 20rpx;
    }
    ec-canvas {
      width: 100%;
      height: 100%;
    }

import * as echarts from '../../ec-canvas/echarts';
    var chart = null;
    
    function initChart(canvas, width, height, option) {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      canvas.setChart(chart);
      var option = option;
      chart.setOption(option);
      return chart;
    }
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        ec: {}
      },
      echartInit(e) {
        var option = {
          backgroundColor: "#ffffff",
          color: ["#CC0000", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C"],
          series: [{
            type: 'pie',
            center: ['50%', '50%'],
            radius: [0, '60%'],
            data: [{
              value: 55,
              name: '虎山牌'
            }, {
              value: 20,
              name: '天马牌'
            }, {
              value: 10,
              name: '虎球牌'
            }, {
              value: 20,
              name: '青山虎牌'
            }, {
              value: 38,
              name: '光宇牌'
            }, ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 2, 2, 0.3)'
              }
            }
          }]
        };
        initChart(e.detail.canvas, e.detail.width, e.detail.height, option);
      }
    })

这样就可以了，当然这只是初始化的图表，如果不需要改变的，到这应该就够用了，如果需要动态的，我们也只需要改变option得值即可，例如：

在页面中写一个按钮，点击这个按钮我们要改变图表，就可以这样写

//点击按钮修改图表
    update() {
        var option = chart.getOption();
        console.log(option)
        var option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
          }]
        };
        chart.setOption(option, true);
      },

好了，就是这些，很简单，当然也不止这一种方法，还有其他的方法，有需要的可以在下方留言，希望能帮助到一些朋友！

[https_github.com_ecomfe_echarts-for-weixin]: https://github.com/ecomfe/echarts-for-weixin