在小程序里使用ECharts(快速上手)

如何在小程序里使用ECharts(快速上手)

首先ECharts的官网给出了如何在小程序里使用ECharts的官方文档：
链接: link.
https://echarts.apache.org/zh/tutorial.html
但是官方文档里并没有给全，按照它的步骤来做并不能实现数据可视化，在按照官方文档做到最后一步，接下来做到以下几点就能显示图表

1.首先在你创建的页面的.JS文件下引用echarts

//路径不同自行更改
import * as echarts from '../../ec-canvas/echarts';

2.给ec-canvas组件添加样式

ec-canvas {
width: 100%;
height: 50%;
}

3.在app.wxss里添加公共的.container样式

/**app.wxss**/
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;  /* flex布局 */
/* 注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 */
flex-direction: column;  /*决定主轴的方向（即项目的排列方向） */
/* column：主轴为垂直方向，起点在上沿。*/
align-items: center;   /*定义项目在交叉轴上如何对齐 */
/* center：交叉轴的中点对齐*/
justify-content: space-between;   /* 定义了项目在主轴上的对齐方式 */
/* space-between：两端对齐，项目之间的间隔都相等 */
box-sizing: border-box;
/*
content-box：padding和border不被包含在定义的width和height之内
盒子的实际宽度=设置的width+padding+border
border-box：padding和border被包含在定义的width和height之内。
盒子的实际宽度=设置的width（padding和border不会影响实际宽度）
*/
}

做到以上几点就可以实现数据可视化了