在 web 中引入echart可视化图表是很常见的操作,那在小程序当中又如何引入使用呢

在github上下载echarts-for-weixin代码,并将ec-canvas文件夹,复制拷贝到根目录路径下,与pages目录同级,或者放置到components自定义组件文件夹中

在引用ec-canvas时,相对路径引入正确即可

如下所示:pages/piecharts

配置 json

{
  "usingComponents": {
    "ec-canvas": "../../components/ec-canvas/ec-canvas"
  }
}
复制代码

wxml

<view>
  <view class="pie-charts">
    <ec-canvas
      id="mychart-dom-bar"
      canvas-id="mychart-bar"
      ec="{{ ec }}"
    ></ec-canvas>
  </view>
</view>
复制代码

wxss

.pie-charts {
  width: 100%;
  height: 500rpx; // 一定要给ec-canvas最外层一个高度,否则canvas就不会显示出来
  margin: 20px 0 0 10px;
}
复制代码

js

// pages/piecharts/piecharts.js
// 引入echarts,一定要引入ec-canvas中的echarts.js文件
import * as echarts from '../../components/ec-canvas/echarts';
// 图表选项
let option = {
  title: {
    // 标题
    text: '圆饼图示例',
    x: 'center',
  },

  tooltip: {
    // tip提示
    trigger: 'item',
    formatter: '{a} \n{b} : {c} ({d}%)',
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
      },

      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['前端', '后端', '小程序', '面试题解', '读书'],
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold',
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        // 展示的数据,一般情况下,只要动态替换到这里的数据即可,注意小程序中换行用\n而非br
        { value: 335, name: '前端 \n 23%' },
        { value: 310, name: '后端' },
        { value: 234, name: '小程序' },
        { value: 135, name: '面试题解' },
        { value: 1548, name: '读书' },
      ],
      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({
  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      onInit: initChart,
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {},
});
复制代码

注意事项

1. 在小程序中的引用图表的页面中的配置 json 文件中要引入ec-canvas组件,注意路径的引用正确

2. 在逻辑页面中,使用ec-charts前需要手动导入引入echarts,即import * as echarts from '../../xxxx/ec-canvas/echarts';

3. 在页面的wxss中需要给ec-canvas最外层一个高度,ec-canvas默认的高度是0

4. 具体各个参数选项配置,可参考 echart 官方文档的echarts 官方文档

知道了怎么把数据渲染到页面上,但是又如何修改默认的初始化数据呢,其实只要按照原有的数据结构,把新的数据将原来的给覆盖掉就可以了的

更新与恢复图表数据

// 假设如下是要更新的数据,一般是后台返回的
// 后台返回的数据字段可能跟图表的字段可能不一致,但是结构是必须要相同的
const pieObj = {
  updatelegends: ['吃饭', '约会', '购物', '旅游', '请客'],
  updateExpendData: [
    { money: 1500, type: '吃饭' },
    { money: 2000, type: '约会' },
    { money: 300, type: '购物' },
    { money: 400, type: '旅游' },
    { money: 600, type: '请客' },
  ],

  resetlegend: ['前端', '后端', '小程序', '面试题解', '读书'],
  resetExpendData: [
    { value: 335, name: '前端' },
    { value: 310, name: '后端' },
    { value: 234, name: '小程序' },
    { value: 135, name: '面试题解' },
    { value: 1548, name: '读书' },
  ],
};

module.exports = pieObj; // 导出数据
复制代码

wxml 更新数据

<view class="change-box">
  <view class="update-btn btn" bindtap="onUpdate">更新数据</view>
  <view class="reset-btn btn" bindtap="onResetDate">恢复数据</view>
</view>
复制代码

样式代码

/* pages/piecharts/piecharts.wxss */
.pie-charts {
  width: 100%;
  height: 500rpx; // 图表的外层需要设置一个高度,否则echarts不会显示,默认高度是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;
}
复制代码

**逻辑代码 **

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

const pieData = http://www.wxapp-union.com/require('./date'); // 引入数据

// 选项
let option = {
  // 初始化数据
  title: {
    text: '圆饼图示例',
    x: 'center',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['前端', '后端', '小程序', '面试题解', '读书'],
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} \n{b} : {c} ({d}%)',
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
      },

      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['前端', '后端', '小程序', '面试题解', '读书'],
      },
      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: '读书' },
      ],
      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({
  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      onInit: initChart,
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {},

  // 更新数据
  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, // 因为数据结构字段不一样,所以要进行赋值,修改
        value: item.money, // 如果后端返回的数据字段与图表接口字段一样,那可忽略
      };
    });
    option.legend.data = http://www.wxapp-union.com/legend;
    option.series[0].data = http://www.wxapp-union.com/newExpends;

    if (chart) {
      chart.setOption(option); // 得重新设置Option才会生效
    }
  },

  // 恢复数据
  onResetDate() {
    const expendData = http://www.wxapp-union.com/pieData.resetExpendData;
    const legend = pieData.resetlegend;
    option.legend.data = http://www.wxapp-union.com/legend; // 因为接口字段与后台返回字段相同,直接赋值即可
    option.series[0].data = http://www.wxapp-union.com/expendData;

    if (chart) {
      chart.setOption(option); // 得重新设置Option才会生效
    }
  },
});
复制代码

注意

唯一需要注意的是,不要更改图表渲染的内部数据结构,当后台返回的接口中的数据结构字段与图表不一致时

比如:上面的legend与series下的data中的name与value字段,当后端返回的子段不一样时,只需要在前台重新处理一下即可

上面的更新数据中后台返回字段时money与type,在更新数据时,需要重新赋值

最后需要setOption重新设置数据,否则图表数据是不会更新的,这个与vue-echarts与单独使用echarts有点不一样

实例效果

结语

主要介绍了在小程序中怎么引入图表echarts,是使用ec-canvas这个组件,在使用ec-canvas时,需要注意:

引入ec-canvas组件的路径,同时,还需要在使用的页面当中,引入组件的echart.js文件

图表的基本配置,可以参考echarts的官方文档,更新图表的数据时,需要注意:保持结构一致性,不要修改图表内部数据结构的字段

当后端返回的数据字段与图表字段不一致时,在你拿到数据接口的数据后,重新赋值即可.最后不要忘记重新setOption设置数据