Use echarts in the native WeChat applet
现在越来越多的项目都在使用可视化的功能，那么使用 echarts 实现是一种不错的选择，本文将带给大家如何在原生微信小程序中使用 echarts，保姆级教程
1. Download the WeChat applet version echarts file
文件地址：https://github.com/ecomfe/echarts-for-weixin/tree/master
2. Introduce echarts
1. Create a WeChat applet project or open an existing WeChat applet project. The following example adopts a new creation method. Create an empty folder in the computer file and name it yourself.
2. Put the downloaded echarts file into the created empty file
3. Use the WeChat developer tools to open the created folder
4. View the creation result
3. Matters needing attention before use
1. You need to find the app.wxss file, comment or clear the default code for the container, or the subsequent container does not use the container class name
2. If it is a new project, you can delete the page file generated by default
3. And modify the pages configuration option in the app.json file
Fourth, use the echarts file in the project
1. Introduce the echarts.js file in the json file of the page
{
"usingComponents":{
// 引入目录以自己当前项目的路径为准，省略后缀.js
"ec-canvas":"../../ec-canvas/ec-canvas"
}
}
2. Create the dom structure and use it in the wxml file of the page
<!-- 创建容器-此区域用于展示图表 -->
<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. Define the size and style for the container in the wxss file of the page
/* 定义容器大小 */
.container{
width: 100%;
height: 500rpx;
background-color: bisque;
}
/* ec-canvas 组件宽高与父元素一致即可 */
ec-canvas{
width: 100%;
height: 500rpx;
}
4. Among them, ec is an object we defined in index.js, which enables the chart to be initialized and set after the page is loaded, and uses echarts in the js file of the page
// 引入 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. At this time, our option configuration item is still empty, and then we can configure it, enter the echarts official website, and enter the example, https://echarts.apache.org/examples/zh/index.html
6. Select the chart you need and click to enter. This example uses a column chart as a demonstration
7. Copy configuration items
8. Put the copied configuration item into the option configuration item of our code
// 引入 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. Now the chart can be displayed. If you need to replace other charts, you can replace the configuration items of option
V. Conclusion
以上就是 echarts 在小程序中基本的使用方法，如果需要自己定义图表的样式可以参考文档进行个性化的定制：https://echarts.apache.org/zh/option.html
就可以展示出图表，如果需要更换其他图表更换 option 的配置项即可
[外链图片转存中...(img-2TXBNgcO-1683960179758)]
## 五、结语
The above is the basic usage method of echarts in the applet. If you need to define the style of the chart yourself, you can refer to the document for personalized customization: https://echarts.apache.org/zh/option.html