在微信小程序中使用 echarts 图片-例 折线图

首先进入echarts官方[https://echarts.apache.org/handbook/zh/get-started/]。这边只需要在小程序中简单应用一下echarts折线图 所以不需要把整体下载下来，这边只需要下载几个简单的东西下来即可！
1. 在小程序中新建一个组件，如下

2. 建好文件之后还不着急写代码，看到我上面的图里面不是还有两个文件文件吗？咱先把资源文件给干下来再说
继续到echarts官网中 往下翻找到 应用篇 看到下面的跨平台方案-微信小程序

这边会告诉你 需要去github上 把对应的组件以及依赖复制过来，包括上面的第一张图里所有的文件 我们直接复制过来，将它覆盖；

然后再界面上引用就好了 等到你把所有代码搞定之后 你可以点击一下上传 好家伙 系统直接提示你

[JS 文件编译错误] 以下文件体积超过 500KB，已跳过压缩以及 ES6 转 ES5 的处理。
componet/LineChart/echarts.js

这个问题好解决 回到echarts官网 咱们针对小程序端定制下载一个echarts.js文件即可

等了几分钟之后呢 你会发现下载下来的文件叫做echarts.min.js，把名字中的min去掉直接改成 然后拖到文件夹中覆盖一下即可；
完成的代码呢 就不放了 大概的操作流程已经再上面了 就不献丑了

实现效果

后面还有几点注意一下
在界面中引用的我补充一下
1.确保你的需要引用的界面json文件里 把你要引入的组件对象定义了一次

2.然后界面上就是一行简单的使用
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}" bind:init="echartInit"></ec-canvas>
这里的ec 一定要跟js中的ec对应 不然必报错

3.js文件中呢
浅引用一下组件资源文件
import * as echarts from '../../componet/LineChart/echarts'; -后面引用部分的echarts不能出错
我这里用到的地方呢 是先通过异步请求加载数据(放在onload中),然后在折线图组件初始化时 再把数据添加进去 这边需求问题啦 就不细细讨论了

不过 初始化 总是不能少的

var chart = null;
// echart 图标初始化
function initChart(canvas, width, height, option) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

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

在异步请求数据后 把对应的列表值传入其中,像这样

option中的参数以及其代表的含义 请自行百度,比较重要的是 series xAxis yAxis
作用分别是渲染 折线 | X轴 | Y轴 数据 用用就知道啦

当然这不是一步两步的问题阿 只是中间个别细节是需要注意一下
然后总结一下 在js中的应用流程
首先 在onload中初始化折线图表

然后是initChart() 赋值

这边我是写在了Page的同级的地方

初始化完成之后呢 咱再将异步请求后的数据放进去

主要的东西是再series中

😑2022年3月22日-Distance

之前的是模仿官方的用法 我引入后的组件又进行了一定的优化 如下：
1.首先展示一下 优化后的样式：

2.其次 代码流程我借鉴的几个帖子 做了相应修改；但是前面的组件内代码以及引入方式 我没有动

首先是wxml界面
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ firstChart }}"></ec-canvas>
这里的 ec 注意一定要与js里data里的数据对应

然后是js代码
在page之外 首先初始化定义两个对象

import * as echarts from '../../componet/LineChart/echarts';

const echartList = [];  //折线图对象
var chartData= null;  // 折线图里的数据对象

Page（{
  data: {

  firstChart: {
          //  初始化折线图数据
            onInit: function (canvas, width, height) {
              chartData= echarts.init(canvas, null, {
                width: width,
                height: height
              });
              canvas.setChart(chartData);
              return chartData;
            }
         },
  },
      onLoad: function (options) {
            this.getData();
      },
      getData: function () {
          // 在这边加载异步数据 功能业务暂时不贴  返回一个data
          var ydata = data.ydata;  // Y轴 数据
          var xdata = data.xdata;  // X轴 数据
          var option01 = {
                          legend: {
                            data: ['第一列数据名字',....],
                            top: 2,  // 距离顶部距离
                            left: 'center',  // 标注内容位置
                            backgroundColor: '#FAFAFA',
                            z: 100
                          },
                          grid: {
                            containLabel: true
                          },
                          tooltip: {
                            // show: true,
                            trigger: 'axis'  //  点击气泡提示悬浮数据内容
                          },
                          xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: xdata
                          },
                          yAxis: {
                            x: 'center',
                            type: 'value',
                            splitLine: {
                              lineStyle: {
                                type: 'dashed'
                              }
                            }
                          },
                          series: [{
                            name: 'cages',
                            type: 'line',
                            smooth: true,
                            data: ydata,
                            label: {  // 每一个点上的数据提示
                              normal: {  
                                show: true,  // 展示
                                position: 'right',  //   文字位置
                                formatter: '{c}U/ml',  // 文字内容
                                textStyle: {  // 文字样式
                                  color: 'blue',
                                  fontSize: '10'
                                }
                              }
                            }
                          }，
                           // 同上 在legend中data写了多少条数据 这边就要写多
                          {........}，
                          {.......}，
          }
          chartData.setOption(option01, true);
      },
})

最后 运行即可
界面样式 就用一个view把canvas包裹起来就好了 ，然后 注意一点 setOption 那里 一定要对应名字！
🙄 2022.03.24

__EOF__

本文作者：派大星⊙∫⊙
本文链接：https://www.cnblogs.com/liusixiang/p/16039525.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！