echarts 加载 地图json_微信小程序Echarts图表的使用1

主要内容如下：

小程序界面显示图表，可以直观明了地显示各种信息！

如下页面：

实现过程：

方法1：

1-Github上下载项目 项目地址：https://github.com/ecomfe/echarts-for-weixin

2-微信开发工具中打开项目，将 project.config.json 中的 appid 替换成在公众平台申请的项目 id。pages 目录下的每个文件夹是一个页面，可以根据情况删除不需要的页面，并且在 app.json 中删除对应页面。但通常我们应该很少会使用这种方法，因为我们是在项目中添加这个功能，而不是在这个图表项目的基础上再去添加其他功能。

方法-2

1-项目解压后，里面有一个ec-canvas的文件夹，我们需要把这个文件夹放入我们的项目中。

2-app.json文件中新建pages/bar/index

3-在bar/index.json文件中配置文件

{  "usingComponents": {    "ec-canvas": "../../ec-canvas/ec-canvas" //添加路径信息，根据实际情况填写  }  }

这一配置的作用是，允许我们在 pages/bar/index.wxml 中使用  组件。

4-index.wxml

class=  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}">ec-canvas>view>

5-index.wxss中

ec-canvas {  width: 100%;  height: 100%;}

6-ec的定义

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

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

这对于所有 ECharts 图表都是通用的，用户只需要修改上面 option 的内容，即可改变图表。