在原生微信小程序中使用 echarts
现在越来越多的项目都在使用可视化的功能，那么使用 echarts 实现是一种不错的选择，本文将带给大家如何在原生微信小程序中使用 echarts，保姆级教程
一、下载微信小程序版本 echarts 文件
文件地址：https://github.com/ecomfe/echarts-for-weixin/tree/master
二、引入echarts
1.创建一个微信小程序项目或打开已有的微信小程序项目，下述示例采用全新创建的方式，在电脑文件中创建一个空的文件夹，命名自定义即可
2.将下载好的 echarts 文件放入创建好的空文件中
3.使用微信开发者工具打开创建的文件夹
4.查看创建结果
三、使用前处理事项（萌新看——老手略过）
1.需要找到 app.wxss 文件中，将默认给 container 的代码注释或清空，或者后续容器不使用 container 类名
2.如果是新建项目可以删除默认生成的页面文件
3.并修改 app.json 文件中的 pages 配置选项
四、在项目中使用 echarts 文件
1.在页面的 json文件中引入 echarts.js 文件
{
"usingComponents":{
// 引入目录以自己当前项目的路径为准，省略后缀.js
"ec-canvas":"../../ec-canvas/ec-canvas"
}
}
2.在页面的 wxml 文件中创建 dom 结构及使用
<!-- 创建容器-此区域用于展示图表 -->
<view class="container">
<!-- 使用 ec-canvas 组件，此处的命名为引入组件路径前面的定义 key 键的名字 -->
<!-- 需要设置 id canvas-id ec 三个属性 -->
<!-- id canvas-id ec名称可以自己定义，符合命名规范即可 -->
<ec-canvas id="myChart" canvas-id="myChart" ec="{{ec}}"></ec-canvas>
</view>
3.在页面的 wxss 文件中为容器定义大小与样式
/* 定义容器大小 */
.container{
width: 100%;
height: 500rpx;
background-color: bisque;
}
/* ec-canvas 组件宽高与父元素一致即可 */
ec-canvas{
width: 100%;
height: 500rpx;
}
4.其中 ec 是一个我们在 index.js 中定义的对象，它使得图表能够在页面加载后被初始化并设置，在页面的 js 文件中使用 echarts
// 引入 echarts 文件
import * as echarts from '../../ec-canvas/echarts';
// 定义 initChart 方法
// initChart 需要传递四个参数 canvas, width, height, dpr
function initChart(canvas, width, height, dpr) {
// 使用引入的 echarts的init方法对 chart 变量赋值进行初始化
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名称与wxml结构中命名保持一致
ec: {
// 使用 onInit 方法定义
onInit: initChart
}
}
});
5.此时我们的 option 配置项还是为空，接下来我们可以配置一下，进入 echarts 官网，进入示例，https://echarts.apache.org/examples/zh/index.html
6.选择自己需要的图表，点击进入，本示例使用柱形图作为示范
7.复制配置项
8.将复制的配置项放入我们代码的 option 配置项中
// 引入 echarts 文件
import * as echarts from '../../ec-canvas/echarts';
// 定义 initChart 方法
// initChart 需要传递四个参数 canvas, width, height, dpr
function initChart(canvas, width, height, dpr) {
// 使用引入的 echarts的init方法对 chart 变量赋值进行初始化
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // 像素
});
canvas.setChart(chart);
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
}
chart.setOption(option);
return chart;
}
Page({
data: {
// 此处的ec名称与wxml结构中命名保持一致
ec: {
// 使用 onInit 方法定义
onInit: initChart
}
}
});
9.现在也就可以展示出图表，如果需要更换其他图表更换 option 的配置项即可
文章来源：https://www.toymoban.com/news/detail-754597.html
五、结语
以上就是 echarts 在小程序中基本的使用方法，如果需要自己定义图表的样式可以参考文档进行个性化的定制：https://echarts.apache.org/zh/option.html
就可以展示出图表，如果需要更换其他图表更换 option 的配置项即可
[外链图片转存中...(img-2TXBNgcO-1683960179758)]
## 五、结语
以上就是 echarts 在小程序中基本的使用方法，如果需要自己定义图表的样式可以参考文档进行个性化的定制：https://echarts.apache.org/zh/option.html文章来源地址https://www.toymoban.com/news/detail-754597.html
到了这里，关于在原生微信小程序中使用 echarts的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
