在 web 中引入echart可視化圖表是很常見(jiàn)的操作,那在小程序當(dāng)中又如何引入使用呢

在github上下載echarts-for-weixin代碼,并將ec-canvas文件夾,復(fù)制拷貝到根目錄路徑下,與pages目錄同級(jí),或者放置到components自定義組件文件夾中

在引用ec-canvas時(shí),相對(duì)路徑引入正確即可

如下所示:pages/piecharts

配置 json

{
  "usingComponents": {
    "ec-canvas": "../../components/ec-canvas/ec-canvas"
  }
}
復(fù)制代碼

wxml

<view>
  <view class="pie-charts">
    <ec-canvas
      id="mychart-dom-bar"
      canvas-id="mychart-bar"
      ec="{{ ec }}"
    ></ec-canvas>
  </view>
</view>
復(fù)制代碼

wxss

.pie-charts {
  width: 100%;
  height: 500rpx; // 一定要給ec-canvas最外層一個(gè)高度,否則canvas就不會(huì)顯示出來(lái)
  margin: 20px 0 0 10px;
}
復(fù)制代碼

js

// pages/piecharts/piecharts.js
// 引入echarts,一定要引入ec-canvas中的echarts.js文件
import * as echarts from '../../components/ec-canvas/echarts';
// 圖表選項(xiàng)
let option = {
  title: {
    // 標(biāo)題
    text: '圓餅圖示例',
    x: 'center',
  },

  tooltip: {
    // tip提示
    trigger: 'item',
    formatter: '{a} \n : {c} (jthnh5d%)',
  },
  series: [
    {
      name: '訪問(wèn)來(lái)源',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
      },

      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['前端', '后端', '小程序', '面試題解', '讀書(shū)'],
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold',
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        // 展示的數(shù)據(jù),一般情況下,只要?jiǎng)討B(tài)替換到這里的數(shù)據(jù)即可,注意小程序中換行用\n而非br
        { value: 335, name: '前端 \n 23%' },
        { value: 310, name: '后端' },
        { value: 234, name: '小程序' },
        { value: 135, name: '面試題解' },
        { value: 1548, name: '讀書(shū)' },
      ],
      itemStyle: {
        // 陰影
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
};

let chart;
// 圖表初始化
function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr, // 像素
  });
  canvas.setChart(chart);
  chart.setOption(option);
  return chart;
}

Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    ec: {
      onInit: initChart,
    },
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function(options) {},
});
復(fù)制代碼

注意事項(xiàng)

1. 在小程序中的引用圖表的頁(yè)面中的配置 json 文件中要引入ec-canvas組件,注意路徑的引用正確

2. 在邏輯頁(yè)面中,使用ec-charts前需要手動(dòng)導(dǎo)入引入echarts,即import * as echarts from '../../xxxx/ec-canvas/echarts';

3. 在頁(yè)面的wxss中需要給ec-canvas最外層一個(gè)高度,ec-canvas默認(rèn)的高度是0

4. 具體各個(gè)參數(shù)選項(xiàng)配置,可參考 echart 官方文檔的echarts 官方文檔

知道了怎么把數(shù)據(jù)渲染到頁(yè)面上,但是又如何修改默認(rèn)的初始化數(shù)據(jù)呢,其實(shí)只要按照原有的數(shù)據(jù)結(jié)構(gòu),把新的數(shù)據(jù)將原來(lái)的給覆蓋掉就可以了的

更新與恢復(fù)圖表數(shù)據(jù)

// 假設(shè)如下是要更新的數(shù)據(jù),一般是后臺(tái)返回的
// 后臺(tái)返回的數(shù)據(jù)字段可能跟圖表的字段可能不一致,但是結(jié)構(gòu)是必須要相同的
const pieObj = {
  updatelegends: ['吃飯', '約會(huì)', '購(gòu)物', '旅游', '請(qǐng)客'],
  updateExpendData: [
    { money: 1500, type: '吃飯' },
    { money: 2000, type: '約會(huì)' },
    { money: 300, type: '購(gòu)物' },
    { money: 400, type: '旅游' },
    { money: 600, type: '請(qǐng)客' },
  ],

  resetlegend: ['前端', '后端', '小程序', '面試題解', '讀書(shū)'],
  resetExpendData: [
    { value: 335, name: '前端' },
    { value: 310, name: '后端' },
    { value: 234, name: '小程序' },
    { value: 135, name: '面試題解' },
    { value: 1548, name: '讀書(shū)' },
  ],
};

module.exports = pieObj; // 導(dǎo)出數(shù)據(jù)
復(fù)制代碼

wxml 更新數(shù)據(jù)

<view class="change-box">
  <view class="update-btn btn" bindtap="onUpdate">更新數(shù)據(jù)</view>
  <view class="reset-btn btn" bindtap="onResetDate">恢復(fù)數(shù)據(jù)</view>
