微信小程序中简单使用echarts图表

1.复制组件至page同级目录下（ec-canvas）

2. 在js中引入

import * as echarts from '../../ec-canvas/echarts';

3.在wxml写个标签

<view class="container" wx:if="{{status==0}}"><ec-canvas class="ec-canvas" id="chart-dom-line" canvas-id="chart-line" ecData="{{chartData}}" ec="{{ec}}"></ec-canvas></view>

样式我是这么设置的（在wcss），差不多大写微信里尺寸可以

/**数据图表样式**/
.ec-canvas {width: 100%;height: 100%;}.container {height: 35vh;background: white;border-radius: 10rpx;}

4.编写数据咯（数据肯定是从接口传的，我就不写死了直接方法也贴出来）

先创建对象

//在page data 中定义
pptn: { // 对象name: "流量",//这个字段是展示图表上方的文字的data: [],waterLev: [],unit: "mm",color: { //设置颜色 以下是两个渐变type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(0, 255, 158, 1)'}, {offset: 1,color: 'rgba(11, 70, 74, 0.29)'}],global: false}},ec: {onInit: initChart},
chartData: {},

初始化图表

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

定义option

var option = {legend: {data: [],icon: 'roundRect',itemWidth: 10,itemHeight: 8,textStyle: {fontSize: 10,},top: 3,left: 'center',z: 100},grid: {right: '15%',top: '15%',containLabel: true,},tooltip: {trigger: 'axis',textStyle: {color: 'white',},formatter: function (params) {let str = '';let clipboardData = '';str += "水位：" + params[0].name + " m";params.forEach(function (item) {str += "\n" + item.marker + " " + item.seriesName + " : " + item.value;});clipboardData = str.replace(/\{([^}]+)\}\s+/g, '');wx.setClipboardData({data: clipboardData,success: function () {wx.hideToast({success: (res) => {},})},})return str;},confine: true,backgroundColor: "rgba(0, 0, 0, 0.8)",position: function (point, params, dom, rect, size) {// 固定在顶部return [point[0], '20%'];}},dataZoom: [{show: false}],xAxis: {type: 'category',boundaryGap: false,data: [],axisLabel: {//坐标轴刻度标签的相关设置。interval: 0,},name: '水位:m'},yAxis: {x: 'center',type: 'value',splitLine: {lineStyle: {type: 'dashed'}},name: 'm³/s'},series: [],
};

定义方法掉接口数据定义option

 getZQR() {let code = this.data.stCodeapp.colorUISdk.request({url: '/dmp-micro-svc-base-manager/baseInfo/ZQRelationLines',method: "POST",data: {setCode: code,"pageNum": 0,"pageSize": 100},header: {'token': app.globalData.token,},}).then(res => {if (res.code == 200) {this.setPptn(res.obj[code]);//数据拿到调下一个方法}});}

定义方法接收

    setPptn(list) { //赋值给chartDatalet data = [];let waterLev = [];if (list) {list.forEach((item, index) => {data[index] = item.flow;//纵坐标的数据waterLev[index] = item.waterLev;//横坐标的数据});let pptn = this.data.pptn;pptn.data = data;pptn.waterLev = waterLev;this.setData({pptn: pptn,chartData: this.setEcData(pptn)//调用下面的方法});}this.setEcOption();}，setEcData() { //this.setData({chartData: {legendData: [],series: [],waterLev: []}});let chartData = {};if (arguments.length > 0) {let arr = [];let data = [];let date = arguments[0].waterLev;for (let i = 0; i < arguments.length; i++) {data.push(arguments[i].name)arr.push(this.setSeries(arguments[i]))}chartData.legendData = data;chartData.waterLev = date;chartData.series = arr;}return chartData;}，setSeries(param) { //设置return {name: param.name,color: param.color,type: 'line',areaStyle: {},symbol: 'circle',data: param.data,smooth: true,};}

最后一步传入数据

    setEcOption() {option.xAxis.data = this.data.chartData.waterLev;option.legend.data = this.data.chartData.legendData;option.series = this.data.chartData.series;setTimeout(() => {chart.setOption(option);}, 1000)},

结束如果有不明白的地方可以评论问我

微信小程序中简单使用echarts图表相关推荐

微信小程序中使用动态echarts
微信小程序中使用动态echarts,套值可用 1.先在微信开发者工具中创建一个项目 2. 在echarts-for-weixin中下载项目解压后打开,把ec-canvas文件夹复制到项目pages同 ...
微信小程序中简单使用wxParse插件解析富文本
微信的小程序中也会出现一些带标签的数据不能直接在页面上渲染出该有的属性值.vue中实现解析富文本比较简单,直接使用v-html即可,而在小程序中有两种解析方法,分别是rich-text和wxParse ...
如何在微信小程序中使用icon字体图表
1.首先我们需要去icon字体库中选中几个想要的图标加入购物车 2.点击右上角的购物车图标进入 3. 进入购物车,点击下载代码 4.下载好的文件夹进行解压 5.将.ttf后缀文件转化为base64格式 ...
微信小程序中使用echarts图
嗨喽大家好,我是老黑.最近这段时间完成了一个功能,那就是在微信小程序中引入了echarts图,也算是对这段时间的工作的一个总结吧.这个功能自己花费了很长的时间才整出来.后来自己反省了以下,总结了以 ...
如何在微信小程序中使用ECharts图表
在微信小程序中使用ECharts 1. 下载插件首先,下载 GitHub 上的 ecomfe/echarts-for-weixin 项目. 下载链接:ecomfe/echarts-for-weixi ...
教你解决Taro微信小程序中使用Echarts体积过大的问题
教你解决Taro微信小程序中使用Echarts体积过大的问题背景为什么选择Echarts? 单包超过2M,如何处理? 以为到此就结束了? 最后背景近期笔者在使用Taro进行微信小程序开发,当引 ...
在微信小程序中绘制图表（part3）
本期大纲 1.饼图绘制 2.如何添加动画效果 3.使用rollup构建项目相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part2) 关注我的 github 项目查看完 ...
【微信小程序】关于使用ECharts制作图表
halo小伙伴们,在原生微信小程序中会遇到需要开发图表,这总不能自己手撸一个吧?多费力啊,这就不得不说ECharts的好用之处了.接下来我来说下微信小程序使用ECharts的一个过程吧 ECharts ...
微信小程序中使用Echarts（折线图）
一.微信中使用 Echars 直接在官网小程序使用Echarts中(文档-教程-在微信中使用Echarts),找到GitHub上的DEMO下载链接,官网有详细的使用步骤官网:http://echar ...

微信小程序中简单使用echarts图表

微信小程序中简单使用echarts图表相关推荐

最新文章

热门文章