微信小程序給echarts圖表動態賦值

微信小程序給echarts圖表動態賦值

接上一篇：微信小程序引入echart圖表

直接上例子：

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

const app = getApp();
var chart = null

function initChart(canvas, width, height) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: '測試下面legend的紅色區域不應被裁剪',
      left: 'center'
    },
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    legend: {
      data: ['A', 'B', 'C'],
      top: 50,
      left: 'center',
      backgroundColor: 'red',
      z: 100
    },
    grid: {
      containLabel: true
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日'],
      // show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },
    series: [{
      name: 'A',
      type: 'line',
      smooth: true,
      data: [18, 36, 65, 30, 78, 40, 33]
    }, {
      name: 'B',
      type: 'line',
      smooth: true,
      data: [12, 50, 51, 35, 70, 30, 20]
    }, {
      name: 'C',
      type: 'line',
      smooth: true,
      data: [10, 30, 31, 50, 40, 20, 10]
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    ec: {
      onInit: initChart
    }
  },

  onReady() {

  },

  onLoad(){
    this.getLastDay()
  },
  //獲取七天的日期
  getLastDay(){
    var option = {
      backgroundColor: "#ffffff",
      color: ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"],
      series: [{
        label: {
          normal: {
            fontSize: 14
          }
        },
        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)'
          }
        }
      }]
    };
    setTimeout(()=>{
      chart.clear()
      chart.setOption(option);
    },1500)
  }
});

注：由於js異步執行的原因，需要等待一段時間再重新賦值。
複製鏈接加入羣聊【開發交流】：https://jq.qq.com/?_wv=1027&k=5rHG16G
分享不易，點贊關注給作者一點點鼓勵

猜你感興趣：
6步實現微信小程序獲取羣排名與羣openGid
微信小程序引入Vant組件庫
微信小程序雲函數獲取時間相差8小時
mint-ui 引入日期時間選擇器Datetime picker
微信小程序引入echarts圖表
mint-ui 單選列表Radio以及多選列表Checklist的引入
微信小程序雲開發入門（一）
微信小程序之滑動果凍效果