</view>
復(fù)制代碼

樣式代碼

/* pages/piecharts/piecharts.wxss */
.pie-charts {
  width: 100%;
  height: 500rpx; // 圖表的外層需要設(shè)置一個(gè)高度,否則echarts不會(huì)顯示,默認(rèn)高度是0
  margin: 20px 0 0 10px;
}

.change-box {
  display: flex;
  justify-content: center;
}

.btn {
  width: 80px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  color: #fff;
}

.update-btn {
  background: #f56c6c;
  margin-right: 10px;
}

.reset-btn {
  background: #409eff;
}
復(fù)制代碼

**邏輯代碼 **

// pages/piecharts/piecharts.js
// 引入echarts
import * as echarts from '../../components/ec-canvas/echarts';

const pieData = http://www.wxapp-union.com/require('./date'); // 引入數(shù)據(jù)

// 選項(xiàng)
let option = {
  // 初始化數(shù)據(jù)
  title: {
    text: '圓餅圖示例',
    x: 'center',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['前端', '后端', '小程序', '面試題解', '讀書(shū)'],
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} \n : {c} (rlzr5zn%)',
  },
  series: [
    {
      name: '訪問(wèn)來(lái)源',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
      },

      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['前端', '后端', '小程序', '面試題解', '讀書(shū)'],
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold',
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 335, name: '前端 \n 23%' },
        { value: 310, name: '后端' },
        { value: 234, name: '小程序' },
        { value: 135, name: '面試題解' },
        { value: 1548, name: '讀書(shū)' },
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
};

let chart;

function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr, // 像素
  });
  canvas.setChart(chart);
  chart.setOption(option);
  return chart;
}

Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    ec: {
      onInit: initChart,
    },
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function(options) {},

  // 更新數(shù)據(jù)
  onUpdate() {
    console.log(pieData);
    const expendData = http://www.wxapp-union.com/pieData.updateExpendData;
    const legend = pieData.updatelegends;
    const newExpends = expendData.map((item) => {
      return {
        name: item.type, // 因?yàn)閿?shù)據(jù)結(jié)構(gòu)字段不一樣,所以要進(jìn)行賦值,修改
        value: item.money, // 如果后端返回的數(shù)據(jù)字段與圖表接口字段一樣,那可忽略
      };
    });
    option.legend.data = http://www.wxapp-union.com/legend;
    option.series[0].data = http://www.wxapp-union.com/newExpends;

    if (chart) {
      chart.setOption(option); // 得重新設(shè)置Option才會(huì)生效
    }
  },

  // 恢復(fù)數(shù)據(jù)
  onResetDate() {
    const expendData = http://www.wxapp-union.com/pieData.resetExpendData;
    const legend = pieData.resetlegend;
    option.legend.data = http://www.wxapp-union.com/legend; // 因?yàn)榻涌谧侄闻c后臺(tái)返回字段相同,直接賦值即可
    option.series[0].data = http://www.wxapp-union.com/expendData;

    if (chart) {
      chart.setOption(option); // 得重新設(shè)置Option才會(huì)生效
    }
  },
});
復(fù)制代碼

注意

唯一需要注意的是,不要更改圖表渲染的內(nèi)部數(shù)據(jù)結(jié)構(gòu),當(dāng)后臺(tái)返回的接口中的數(shù)據(jù)結(jié)構(gòu)字段與圖表不一致時(shí)

比如:上面的legend與series下的data中的name與value字段,當(dāng)后端返回的子段不一樣時(shí),只需要在前臺(tái)重新處理一下即可

上面的更新數(shù)據(jù)中后臺(tái)返回字段時(shí)money與type,在更新數(shù)據(jù)時(shí),需要重新賦值

最后需要setOption重新設(shè)置數(shù)據(jù),否則圖表數(shù)據(jù)是不會(huì)更新的,這個(gè)與vue-echarts與單獨(dú)使用echarts有點(diǎn)不一樣

實(shí)例效果

結(jié)語(yǔ)

主要介紹了在小程序中怎么引入圖表echarts,是使用ec-canvas這個(gè)組件,在使用ec-canvas時(shí),需要注意:

引入ec-canvas組件的路徑,同時(shí),還需要在使用的頁(yè)面當(dāng)中,引入組件的echart.js文件

圖表的基本配置,可以參考echarts的官方文檔,更新圖表的數(shù)據(jù)時(shí),需要注意:保持結(jié)構(gòu)一致性,不要修改圖表內(nèi)部數(shù)據(jù)結(jié)構(gòu)的字段

當(dāng)后端返回的數(shù)據(jù)字段與圖表字段不一致時(shí),在你拿到數(shù)據(jù)接口的數(shù)據(jù)后,重新賦值即可.最后不要忘記重新setOption設(shè)置數(shù)據(jù)