微信小程序中使用Echarts(折线图)

一、微信中使用 Echars
1.找到GitHub上的DEMO下载链接,官网有详细的使用步骤
官网:http://echarts.baidu.com/
github:https://github.com/ecomfe/echarts-for-weixin

2.下载完成后将解压好的ec-canvas文件夹放到项目根目录里或者components目录下:
在这里插入图片描述
3.在你要用到的.json里配置: 比如index.json (lineChart文件里-是又封装了一层的折线图组件)

{
    "component": true,
    "usingComponents": {
        "ec-canvas":"../../components/ec-canvas/ec-canvas"
    }
}

在这里插入图片描述
然后在index.wxml中引入 组件,

  <view class="pie-charts">
  <view class="lengendTitle">
  <image src="{{tipImg}}" class="tipLineImg" />
  <text class="tipTitle">时/分</text>
  </view>
    <ec-canvas
      id="mychart-dom-bar"
      canvas-id="mychart-bar"
      ec="{{ ec }}"
    ></ec-canvas>
  </view>

4 . 在index.js配置折线图
写在page或Component外面的:

import * as echarts from '../ec-canvas/echarts';
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line'
    }]
  };
  chart.setOption(option);
  return chart;
}

data中定义
在这里插入图片描述

data: {
    ec: {
      onInit: initChart
    },
    tipImg: '../../img/lineTip.png'
  },

在首页page—>index:index.json文件配置:
在这里插入图片描述

{
  "usingComponents": {
"v-lineChart":"../../components/lineChart/index"
  }
}

在首页 page—>index:index.wxml中使用:
在这里插入图片描述

 <view class="chart-container common-bk">
      <v-lineChart wx:if="{{!showDialog}}" />
    </view>

效果:
在这里插入图片描述

  • 0
    点赞
  • 10
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论

打赏作者

蓝胖子的多啦A梦

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值