最近在uni-app搭建的微信小程序项目中使用了ECharts,下面这篇文章主要给大家介绍了关于uniapp引用echarts的详细步骤,文中还附有柱状图实例,需要的朋友可以参考下
相信很多小伙伴对于echarts这个东西应该不会陌生，我在网上看到很多文章，那么他到底是怎么用的呢，却是五花八门，我现在就来总结一下我的方法。
如果使用npm全局安装，太麻烦，这里推荐使用官网(ECharts 在线构建)定制下载，这样会方便我们使用。
选择柱状图，折线图，饼图；这三样是平常较常用到的；
坐标系选择直角坐标系；
组件可以全选，也可以选择自己所需要的，在这里个人建议除了工具栏不选，其他都选上；下载后的文件为echarts.min.js，建议把他放在static内。
好了，来到下一步，我们需要在components内创建一个echarts.vue，把这段代码复制下来，放到echarts.vue内；
接下来就可以在所需要使用echarts的页面上，在script内引入该组件，并注册该组件，注册完后你需要复制以下代码
import echarts from '@/components/echarts.vue'; export default { // 注册组件 components: { echarts }, data(){ return{ option:{} } }, methods:{ logstatrt() { // console.log('初次调用'); this.option = { notMerge: true, backgroundColor": "#F8FAFF", tooltip: { trigger: 'axis', showContent: this.showContent, axisPointer: { type: 'shadow', label: { show: true }, }, }, toolbox: { padding: [200, 0, 0, 0], show: true, feature: { //工具配置项 mark: { show: true }, dataView: { //数据视图工具，可以展现当前图表所用数据 show: true, //是否显示该工具 readOnly: false //是否不可编辑 }, magicType: { show: true, //是否显示该工具 type: ['line', 'bar'] //启用的动态类型 }, restore: { show: true //是否显示该工具 }, saveAsImage: { show: true //是否显示该工具 } } }, calculable: false, //是否显示拖拽的手柄 // itemHeight: 0, legend: { //图例组件 data: [{ name: '进入数', }, { name: '出去数' }], itemGap: 24, padding: [16, 0, 0, 0], // y: 'bottom', itemHeight: 8, //高 itemWidth: 8, //宽 icon: 'circle' //设置为圆 }, grid: { top: '15%', left: '4%', right: '4%', bottom: '6%', containLabel: true }, xAxis: [{ show: true, type: 'category', //坐标轴类型 // boundaryGap:false, //解决数据与线不对应问题 data: ['7.1', '7.2', '7.3', '7.4', '7.5', '7.6', '7.7', '7.8', '7.9', '7.10','7.11' ], // offset:50, //['7.1', '7.2', '7.3', '7.4', '7.5', '7.6', '7.7', '7.8', '7.9', '7.10','7.11', ], //this.xList, //obama_budget_2012.names axisLabel: { color: '#7F84B5', fontWeight: 300, interval: 0, }, axisTick: { show: false //刻度线 }, axisLine: { show: false, //不显示坐标轴线 }, }, ], yAxis: [{ show: true, boundaryGap: false, //解决数据与线不对应问题 type: 'value', // name: 'Budget (million USD)', // data: this.yList, minInterval: 1, axisLabel: { interval: 0, }, splitLine: { show: true, lineStyle: { //背景网格线 type: 'dashed' } }, axisTick: { show: false //刻度线 }, axisLine: { show: false, //不显示坐标轴线 }, }], dataZoom: [{ show: false, start: 0, end: 100, handleSize: 8 }, { type: 'inside', start: 0, end: 50, }, { show: false, yAxisIndex: 0, filterMode: 'empty', width: 12, height: '80%', showDataShadow: false, left: '93%', handleSize: 8 } ], series: [{ name: '进入数', type: 'bar', data: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110','120'], //['10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110','120'], // this.inNum, //obama_budget_2012.budget2011List color: "#00B1FF" }, { name: '出去数', type: 'bar', data: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110','120'], //['10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110','120'], //this.outNum, //obama_budget_2012.budget2012List color: "#FF6C00" } ] }; }, } }好了，你已经离成功不远了！！
接下来我们到页面上使用该组件，我们要设置他的id，把option内的配置也给他传过去，该图的宽高也在上面设置好，你会发现，这个时候多了一个柱状图出来
这就是一个简单的echarts柱状图使用 ，我也是走了很多弯路，看了许多的文章，觉得每个人的方法都不同，我只是把我认为好的方法放上来，希望对大家有所帮助。
最后附上一张效果图 （当然，这些颜色都是可改的，具体可以看文档或者来问一下我，我都非常乐意解答）
附：报错:this.echarts.setCanvasCreator is not a function 的解决办法
echarts.vue页面引起的 prors不能传递方法
将刚才定制的echarts.js文件引入进去
import * as echarts from '@/common/echarts.min.js';
参数加this
this.ctx = wx.createCanvasContext(canvasId,this); const query = wx.createSelectorQuery().in(this);
也可以直接复制代码进去,注意修改echarts.js的路径
总结
到此这篇关于uniapp引用echarts的详细步骤的文章就介绍到这了,更多相关uniapp引用echarts内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站！
以上就是uniapp引用echarts的详细步骤(附柱状图实例)的详细内容，更多请关注0133技术站其它相关文章！
