ECharts图表组件使用

图表使数据比较或数据变化趋势变得一目了然，有助于快速、有效地表达数据关系，对知识挖掘和信息直观生动感受起关键作用。

今天向小程序伙伴推荐并尝试学习一款老牌图表组件“ECharts”，ECharts 通过提供方便丰富的可视化图表，极大缩短了用户与数据的距离，并且提供了小程序版本。

支持的图表：折线图，柱状图，饼形图,散点图，K线图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时支持任意维度的堆积和多图表混合展现。

摘录了ECharts官方提供的代码创建了一个例子图表：
首先，在 pages/bar 目录下新建以下几个文件：index.js、 index.json、 index.wxml、 index.wxss。并且在 app.json的 pages 中增加 'pages/bar/index'。

index.json 配置如下：

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}
这一配置的作用是，允许我们在 pages/bar/index.wxml 中使用组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。

index.wxml 中，我们创建了一个组件，内容如下：

其中 ec 是一个我们在 index.js 中定义的对象，它使得图表能够在页面加载后被初始化并设置。index.js 的结构如下：

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

  var option = {
    ...
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});

来自：米筷网

ECharts图表组件使用相关推荐

vue-cli ——解决多次复用含有Echarts图表组件的问题
vue-cli --解决多次复用含有Echarts图表组件的问题参考文章: (1)vue-cli --解决多次复用含有Echarts图表组件的问题 (2)https://www.cnblogs.co ...
转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转...
站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...
小程序里面怎么使用Echarts图表组件？
1:下载 GitHub 上的项目 https://github.com/ecomfe/echarts-for-weixin 2:但项目下载之后,打开小程序开发工具,可以看到效果如下,适配性还是比较完 ...
uniapp 使用秋云uCharts图表组件、echarts图表组件
一.uniapp 使用秋云uCharts图表组件 1.我们的项目是依赖uniapp的vue-cli项目操作:将uni_modules目录复制到src目录,即src/uni_modules. 2.页面 ...
小程序Echarts图表组件使用
1:下载 GitHub 上的项目 https://github.com/ecomfe/echarts-for-weixin 2:但项目下载之后,打开小程序开发工具,可以看到效果如下,适配性还是比较完 ...
微信小程序使用Echarts图表组件，动态加载数据，图表模糊处理
1:下载 GitHub 上的项目 https://github.com/ecomfe/echarts-for-weixin 2:项目下载之后,打开小程序开发工具,可以看到效果如下 3:如果是在项目里面 ...
echarts图表组件封装模板
这里提供的模板都是可以直接复用的.不同的图表,无非就是 option 配置不同,props接受传递过来的数据按需设置即可这里我使用了一个 fontChart 的方法,这是为了让图表的字体在浏览器变化 ...
Echarts（小程序版）图表组件使用，wxcharts.js和uCharts.js
一.Echarts(小程序版) 1.1:下载 GitHub 上的项目 https://github.com/ecomfe/echarts-for-weixin 1.2:但项目下载之后,打开小程序开发 ...
echarts ucharts 和_Echarts（小程序版）图表组件使用（转），wxcharts.js和uCharts.js
一.Echarts(小程序版) 1.1:下载 GitHub 上的项目 1.2:但项目下载之后,打开小程序开发工具,可以看到效果如下,适配性还是比较完美的. 1.3.如果是在项目里面引入组件的话,打开 ...

ECharts图表组件使用

ECharts图表组件使用相关推荐

最新文章

热门文章