微信小程序使用Echarts全步骤

要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)

今天分享一个小程序使用Echarts插件的步骤，下面开始讲解：

1、首先要想在微信小程序中使用Echarts，就要先去下载Echarts包并引入，

下载地址：https://github.com/ecomfe/echarts-for-weixin

引入与pages同级

2、你要在哪一个页面中使用Echarts,就要在当前页面的json文件中做一下配置：

{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}

3、配置完成后就可以在页面中使用了

<view class="containers"><ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}" bind:init="echartInit"></ec-canvas>
</view>

.containers{height: 600rpx;position: absolute;top: 0;left: 0;right: 0;bottom: 0;display: flex;flex-direction: column;box-sizing: border-box;padding: 20rpx;
}
ec-canvas {width: 100%;height: 100%;
}

import * as echarts from '../../ec-canvas/echarts';
var chart = null;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;
}
Page({/*** 页面的初始数据*/data: {ec: {}},echartInit(e) {var option = {backgroundColor: "#ffffff",color: ["#CC0000", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C"],series: [{type: 'pie',center: ['50%', '50%'],radius: [0, '60%'],data: [{value: 55,name: '虎山牌'}, {value: 20,name: '天马牌'}, {value: 10,name: '虎球牌'}, {value: 20,name: '青山虎牌'}, {value: 38,name: '光宇牌'}, ],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 2, 2, 0.3)'}}}]};initChart(e.detail.canvas, e.detail.width, e.detail.height, option);}
})

这样就可以了，当然这只是初始化的图表，如果不需要改变的，到这应该就够用了，如果需要动态的，我们也只需要改变option得值即可，例如：

在页面中写一个按钮，点击这个按钮我们要改变图表，就可以这样写

//点击按钮修改图表
update() {var option = chart.getOption();console.log(option)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, true);},

好了，就是这些，很简单，当然也不止这一种方法，还有其他的方法，有需要的可以在下方留言，希望能帮助到一些朋友！

微信小程序使用Echarts全步骤相关推荐

微信小程序使用Echarts绘制K线图与双曲线图以及实现tab切换
在微信小程序中使用Echarts需要下载相应的文件,可在这下载ec-canvas,该github里也有很多很好的例子,可自行调试学习. 本例子的目录结构: 微信小程序使用Echarts的步骤在需要引 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
微信小程序给echarts图表动态赋值
微信小程序给echarts图表动态赋值接上一篇:微信小程序引入echart图表直接上例子(运行需要结合上一篇,拉至文章顶部进入): import * as echarts from '../../ ...
微信小程序checkbox的全选以及所有checkbox选中之后的全选
微信小程序checkbox的全选以及所有checkbox选中之后的全选微信小程序checkbox的全选以及所有checkbox选中之后的全选第一次写,软件都不懂,直接把代码拷过来了模板 WXML ...
微信小程序背景图片全屏显示
微信小程序背景图片全屏显示很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
微信小程序利用echarts实现中国任意行政区域地图
微信小程序利用echarts实现中国任意行政区域地图前言实现克隆代码集成点击事件点击跳转代码改造尾巴前言最近微信小程序中需要绘制地图,然后点击地图可以跳转到下一层级.研究了一番,选 ...
微信小程序使用echarts绘画动态图表
微信小程序使用echarts绘画动态图表首先我们从官网下载echarts插件,路径是https://github.com/ecomfe/echarts-for-weixin,把echarts文件放到 ...
微信小程序使用echarts实时更新数据以及常见bug
** 微信小程序使用echarts实时更新数据以及常见bug ** 参考echarts官方文档:https://echarts.apache.org/zh/tutorial.html 下载小程序ech ...
微信小程序使用echarts图表，与延迟加载图表，解决echarts文件过大
微信小程序使用echarts图表,与延迟加载图表,解决echarts文件过大引入echarts组件展示echarts图表数据延迟加载图表如何解决echarts文件过大引入echarts组件 ...

微信小程序使用Echarts全步骤

微信小程序使用Echarts全步骤相关推荐

最新文章

热门文章