微信小程序如何引入echarts组件

参考资仿档友料： https://www.jianshu.com/p/e69e27c77963

但是引入的echarts太大了，蠢链足足备槐900多Kb，怎么办？可以去官网亚索：

官网： https://echarts.apache.org/zh/builder.html

参考资料： https://blog.csdn.net/weixin_45527865/article/details/120891041

在微信小程序中使用Echarts需要进行一些额外的配置才能正确显示，以下是可能的解决方法：

确认echarts库是否已正确安装，可以在毁戚uniapp的依赖管理器中查看echarts是否已被正确安装。

在uniapp中，需要先引入Echarts组件库，在页面中进行调用。可以在页面的 .json 文件中添加以下配置：

css

Copy code

{

"usingComponents": {

"ec-canvas": "@echarts-weixin/ec-canvas"

}

}

确保使用的Echarts版本是支持微信小程序的版本，可以使用以下命令安装：

kotlin

Copy code

npm install echarts@^4.0.0 --save

npm install echarts-gl@^1.1.0 --save

npm install echarts-liquidfill@^1.1.1 --save

在使用Echarts的页面中，需要初始化echarts实码判例，以及将实例绑定到页面的迟余改canvas元素上，可以参考以下示例代码：

kotlin

Copy code

import * as echarts from 'echarts'

export default {

data() {

return {

ec: {

lazyLoad: true // 延迟加载

}

}

},

onLoad() {

this.ecComponent = this.selectComponent('#mychart')

this.ecComponent.init((canvas, width, height, dpr) =>{

// 初始化echarts实例

const chart = echarts.init(canvas, null, {

width: width,

height: height,

devicePixelRatio: dpr // 像素比

})

// 设置options

chart.setOption({

// options 配置

})

// 将图表实例绑定到页面上

this.chart = chart

this.canvas = canvas

return chart

})

}

}

希望这些解决方法能够帮助你解决问题。

类似echarts小程序的图表组件列举：

1、fusionCharts

FusionCharts是一个跨平台，能够跨浏览器的flash图表组件，能够被ASP NET、JSP、ColdFusion、ASP、PHP、Ruby on Rails、简单HTML页面甚至PPT调用。FusionCharts利用Flash创建了紧凑、互动性和视觉逮捕图表，还可以用来制作数据动画图表。

2、Highcharts

Highcharts是一个用纯JavaScript编写成的一个图表库， 能够很简单便捷的在Web网站或Web应用程序添加有交互性的图表。

可支持的图表类型包括直线图、饼状图、仪表图、气泡图、散状点图、曲线图、区域图、柱状图、瀑布流图等20多种图表，其中很多简蠢图表可以集成在同一个图形中形成混合图。

3、AntV-f2

AntV-f2是一个专注于移动，开箱即用的可视化解决方案，支持H5环境和兼容多种环境。里面具备了比较完整的图形语法理论和组件，具有多种移动端图表和各类场景，而且个人可以构建各类图表（50种以上）。

扩展资料

制作图表时要注意：

1、要有自身的表达特性，尤其对时间、空间等概念的表达和一些抽象思维的表达具有文字和言辞无法取代的传达效果。图表要具有表达的准确性，对所示事物的内容、性质或数量等处的表达应该准确无误。

2、要有信谈搏息表达的可读性，在图表认识中应该通俗易懂，尤其是用于大众传达的图表。

3、制作图表要有艺术性，图拦侍陪表是通过视觉的传递来完成，必须考虑到人们的欣赏习惯和审美情趣，这也是区别于文字表达的艺术特性。

---